【EasyUI學習-3】Easyui tabs入門實踐

作者：ssslinppp       

---

1. 摘要

---

一般我們在設計程序主框架的時候，當點擊（子）菜單時，希望相應界面都在tabs頁中顯示；

在顯示的時候，如果之前打開過該界面，則希望重新選中對應的tab頁，並刷新；

如果之前沒有打開對應的tab頁，則創建一個新的tab頁；

如下圖所示：

2. jsp界面

---

   
   
   
           

    
    
    
            
<!-- 主操作區 -->
    
    
    
            
 <div region="center" style="background:#eee; overflow-y:hidden" >
    
    
    
            
 <div id="centerTabs" class="easyui-tabs" fit="true" border="false" >
    
    
    
            
 </div> 
    
    
    
            
 </div>
    
    
    
            
 
    
    
    
            
 <!--===================================其他信息===================================-->
    
    
    
            
 <!--tabs頁右鍵選項 -->
    
    
    
            
 <div id="mm" class="easyui-menu" style="width:150px;z-index:90000000">
    
    
    
            
 <div id="mm-tabupdate">刷新</div>
    
    
    
            
 <div class="menu-sep"></div>
    
    
    
            
 <div id="mm-tabclose">關閉</div>
    
    
    
            
 <div id="mm-tabcloseall">全部關閉</div>
    
    
    
            
 <div id="mm-tabcloseother">除此之外全部關閉</div>
    
    
    
            
 <div class="menu-sep"></div>
    
    
    
            
 <div id="mm-tabcloseright">當前頁右側全部關閉</div>
    
    
    
            
 <div id="mm-tabcloseleft">當前頁左側全部關閉</div>
    
    
    
            
 </div>
   
   
   
           

3. 二級菜單

---

二級菜單：

   
   
   
           

    
    
    
            
var actionUrl = basePath + "getMainMenu.action";
    
    
    
            
 var params = {
    
    
    
            
 };
    
    
    
            
 //菜單請求
    
    
    
            
 $.ajax({
    
    
    
            
 type : "POST",
    
    
    
            
 url : actionUrl,
    
    
    
            
 data : params,
    
    
    
            
 dataType : "json",
    
    
    
            
 async : false,
    
    
    
            
 cache : false,
    
    
    
            
 error : function(textStatus, errorThrown) {
    
    
    
            
 $.messager.alert('錯誤', "系統菜單加載失敗: " + textStatus, 'error');
    
    
    
            
 },
    
    
    
            
 success : function(data, textStatus) {
    
    
    
            
 var menuList1 = "";
    
    
    
            
 $.each(data.menuList, function(i, o) {
    
    
    
            
 if(o.select){
    
    
    
            
 var mid = "#m"+i;//一級菜單mid
    
    
    
            
 var mmmid = "m"+i;
    
    
    
            
 
    
    
    
            
  menuList1 += '<a href="javascript:void(0)" class="easyui-menubutton" menu="'+mid+'" iconCls="'+o.iconName+'" style="width:130px;">'+o.menuName+'</a>';
    
    
    
            
 menuList1 += '<div id="'+mmmid+'" style="width:130px;">';
    
    
    
            
 
    
    
    
            
 $.each(o.childMenus, function(j, p) {
    
    
    
            
 if(p.select){
    
    
    
            
 var secondMenuId = ""+i+j;
    
    
    
            
 menuList1 += '<div id="'+secondMenuId+'" iconCls="'+p.iconName+'" url="'+p.urlPath+'" class="secondMenu">'+p.menuName+'</div>';
    
    
    
            
 }
    
    
    
            
 });
    
    
    
            
 menuList1 += '</div>'
    
    
    
            
 }
    
    
    
            
 })
    
    
    
            
  $(".menu1").append(menuList1);
    
    
    
            
 }
    
    
    
            
 });
   
   
   
           

2級菜單是通過拼接HTML語言完成的，拼接后的代碼形如：

   
   
   
           

    
    
    
            
<a href="javascript:void(0)" class="easyui-menubutton" menu="#m0" iconCls="icon-ok" style="width:130px;">一級菜單1</a>
    
    
    
            
<div id="m0" style="width:130px;">
    
    
    
            
</div>
    
    
    
            

    
    
    
            
<a href="javascript:void(0)" class="easyui-menubutton" menu="#m1" iconCls="icon-ok" style="width:130px;">一級菜單2</a>
    
    
    
            
<div id="m1" style="width:130px;">
    
    
    
            
 <div id="10" iconCls="icon-ok" url="null" class="secondMenu">二級菜單21</div>
    
    
    
            
 <div id="11" iconCls="icon-ok" url="null" class="secondMenu">二級菜單22</div>
    
    
    
            
 <div id="12" iconCls="icon-ok" url="null" class="secondMenu">二級菜單23</div>
    
    
    
            
 <div id="13" iconCls="icon-ok" url="null" class="secondMenu">二級菜單24</div>
    
    
    
            
 </div>
   
   
   
           

4. tabs

---

   
   
   
           

    
    
    
            
/*選擇2級菜單功能項后在center區域 添加tabs*/
    
    
    
            
 $(".secondMenu").click(function(){
    
    
    
            
 var name = $(this).text();
    
    
    
            
 if($("#centerTabs").tabs('exists', name)){ //選中並更新
    
    
    
            
 $('#centerTabs').tabs('select', name);
    
    
    
            
 $('#mm-tabupdate').click();
    
    
    
            
 }
    
    
    
            
 else{
    
    
    
            
 var url = basePath+$(this).attr("url"); //要加載界面的URL--action請求
    
    
    
            
 var icons = $(this).attr("iconCls");
    
    
    
            
 $('#centerTabs').tabs('add',{
    
    
    
            
 title:name,
    
    
    
            
 url: url,
    
    
    
            
 icon:icons,
    
    
    
            
  content:'<iframe scrolling="auto" frameborder="0" id="'+name+'" name="'+name+'" src="'+url+'" style="width:100%;height:100%"></iframe>', 
    
    
    
            
 closable:true});
    
    
    
            
 };
    
    
    
            
 }); 
   
   
   
           

   
   
   
           

    
    
    
            
//綁定右鍵菜單事件
    
    
    
            
function tabCloseEven(){
    
    
    
            
 //刷新
    
    
    
            
 $('#mm-tabupdate').click(function(){
    
    
    
            
 var currTab = $('#centerTabs').tabs('getSelected');
    
    
    
            
 var content = $(currTab.panel('options').content);
    
    
    
            
 $('#centerTabs').tabs('update',{
    
    
    
            
 tab:currTab,
    
    
    
            
 options:{
    
    
    
            
 content:content
    
    
    
            
 }
    
    
    
            
 })
    
    
    
            
 });
    
    
    
            
};
   
   
   
           

---

運行：  http://localhost:8080/MainFrameTest/index.action 

---

代做畢設：

淘寶鏈接：  http://shop110473970.taobao.com/shop/view_shop.htm?spm=a1z0e.1.10010.3.2j85Z2 

來自為知筆記(Wiz)

附件列表