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