How to create lists and links using jQuery EasyUI Mobile ?
In this article we will learn how to design lists, group them and create links for easy navigation using jQuery EasyUI Mobile.
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.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Please take care of file paths of pre-compiled library files while implementation.
Example 1: The following example demonstrates lists and create links via buttons using jQuery EasyUI Mobile.
html
<!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 --> < script type = "text/javascript" src = "jquery.easyui.min.js" > </ script > <!--jQuery libraries of EasyUI Mobile--> < script type = "text/javascript" src = "jquery.easyui.mobile.js" > </ script > </ head > < body > <!--'easyui-navpanel' class is used for nav panel--> < div class = "easyui-navpanel" > < header > < div class = "m-toolbar" > < span class = "m-title" >List Button</ span > </ div > </ header > <!--'m-list' class is used for simple list--> < ul class = "m-list" > < li >C < div class = "m-right" > < a href = class = "easyui-linkbutton" > Add </ a > </ div > </ li > < li >C++ < div class = "m-right" > < a href = class = "easyui-linkbutton" > Add </ a > </ div > </ li > < li >Java < div class = "m-right" > < a href = class = "easyui-linkbutton" > Add </ a > </ div > </ li > < li >Python < div class = "m-right" > < a href = class = "easyui-linkbutton" > Add </ a > </ div > </ li > </ ul > </ div > </ body > </ html > |
Output:
- Before execute:
After execute:
Example 2: The following example demonstrates grouping of lists using the above plugin.
html
<!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 --> < script type = "text/javascript" src = "jquery.easyui.min.js" > </ script > <!--jQuery libraries of EasyUI Mobile--> < script type = "text/javascript" src = "jquery.easyui.mobile.js" > </ script > </ head > < body > <!--'easyui-navpanel' class for navigation panel--> < div class = "easyui-navpanel" > < header > < div class = "m-toolbar" > < span class = "m-title" > List group and link lists </ span > </ div > </ header > <!--'m-list' class is used for simple lists --> < ul class = "m-list" > <!--'m-list-group' class is used to group lists --> < li class = "m-list-group" >Algorithms</ li > < li > < a href = onclick = "display(this)" > Analysis of algorithms </ a > </ li > < li > < a href = onclick = "display(this)" > Searching algorithms </ a > </ li > < li > < a href = onclick = "display(this)" > Geometric algorithms </ a > </ li > < li >< a href = onclick = "display(this)" > Greedy algorithms </ a > </ li > < li class = "m-list-group" > Web Technologies </ li > < li >< a href = "" onclick = "display(this)" > HTML</ a > </ li > < li > < a href = onclick = "display(this)" > Javascript </ a > </ li > </ ul > </ div > < div id = "divID2" class = "easyui-navpanel" > < header > < div class = "m-toolbar" > < span id = "panel2-title" class = "m-title" > Details </ span > < div class = "m-left" > <!--'m-back' class is used for going back--> < a href = "javascript:void(0)" class = "easyui-linkbutton m-back" plain = "true" outline = "true" onclick = "$.mobile.back()" > Back </ a > </ div > </ div > </ header > < div style = "margin:50px 0 0;text-align:center" > < a href = "javascript:void(0)" class = "easyui-linkbutton" style = "width:100px;height:30px" onclick = "$.mobile.back()" > Go Back </ a > </ div > </ div > < script type = "text/javascript" > function display(target) { var link = $(target).text(); $('#panel2-title').html(link); $.mobile.go('#divID2'); } </ script > </ body > </ html > |
Output:
- Before execute:
- After execute:
Example 3: The following example demonstrates simple lists with images using the above plugin.
html
<!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 --> < script type = "text/javascript" src = "jquery.easyui.min.js" > </ script > <!--jQuery libraries of EasyUI Mobile--> < script type = "text/javascript" src = "jquery.easyui.mobile.js" > </ script > < style > #listID .list-image { float: left; width: 32px; height: 32px; border: 0; margin-right: 5px; } #listID .list-header { font-size: 14px; font-weight: bold; } #listID .list-content { text-overflow: ellipsis; overflow: hidden; } </ style > </ head > < body > <!--'easyui-navpanel' class for navigation panel--> < div class = "easyui-navpanel" > < header > < div class = "m-toolbar" > < span class = "m-title" > Images for simple lists </ span > </ div > </ header > <!--'m-list' class is used --> < ul id = "listID" class = "m-list" > < li > <!--'list-image' class is used --> < img class = "list-image" src = "images/html.png" /> <!--'list-header' class is used for heading--> < div class = "list-header" >HTML</ div > <!--'list-content' class for the list content--> < div class = "list-content" > HTML stands for HyperText Markup Language. It is used to design web pages. </ div > </ li > < li > < img class = "list-image" src = "images/php.png" /> < div class = "list-header" >PHP</ div > < div class = "list-content" > PHP is a server-side scripting language designed specifically for web development. </ div > </ li > </ ul > </ div > </ body > </ html > |
Output: