標籤：layout easyui
一般對於後台介面都是採用BorderLayout進行布局的。BorderLayout也就是將介面分成五塊，如所示，分別有：North、East、South、West、Center
其中比較特殊的是Center這塊地區，它是不固定的，會隨著四塊地區的變化而做出相應的調整。比如將West向左縮小10px，那麼Center則會向West方向擴張10px。其實這個easyUI已經幫我們實現好了，我們只需要使用它的layout就可以完成。
<body class="easyui-layout"> <div data-options="region:‘north‘" style="height:70px; text-align: center"> <h1>EasySpring後台管理</h1> </div> <div data-options="region:‘south‘,split:true" style="height:50px;"></div> <div data-options="region:‘west‘,split:true,title:‘功能表列‘,iconCls:‘icon-ok‘" style="width:250px;"> <div class="easyui-accordion" data-options="fit:true,border:false"> <!-- 這裡由於只有一個，所以不設定title--> <div data-options="fit:true,collapsible:false" style="padding:10px;"><!-- 每一個div都是accordion中依賴的panel --> <ul class="westBar" id="admin"> <li id="adminUser"><span class="icon-search" style="height:16px;width:16px;display:inline-block"></span>使用者管理</li> <li id="adminRole"><span class="icon-search" style="height:16px;width:16px;display:inline-block"></span>角色管理</li> <li id="adminPermission"><span class="icon-search" style="height:16px;width:16px;display:inline-block"></span>許可權管理</li> </ul> </div> </div> </div> <div data-options="region:‘center‘,iconCls:‘icon-ok‘"> <div id="admin_tabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true"> </div> </div></body>這裡我們將easyui-layout這個class設到<body>標籤上，那麼就表示對整個頁面執行layout。當然也可以對局部的div執行layout。另外這裡對於左邊的功能表列運用了accordion組件，accordion中的子級div就代表了每一個滑塊，這裡我們只用到一個滑塊，所以將collapsible設定為false。那麼下面就要構建功能表列中的菜單了，我們用ul+li來進行布局。ok，布局完成，效果應該如下所示（1024 * 768）：
下面要處理的就是點擊菜單後，在center中添加或選中響應的tab了。為了達到便於擴充的目的，我們應該設計一套統一的邏輯：比如這裡的accordion下的每個panel都作為一個模組，然後該panel下面的菜單都歸屬於這個上級panel，那麼在url的設定時就有一個關聯了，比如模組為admin，菜單為adminUser，那麼請求url就是.../admin/adminUser，具體可以看下面的代碼：
$(function(){ $("ul.westBar li").on("click", function(){ // 添加選中樣式 $("ul.westBar li").removeClass(‘active‘); $(this).addClass(‘active‘); var id = $(this).attr(‘id‘); if($(this).hasClass(‘zdialog‘)){ // 這裡可以擴充對話方塊菜單 $(‘#‘ + id + ‘-dialog‘).dialog(‘open‘); return; } var id = $(this).attr(‘id‘); var title = $(this).text(); var iconCls = $(this).find("span").attr(‘class‘); var parent = $(this).parent().attr(‘id‘); addTabs(id, title, iconCls, parent); })});function addTabs(id, title, iconCls, parent){ if($(‘#admin_tabs‘).tabs(‘exists‘,title)){ // 處理已開啟過的tab $(‘#admin_tabs‘).tabs(‘select‘,title); return; } if(!iconCls){ iconCls = ‘icon-ok‘; } $(‘#admin_tabs‘).tabs(‘add‘,{ title: title, href: contextPath + ‘/‘ + parent + ‘/‘ + id, // 這裡用parent + id來定義url iconCls: iconCls, closable: true, onLoadError:function(data){ // 這裡對於非200狀態代碼的都會載入不出來介面，而需要在這裏手動處理 var tab = $(‘#admin_tabs‘).tabs(‘getSelected‘); var body = tab.panel(‘body‘); if(data.status == 401){ body.html(data.responseText) }else{ body.html(‘<h1>載入出錯</h1>‘); } } });}easyui中layout、accordion加tabs實現簡單菜單布局執行個體
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
