jquery Learning---Easy UI framework

1.1. directory Analysis of Easyui

Learn with the jquery Easy UI 1.3.2 version

Demo instance

Locale Internationalization Information

Plugins Framework Some plugins

SRC source

Themes Style Files

Easyloader.js Framework Core Loader (load other plugin)

Jquery-1.8.0.min.js jquery class Library

Jquery.easyui.min.js Framework class Library (equivalent to Easyloader.js + plugins all plugins)

1.2. introducing Easyui in the project

Must introduce

<!--first introduced jquery js--><script type= "Text/javascript" src= "${pagecontext.request.contextpath}/js/ Jquery-1.8.3.js "></script><!--introduced Easyui js--><script type=" Text/javascript "src=" ${ PageContext.request.contextPath}/js/easyui/jquery.easyui.min.js "></script><!--introduction of International JS-->< Script type= "Text/javascript" src= "${pagecontext.request.contextpath}/js/easyui/locale/easyui-lang-zh_cn.js" > </script><!--introduce default style CSS--><link rel= "stylesheet" type= "Text/css" href= "${ PageContext.request.contextPath}/js/easyui/themes/default/easyui.css "/><!--introduced icon CSS  -->< Link rel= "stylesheet" type= "Text/css" href= "${pagecontext.request.contextpath}/js/easyui/themes/icon.css"/>

　　

1.3. the layout control for Easyui uses

Layout controls are used for a div or for the entire page BODY element

1.4. Easyui's accordion folding panel uses

Set the Fit property so that the panel fills the parent container

<!--collapse panel  --><!--Fit property to fill the current div size with the parent container  --><div class= "easyui-accordion" data-options= "fit: True "><!--through Iconcls settings icon, find Icon.css in class definition--><div data-options=" title: ' Basic function ', Iconcls: ' Icon-mini-add ' " > Panel One </div> <!--here each div is a panel--><div data-options= "title: ' Advanced Features '" > Panel two </div><div data-options= "title: ' Administrator function '" > Panel three </div></div>

　　

1.5. The Easyui Tabs tab panel uses

<div data-options= "region: ' Center '" ><!--tab Panel--><div class= "Easyui-tabs" data-options= "Fit:true" ><div data-options= "title: Tab One '" > Content one </div> <!--here each div is a tab--><!--closeable can be turned off-- <div data-options= "title: Tab two ', closable:true" > Content two </div><div data-options= "title: ' tab three '" > content three </div></div></div>

　　

1.6. Making of a tree-shaped menu

Make a tree menu using the Ztree plugin

Ztree is a versatile "tree plugin" that relies on jQuery. The combination of excellent performance, flexible configuration and multiple functions is the biggest advantage of Ztree .

Download Ztree 3.5.02 Version

API documentation

CSS Styles

Demo case

JS Core Class Library file

All.js = core + check + Edit + hide only need to introduce all.js in development

Introducing Ztree on the page

<!--introduced ztree  --><script type= "Text/javascript" src= "${pagecontext.request.contextpath}/js/ztree/ Jquery.ztree.all-3.5.js "></script><link rel=" stylesheet "type=" Text/css "href=" ${ PageContext.request.contextPath}/js/ztree/ztreestyle.css "/>

Case one: Standard data tree

1. Write <ul> label in display tree position

<!--display tree--><ul id= "Basictree" class= "Ztree" ></ul>

2. Write setting object by JS

Set tree parameter var setting = {};

3. Setting tree node data

Data var znodes = [{"Name": "Menu One"},//each {} is a node {"name": "Menu Two"}];

4. Initialize the tree

Initialize Tree $.fn.ztree.init ($ ("#basicTree"), setting, znodes);

Complex tree

Problem: Standard data tree, no tree structure for big data

Case two: simple data ztree

1, in the display ztree location definition ul

<!--display tree (simple data)--><ul id= "Simpletree" class= "Ztree" ></ul>

2. Set Ztree parameter setting

Set tree parameter var setting = {data: {simpledata: {enable:true}}};

3. Tree node data

Data

var znodes = [//ID represents this node number, PID represents the parent node number {"id": "1", "pid": "0", "Name": "Menu One"},{"id": "2", "pid": "0", "Name": "Menu II"}];

4. Initialize the tree

Initialize Tree

$.fn.ztree.init ($ ("#simpleTree"), setting, znodes);

Complex tree

Completion of tree node jump via URL property

Customize the node icon with the Icon property

jquery Learning---Easy UI framework