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. It helps in building features for interactive web and mobile applications saving a lot of time for developers.
Download all the required pre-compiled files from the official website and save it in your working folder. Please take care of file paths during code implementation.
Official website for jQuery EasyUI:
https://www.jeasyui.com/download/index.php
Example 1: The following example demonstrates a simple menu display on the right click of the webpage. The script part also shows the event handling using the jQuery 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 = "demo.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 >
</ head >
< body >
< h2 >
jQuery EasyUI basic menu
on right click
</ h2 >
< p >
Please right click on
the webpage.
</ p >
<!-- easyui-menu class is used -->
< div id = "menuID" style = "width:120px;" >
< div >New Window</ div >
< div >
< span >Open</ span >
<!-- menu-content class is used -->
< div class = "menu-content" style =
"text-align:left;padding:10px" >
< div style="font-weight:bold;
font-size:14px;margin-bottom:10px">
Select Language:
</ div >
< ul id = "listID" >
< li >JavaScript</ li >
< li >Perl</ li >
< li >PHP</ li >
< li >Python</ li >
</ ul >
</ div >
</ div >
< div data-options = "iconCls:'icon-save'" >
Save
</ div >
< div class = "menu-sep" ></ div >
< div >Exit</ div >
</ div >
< script >
/* Event handling */
$(function () {
$('#menuID').menu();
$('#listID').tree();
$(document).bind('contextmenu', function (e) {
e.preventDefault();
$('#menuID').menu('show', {
left: e.pageX,
top: e.pageY
});
});
});
</ script >
</ body >
</ html >
|
Output:
Example 2: The following example demonstrates a menu with its submenu using the above-mentioned 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 = "demo.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 >
</ head >
< body >
< h2 >
jQuery EasyUI basic menu
on right click
</ h2 >
< p >
Please right click on
the webpage.
</ p >
<!-- easyui-menu class is used -->
< div id = "menuID" class = "easyui-menu" style = "width:120px;" >
< div onclick = "javascript:alert('new')" >
New
</ div >
< div >
< span >Open</ span >
< div style = "width:150px;" >
< div >< b >Interviews</ b ></ div >
< div >CS subjects</ div >
< div >Data Structures</ div >
< div >
< span >Algorithms</ span >
< div style = "width:120px;" >
< div >Bit algorithms</ div >
< div >Searching </ div >
< div >
< span >Sorting</ span >
< div style = "width:80px;" >
< div onclick="javascript:
alert('Linear search')">
Linear search
</ div >
< div >Binary search</ div >
< div >Jump Search</ div >
</ div >
</ div >
< div >Backtracking</ div >
</ div >
</ div >
< div >
< span >Window</ span >
< div style = "width:120px;" >
< div >History</ div >
< div data-options =
Bookmarks
</ div >
< div >
< a href =
GFG
</ a >
</ div >
</ div >
</ div >
</ div >
</ div >
< div data-options = "iconCls:'icon-save'" >
Save
</ div >
<!-- Set disabled to true if not want to enable -->
< div data-options = "iconCls:'icon-print',disabled:true" >
Print
</ div >
< div class = "menu-sep" ></ div >
<!--menu-sep class is used for separator-->
< div >Exit</ div >
</ div >
< script >
$(function () {
$(document).bind('contextmenu', function (e) {
e.preventDefault();
$('#menuID').menu('show', {
left: e.pageX,
top: e.pageY
});
});
});
</ script >
</ body >
</ html >
|
Output: