How to design menu using jQuery EasyUI Mobile ?
In this article, we will learn how to design menu list using jQuery EasyUI Mobile plugin. 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
Example 1: The following example demonstrates simple menu using jQuery EasyUI Mobile 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 library of EasyUI Mobile --> < script type = "text/javascript" src = "jquery.easyui.mobile.js" > </ script > </ head > < body > < div class = "easyui-navpanel" style = "position:relative" > <!-- m-title,m-toolbar class is used here--> < header > < div class = "m-toolbar" > < div class = "m-title" >Menu</ div > < div class = "m-right" > <!-- Icons taken from themes folder--> < a href = "javascript: void(0)" class = "easyui-linkbutton" data-options="iconCls: 'icon-search', plain: true"> </ a > <!-- 'easyui-menubutton' class is used here--> < a href = "javascript:void(0)" class = "easyui-menubutton" data-options="iconCls:'icon-more', menu: '#menuID', menuAlign: 'right', hasDownArrow: true"> </ a > </ div > </ div > </ header > </ div > < div id = "menuID" class = "easyui-menu" style = "width:150px;" > < div >New tab</ div > < div >New Window</ div > <!-- EasyUI Menu separator class --> < div class = "menu-sep" ></ div > < div >History</ div > < div >Bookmarks</ div > < div >Downloads</ div > < div class = "menu-sep" ></ div > < div >Edit</ div > < div >Cut</ div > < div >Copy</ div > < div >Paste</ div > < div class = "menu-sep" ></ div > < div >Settings</ div > < div data-options = "iconCls: 'icon-remove'" > Clear </ div > < div >Exit</ div > </ div > </ body > </ html > |
Output:
Example 2: The following example demonstrates a menubar using the 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 library of EasyUI Mobile --> < script type = "text/javascript" src = "jquery.easyui.mobile.js" > </ script > </ head > < body > < div class = "easyui-navpanel" style = "position:relative" > <!-- m-title,m-toolbar class is used here--> < header > < div class = "m-toolbar" > < div class = "m-title" > <!-- easyui-menubutton class is used here--> class = "easyui-linkbutton" data-options = "plain:true,outline:true" style = "width:70px" > Home </ a > < a href = "javascript:void(0)" class = "easyui-menubutton" data-options = "menu:'#menuID1',outline:true" style = "width:70px" > History </ a > < a href = "javascript:void(0)" class = "easyui-menubutton" data-options = "menu:'#menuID2',outline:true" style = "width:95px" > Bookmarks </ a > class = "easyui-linkbutton" data-options = "plain:true,outline:true" style = "width:70px" > About </ a > </ div > </ div > </ header > </ div > < div id = "menuID1" class = "easyui-menu" style = "width:150px;" > < div >New tab</ div > < div >New Window</ div > <!--EasyUI Menu separator class--> < div class = "menu-sep" ></ div > < div >Edit</ div > < div >Cut</ div > < div >Copy</ div > < div >Paste</ div > < div class = "menu-sep" ></ div > < div >Settings</ div > < div data-options = "iconCls:'icon-remove'" > Clear </ div > < div >Exit</ div > </ div > < div id = "menuID2" style = "width:100px;" > < div >History</ div > < div >Downloads</ div > </ div > </ body > </ html > |
Output: