In the background management system development process, the left and right layout is the most common page layout method, now we look at how to use Easyui this jquery front-end framework how to quickly build a usable page framework.
1. Introduce the files required for Easyui in the page
1 <%--load Easyui style files, bootstrap style--%>2 <Linkhref= "${ctx}/css/themes/bootstrap/easyui.css"rel= "stylesheet">3 <Linkhref= "${ctx}/css/themes/icon.css"rel= "stylesheet">4 <%--loading jquery and Easyui script files--%>5 <Scriptsrc= "${ctx}/js/jquery-easyui-1.4.4/jquery.min.js"></Script>6 <Scriptsrc= "${ctx}/js/jquery-easyui-1.4.4/jquery.easyui.min.js"></Script>7 <Scriptsrc= "${ctx}/js/jquery-easyui-1.4.4/locale/easyui-lang-zh_cn.js"></Script>
2. Build the necessary HTML structure in the Body section of the page
<Body><DivID= "Home-layout"> <!--page North, page title - <Divdata-options= "region: ' North '"style= "height:50px;"> <!--Add your code - </Div> <!--page West, menu - <Divdata-options= "region: ' West ', Title: ' Menu bar '"style= "width:200px;"> <Divclass= "Home-west"> <ulID= "Home-west-tree"></ul> </Div> </Div> <!--middle of page, main content - <Divdata-options= "Region: ' Center '"> <DivID= "Home-tabs"> <Divtitle= "Home"> <H2style= "Text-align:center">Welcome to Login</H2> </Div> </Div> </Div></Div></Body>
One thing to note here: Easyui when using layout layouts, North and south need to specify a height, west and east need to specify a width, and center automatically adapts to height and width.
3. Initializing the Easyui component with JS
I personally recommend using the JS code to initialize the Easyui component without using the Data-options attribute in the Easyui tag to initialize. Because for background developers, writing JS code may be more familiar than writing HTML tags, and this makes the HTML code more concise.
<script>$(function(){ /** Initialize Layout*/ $("#home-layout"). Layout ({//Make layout adaptive containerFittrue }); /** Gets the left menu tree and specifies the click event for its node*/ $("#home-west-tree"). Tree ({//load the data for the menu, requiredURL: "${ctx}/pages/home-west-tree.json", Method:"Get",//whether there is a hierarchy lineLinestrue,//whether the menu is turned on or off has an animated effectAnimatetrue,//Menu click eventsOnClick:function(node) {if(Node.attributes &&Node.attributes.url) {//Open the tab of the content area, followed by the codeaddTab ({URL:"${ctx}/" +Node.attributes.url, title:node.text}); } } }); /** Initialize the tabs of the content area*/ $("#home-tabs"). Tabs ({fit:true,//Whether the tab page has a borderborder:false});
})</script><script>/** Add a tab to the content area*/functionAddTab (params) {varT = $ ("#home-tabs"); varURL =Params.url; varopts ={title:params.title, closable:true, Href:url, fit:true, border:false }; //If the tab for the selected node already exists, select the tab and refresh the content //Otherwise, open a new tab if(T.tabs ("exists", Opts.title)) { vartab = T.tabs ("select", Opts.title). Tabs ("getselected"); T.tabs ("Update", {tab:tab, options:opts}); }Else{t.tabs ("Add", opts); }}</script>
JSON format required for 4.easyui-tree components
The transport format used by Easyui is JSON, which has strict restrictions on the format of JSON content, so be aware of the API
[{ "Text": "Zone Management", "Attributes":{ "url": "Pages/consume/area/arealist.jsp" }},{ "Text": "Appointment information management", "Children":[{ "Text": "Merchant Reservation Information Enquiry", "Attributes":{ "url": "/pages/consume/reservation/merchantreservation/merchantreservationlist.jsp" } }]},{ "Text": "Admission Application Management", "Children":[{ "Text": "Merchant Access Application", "State": "Closed", "Children":[{ "Text": "Merchant Pending Request", "Attributes":{ "url": "Wateraply.do?method=tolist&channeltype=1&handleflag=aply_wait" } },{ "Text": "Application in Merchant Approval", "Attributes":{ "url": "Wateraply.do?method=tolist&channeltype=1&handleflag=aply_current" } },{ "Text": "Merchant approval by Application", "Attributes":{ "url": "Wateraply.do?method=tolist&channeltype=1&handleflag=aply_pass" } },{ "Text": "Merchant is denied application", "Attributes":{ "url": "Wateraply.do?method=tolist&channeltype=1&handleflag=aply_refuse" } }] }]},{ "Text": "Access approval management", "Children":[{ "Text": "Merchant Approval Management", "State": "Closed", "Children":[{ "Text": "Current Task", "Children":[{ "Text": "Merchant's current preliminary examination task", "Attributes":{ "url": "Pages/consume/approval/merchantapproval/merchantapprovaltrial.jsp" } },{ "Text": "Merchant Current Review Task", "Attributes":{ "url": "Pages/consume/approval/merchantapproval/merchantapprovalretrial.jsp" } }] },{ "Text": "The merchant has completed the task", "Attributes":{ "url": "Pages/consume/approval/merchantapproval/merchantapprovaldone.jsp" } },{ "Text": "Merchant does not pass the task", "Attributes":{ "url": "Pages/consume/approval/merchantapproval/merchantapprovalrefuse.jsp" } }] }]}]
In this way, we use Easyui to complete a simple on-left layout.
Use Easyui to make up and left layouts
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
