EasyUI 簡(jiǎn)介
easyui是一種基于jQuery的用戶(hù)界面插件集合。
easyui為創(chuàng)建現(xiàn)代化，互動(dòng)，JavaScript應(yīng)用程序，提供必要的功能。
使用easyui你不需要寫(xiě)很多代碼，你只需要通過(guò)編寫(xiě)一些簡(jiǎn)單HTML標(biāo)記，就可以定義用戶(hù)界面。
easyui是個(gè)完美支持HTML5網(wǎng)頁(yè)的完整框架。
easyui節(jié)省您網(wǎng)頁(yè)開(kāi)發(fā)的時(shí)間和規(guī)模。
easyui很簡(jiǎn)單但功能強(qiáng)大的。
在后臺(tái)管理系統(tǒng)開(kāi)發(fā)的過(guò)程中，上左右的布局是最常見(jiàn)的頁(yè)面布局方式，現(xiàn)在我們來(lái)看看使用easyui這個(gè)jquery前端框架如何快速搭建一個(gè)可用的頁(yè)面框架。
1.在頁(yè)面中引入easyui所需的文件
<%-- 加載easyui的樣式文件，bootstrap風(fēng)格 --%><link href="${ctx }/css/themes/bootstrap/easyui.css" rel="stylesheet"><link href="${ctx }/css/themes/icon.css" rel="stylesheet"><%-- 加載jquery和easyui的腳本文件 --%><script src="${ctx }/js/jquery-easyui-../jquery.min.js"></script><script src="${ctx }/js/jquery-easyui-../jquery.easyui.min.js"></script><script src="${ctx }/js/jquery-easyui-../locale/easyui-lang-zh_CN.js"></script> 2.在頁(yè)面body部分構(gòu)建必要的html結(jié)構(gòu)
<body><div id="home-layout"><!-- 頁(yè)面北部，頁(yè)面標(biāo)題 --><div data-options="region:'north'" style="height:50px;"><!-- add your code --></div><!-- 頁(yè)面西部，菜單 --><div data-options="region:'west',title:'菜單欄'" style="width:200px;"><div class="home-west"><ul id="home-west-tree"></ul></div></div><!-- 頁(yè)面中部，主要內(nèi)容 --><div data-options="region:'center'"><div id="home-tabs"><div title="首頁(yè)"><h2 style="text-align: center">歡迎登錄</h2></div></div></div></div></body>
這里需要注意一點(diǎn)：easyui在使用layout布局的時(shí)候，north、south需要指定高度，west、east需要指定寬度，而center會(huì)自動(dòng)適應(yīng)高和寬。
3.使用js初始化easyui組件
我個(gè)人比較推薦使用js代碼去初始化easyui組件，而不使用easyui標(biāo)簽中的data-options屬性去初始化。因?yàn)閷?duì)于后臺(tái)開(kāi)發(fā)人員來(lái)說(shuō)，寫(xiě)js代碼可能比寫(xiě)html標(biāo)簽更加熟悉，而且這樣使得html代碼更加簡(jiǎn)潔。
<script>$(function(){/** 初始化layout*/$("#home-layout").layout({//使layout自適應(yīng)容器fit: true});/** 獲取左側(cè)菜單樹(shù)，并為其節(jié)點(diǎn)指定單擊事件*/$("#home-west-tree").tree({ //加載菜單的數(shù)據(jù)，必需url: "${ctx }/pages/home-west-tree.json",method: "get", //是否有層次線lines: true, //菜單打開(kāi)與關(guān)閉是否有動(dòng)畫(huà)效果animate: true, //菜單點(diǎn)擊事件onClick: function(node){if(node.attributes && node.attributes.url){ //打開(kāi)內(nèi)容區(qū)的tab，代碼在其后addTab({url: "${ctx }/" + node.attributes.url,title: node.text});}}}); /** 初始化內(nèi)容區(qū)的tabs*/$("#home-tabs").tabs({fit : true, //tab頁(yè)是否有邊框border : false});})</script><script>/** 在內(nèi)容區(qū)添加一個(gè)tab*/function addTab(params){var t = $("#home-tabs");var url = params.url;var opts = {title: params.title,closable: true,href: url,fit: true,border: false};//如果被選中的節(jié)點(diǎn)對(duì)應(yīng)的tab已經(jīng)存在，則選中該tab并刷新內(nèi)容//否則打開(kāi)一個(gè)新的tabif(t.tabs("exists", opts.title)){var tab = t.tabs("select", opts.title).tabs("getSelected");t.tabs("update", {tab: tab,options: opts});}else{t.tabs("add", opts);}}</script> 4.easyui-tree組件所需的json格式
easyui使用的傳輸格式為json，它對(duì)json內(nèi)容的格式有比較嚴(yán)格的限制，所以請(qǐng)注意查看api
[{"text":"區(qū)域管理","attributes":{"url":"pages/consume/area/areaList.jsp"}},{"text":"預(yù)約信息管理","children":[{"text":"商戶(hù)預(yù)約信息查詢(xún)","attributes":{"url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"}}]},{"text":"準(zhǔn)入申請(qǐng)管理","children":[{"text":"商戶(hù)準(zhǔn)入申請(qǐng)","state":"closed","children":[{"text":"商戶(hù)待處理申請(qǐng)","attributes":{"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_wait"}},{"text":"商戶(hù)審批中申請(qǐng)","attributes":{"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_current"}},{"text":"商戶(hù)審批通過(guò)申請(qǐng)","attributes":{"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_pass"}},{"text":"商戶(hù)被拒絕申請(qǐng)","attributes":{"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_refuse"}}]}]},{"text":"準(zhǔn)入審批管理","children":[{"text":"商戶(hù)審批管理","state":"closed","children":[{"text":"當(dāng)前任務(wù)","children":[{"text":"商戶(hù)當(dāng)前初審任務(wù)","attributes":{"url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"}},{"text":"商戶(hù)當(dāng)前復(fù)審任務(wù)","attributes":{"url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"}}]},{"text":"商戶(hù)已完成任務(wù)","attributes":{"url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"}},{"text":"商戶(hù)不通過(guò)任務(wù)","attributes":{"url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"}}]}]}]就這樣，我們使用easyui完成了簡(jiǎn)單的左右布局。
以上所述是小編給大家分享的jQuery Easyui實(shí)現(xiàn)上左右布局的相關(guān)內(nèi)容，希望對(duì)大家有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
