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 the basic tree-like structure for files or directory in mobiles using jQuery EasyUI framework. In the “ul” tag, the class which is used is easyui-tree to give a tree-like feel for the files.
<!DOCTYPE html> < html >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" initial-scale = 1 .0,
maximum-scale = 1 .0, user-scalable = no ">
< 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" style = "padding:10px" >
< header >
<!--class styles are in mobile.css -->
< div class = "m-toolbar" >
< div class = "m-title" >File structure</ div >
</ div >
</ header >
< ul class = "easyui-tree" data-options = "animate:true" >
< li >
< span >My Documents</ span >
< ul >
< li data-options = "state:'closed'" >
< span >Photos</ span >
< ul >
< li >
< span >Official</ span >
</ li >
< li >
< span >Trips</ span >
</ li >
< li >
< span >FamilynFriends</ span >
</ li >
</ ul >
< span >Files</ span >
< ul >
< li >< span >Personal</ span ></ li >
< li >< span >Official</ span ></ li >
</ ul >
</ li >
< li >
< span >Program Files</ span >
< ul >
< li >PHP</ li >
< li >JavaScript</ li >
< li >MySQL</ li >
< li >Tutorials</ li >
</ ul >
</ li >
< li >home.html</ li >
< li >about.html</ li >
< li >contact.html</ li >
< li >welcome.html</ li >
</ ul >
</ li >
</ ul >
</ div >
</ body >
</ html >
|
Output:
Example 2: The following example demonstrates the “drag and drop” feature of file nodes in the tree using 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 ">
< 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" >
< script type = "text/javascript" src = "jquery.min.js" >
</ script >
< script type = "text/javascript" src = "jquery.easyui.min.js" >
</ script >
< script type = "text/javascript" src = "jquery.easyui.mobile.js" >
</ script >
</ head >
< body >
< h2 >
Drag Drop Tree Nodes using jQuery EasyUI Mobile
</ h2 >
< div class = "easyui-navpanel" style = "padding:10px" >
< header >
<!--styles are in mobile.css -->
< div class = "m-toolbar" >
< div class = "m-title" >Drag/Drop Tree Nodes</ div >
</ div >
</ header >
<!--DragnDrop is enable to "true" in data-options -->
< ul class = "easyui-tree" data-options = "animate:true,dnd:true" >
< li >
< span >My Documents</ span >
< ul >
< li data-options = "state:'closed'" >
< span >Photos</ span >
< ul >
< li >
< span >Official</ span >
</ li >
< li >
< span >Trips</ span >
</ li >
< li >
< span >FamilynFriends</ span >
</ li >
</ ul >
< span >Files</ span >
< ul >
< li >< span >Personal</ span ></ li >
< li >< span >Official</ span ></ li >
</ ul >
</ li >
< li >
< span >Program Files</ span >
< ul >
< li >PHP</ li >
< li >JavaScript</ li >
< li >MySQL</ li >
< li >Tutorials</ li >
</ ul >
</ li >
< li >home.html</ li >
< li >about.html</ li >
< li >contact.html</ li >
< li >welcome.html</ li >
</ ul >
</ li >
</ ul >
</ div >
</ body >
</ html >
|
Output: