How to design tree structure for files 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. 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.
HTML
<!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.
HTML
<!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: