JQuery EasyUI 简单的左右布局

点击左边的菜单在右边的tab中打开。其实easyui要实现这种布局很简单，只需要简单的几行代码就ok了。

特意做了一个小小的demo供大家参考，还把怎么实现tab的右键菜单附上。

效果图：

 源码：

js部分：

$( function () {
     // 动态菜单数据
     var treeData = [{
            text : "菜单",
            children : [{
                    text : "一级菜单1",
                    attributes : {
                        url : ""
                    }
                }, {
                    text : "一级菜单2",
                    attributes : {
                        url : ""
                    }
                }, {
                    text : "一级菜单3",
                    state : "closed",
                    children : [{
                            text : "二级菜单1",
                            attributes : {
                                url : ""
                            }
                        }, {
                            text : "二级菜单2",
                            attributes : {
                                url : ""
                            }
                        }, {
                            text : "二级菜单3",
                            attributes : {
                                url : ""
                            }
                        }
                    ]
                }
            ]
        }
    ];
    
     // 实例化树形菜单
    $("#tree").tree({
        data : treeData,
        lines :  true,
        onClick :  function (node) {
             if (node.attributes) {
                Open(node.text, node.attributes.url);
            }
        }
    });
     // 在右边center区域打开菜单，新增tab
     function Open(text, url) {
         if ($("#tabs").tabs('exists', text)) {
            $('#tabs').tabs('select', text);
        }  else {
            $('#tabs').tabs('add', {
                title : text,
                closable :  true,
                content : text
            });
        }
    }
    
     // 绑定tabs的右键菜单
    $("#tabs").tabs({
        onContextMenu :  function (e, title) {
            e.preventDefault();
            $('#tabsMenu').menu('show', {
                left : e.pageX,
                top : e.pageY
            }).data("tabTitle", title);
        }
    });
    
     // 实例化menu的onClick事件
    $("#tabsMenu").menu({
        onClick :  function (item) {
            CloseTab( this, item.name);
        }
    });
    
     // 几个关闭事件的实现
     function CloseTab(menu, type) {
         var curTabTitle = $(menu).data("tabTitle");
         var tabs = $("#tabs");
        
         if (type === "close") {
            tabs.tabs("close", curTabTitle);
             return;
        }
        
         var allTabs = tabs.tabs("tabs");
         var closeTabsTitle = [];
        
        $.each(allTabs,  function () {
             var opt = $( this).panel("options");
             if (opt.closable && opt.title != curTabTitle && type === "Other") {
                closeTabsTitle.push(opt.title);
            }  else  if (opt.closable && type === "All") {
                closeTabsTitle.push(opt.title);
            }
        });
        
         for ( var i = 0; i < closeTabsTitle.length; i++) {
            tabs.tabs("close", closeTabsTitle[i]);
        }
    }

html部分：

<! DOCTYPE html >
< html >
< head >
< meta  charset =utf-8  />
< title >JS Bin </ title >
< script  class ="jsbin"  src ="http://code.jquery.com/jquery-1.7.2.min.js" ></ script >
< link  rel ="stylesheet"  type ="text/css"  href ="http://www.jeasyui.com/easyui/themes/default/easyui.css" >
< script  type ="text/javascript"  src ="http://www.jeasyui.com/easyui/jquery.easyui.min.js" ></ script >
<!-- [if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->
< style >
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section {  display:  block;  }
  .west{
    width: 200px;
    padding: 10px;
  }
  .north{
    height: 100px;
  }
</ style >
</ head >
< body  class ="easyui-layout" >
   < div  region ="north"  class ="north"  title ="____′↘夏悸  http://easyui.btboys.com" >
     < h1 >最简单的左右结构实现，及tab的右键菜单实现，右键查看源码 </ h1 >
   </ div >
   < div  region ="center"  title ="center" >
     < div  class ="easyui-tabs"  fit ="true"  border ="false"  id ="tabs" >
       < div  title ="首页" ></ div >
     </ div >
   </ div >
   < div  region ="west"  class ="west"  title ="menu" >
     < ul  id ="tree" ></ ul >
   </ div >
  
   < div  id ="tabsMenu"  class ="easyui-menu"  style ="width:120px;" >  
     < div  name ="close" >关闭 </ div >  
     < div  name ="Other" >关闭其他 </ div >  
     < div  name ="All" >关闭所有 </ div >
   </ div >  
</ body >

</html>