EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.
In this article, we will learn about badges for mobile interface. Badges are numbers that associated with the link to indicate the number of items associated with the link.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Please take care of file paths for pre-compiled files while implementing in your codes for mobile applications.
Example 1: The following example demonstrates some basic badges for mobile applications using EasyUI framework.
<!DOCTYPE html> < html >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" initial-scale = 1 .0,
maximum-scale = 1 .0, user-scalable = no ">
<!-- EasyUI specific stylesheets-->
< link rel = "stylesheet" type = "text/css" href = "themes/metro/easyui.css" >
< link rel = "stylesheet" type = "text/css" href = "themes/mobile.css" >
< link rel = "stylesheet" type = "text/css" href = "themes/icon.css" >
<!--jQuery library -->
< script type = "text/javascript" src = "jquery.min.js" >
</ script >
<!--jQuery libraries of EasyUI and
EasyUI Mobile -->
< script type = "text/javascript" src = "jquery.easyui.min.js" >
</ script >
< script type = "text/javascript" src = "jquery.easyui.mobile.js" >
</ script >
</ head >
< body >
< div class = "easyui-navpanel" >
<!-- m-badge class is used for badges-->
< div style = "padding:30px 40px" >
< a href = "#" class = "easyui-linkbutton"
iconCls = "icon-ok" >
Badge 1
< span class = "m-badge" >3</ span >
</ a >
</ div >
< div style = "padding:30px 40px" >
< a href = "#" class = "easyui-linkbutton" data-options="iconCls:'icon-large-picture',
iconAlign:'top',size:'large'">
Badge 2
< span class = "m-badge" >4</ span >
</ a >
< a href = "#" class = "easyui-linkbutton" data-options="iconCls:'icon-large-shapes',
iconAlign:'top', size:'large'"
style = "margin-left:20px" >
Badge 3
< span class = "m-badge" >5</ span >
</ a >
</ div >
< div style = "padding:30px 40px" >
< a href = "#" class = "easyui-linkbutton m-badge" data-badge = "23" style="width:100px;
height:40px; margin-left:20px">
Badge Attr
</ a >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: The following example demonstrates list and footer badges for mobile applications using EasyUI framework.
<!doctype html> < html >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" initial-scale = 1 .0,
maximum-scale = 1 .0, user-scalable = no ">
<!-- EasyUI specific stylesheets-->
< link rel = "stylesheet" type = "text/css" href = "themes/metro/easyui.css" >
< link rel = "stylesheet" type = "text/css" href = "themes/color.css" >
< link rel = "stylesheet" type = "text/css" href = "themes/mobile.css" >
< link rel = "stylesheet" type = "text/css" href = "themes/icon.css" >
<!--jQuery library -->
< script type = "text/javascript" src = "jquery.min.js" >
</ script >
<!--jQuery libraries of EasyUI and
EasyUI Mobile -->
< script type = "text/javascript" src = "jquery.easyui.min.js" >
</ script >
< script type = "text/javascript" src = "jquery.easyui.mobile.js" >
</ script >
</ head >
< body >
< div class = "easyui-navpanel" >
< header >
< div class = "m-toolbar" >
< span class = "m-title" >
List and Footer Badges
</ span >
</ div >
</ header >
<!-- m-list class is used here-->
< ul class = "m-list" >
< li >Mobile App
< div class = "m-right" >
< span class = "m-badge" style = "margin-top:10px" >
234
</ span >
</ div >
</ li >
< li >Web Design
< div class = "m-right" >
< span class = "m-badge c1" style = "margin-top:10px" >12
</ span >
</ div >
</ li >
< li >IoT
< div class = "m-right" >
< span class = "m-badge c2" style = "margin-top:10px" >6
</ span >
</ div >
</ li >
</ ul >
<!-- m-buttongroup class is used here-->
< footer >
< div class="m-buttongroup
m-buttongroup-justified"
style = "width:100%" >
< a href = "#" class = "easyui-linkbutton" data-options="iconCls:'icon-large-picture',
size:'large', iconAlign:'top',plain:true">
Photos
</ a >
< a href = "#" class = "easyui-linkbutton" data-options="iconCls:'icon-large-clipart',
size:'large', iconAlign:'top',plain:true">
Artwork
</ a >
< a href = "#" class = "easyui-linkbutton" data-options="iconCls:'icon-large-shapes',
size:'large', iconAlign:'top',plain:true">
Shapes
< span class = "m-badge" >
25
</ span >
</ a >
< a href = "#" class = "easyui-linkbutton" data-options="iconCls:'icon-large-smartart',
size:'large', iconAlign:'top',plain:true">
SmartArt
</ a >
</ div >
</ footer >
</ div >
</ body >
</ html >
|
Output:
Example 3: The following example demonstrates tabs badges.
<!doctype html> < html >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" initial-scale = 1 .0,
maximum-scale = 1 .0, user-scalable = no ">
<!-- EasyUI specific stylesheets-->
< link rel = "stylesheet" type = "text/css" href = "themes/metro/easyui.css" >
< link rel = "stylesheet" type = "text/css" href = "themes/color.css" >
< link rel = "stylesheet" type = "text/css" href = "themes/mobile.css" >
< link rel = "stylesheet" type = "text/css" href = "themes/icon.css" >
<!--jQuery library -->
< script type = "text/javascript" src = "jquery.min.js" ></ script >
<!--jQuery libraries of EasyUI and
EasyUI Mobile -->
< script type = "text/javascript" src = "jquery.easyui.min.js" >
</ script >
< script type = "text/javascript" src = "jquery.easyui.mobile.js" >
</ script >
< style >
.tab-class {
padding-top: 6px;
position: relative;
display: inline-block;
line-height: 12px;
}
p {
line-height: 150%;
}
</ style >
</ head >
< body >
< div class = "easyui-navpanel" >
< header >
< div class = "m-toolbar" >
< span class = "m-title" >
Tab Badges
</ span >
</ div >
</ header >
<!-- easyui-tabs class is used -->
< div class = "easyui-tabs" data-options= "tabHeight: 60,
fit: true, tabPosition: 'bottom', border: false,
pill: true, narrow: true, justified: true">
<!-- m-badge class is used -->
< div style = "padding:10px" >
< div id = "htmlDiv" class = "panel-header tab-class" >
< img src = 'images/html.png' width = "50px" height = "50px" />
< span class = "m-badge" >13</ span >
</ div >
< p >
HTML stands for HyperText Markup Language.
It is used to design web pages using a
markup language. HTML is the combination
of Hypertext and Markup language. Hypertext
defines the link between the web pages.
A markup language is used to define the
text document within tag which defines the
structure of web pages..
</ p >
</ div >
< div style = "padding:10px" >
< div id = "cssDiv" class = "panel-header tab-class" >
< img src = 'images/css.png'
width = "50px" height = "50px" />
< span class = "m-badge" >14</ span >
</ div >
< p >
Cascading Style Sheets, fondly referred to
as CSS, is a simply designed language
intended to simplify the process of making
web pages presentable. CSS allows you to
apply styles to web pages. More importantly,
CSS enables you to do this independent of
the HTML that makes up each web page.
</ p >
</ div >
< div style = "padding:10px" >
< div id = "phpDiv" class = "panel-header tab-class" >
< img src = 'images/php.jpg' width = "50px" height = "50px" / />
< span class = "m-badge" >15</ span >
</ div >
< p >
The term PHP is an acronym for PHP:
Hypertext Preprocessor. PHP is a server-side
scripting language designed specifically
for web development. PHP can be easily
embedded in HTML files and HTML codes can
also be written in a PHP file.
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output: