easyui最简单的左右布局实现，及tab的右键菜单实现

发现最近有些人问用JQuery easyui要怎么实现左右结构的布局。就是点击左边的菜单在右边的tab中打开。其实easyui要实现这种布局很简单，只需要简单的几行代码就ok了。

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

效果图：

点击查看原图

在线预览地址.....

http://jsbin.com/egaqub/7

要看怎么实现的 只需要右键查看html源码就行

 

源码：
js部分：

001 $(function () {
002     //动态菜单数据
003     var treeData = [{
004             text : "菜单",
005             children : [{
006                     text : "一级菜单1",
007                     attributes : {
008                         url : ""
009                     }
010                 }, {
011                     text : "一级菜单2",
012                     attributes : {
013                         url : ""
014                     }
015                 }, {
016                     text : "一级菜单3",
017                     state : "closed",
018                     children : [{
019                             text : "二级菜单1",
020                             attributes : {
021                                 url : ""
022                             }
023                         }, {
024                             text : "二级菜单2",
025                             attributes : {
026                                 url : ""
027                             }
028                         }, {
029                             text : "二级菜单3",
030                             attributes : {
031                                 url : ""
032                             }
033                         }
034                     ]
035                 }
036             ]
037         }
038     ];
039      
040     //实例化树形菜单
041     $("#tree").tree({
042         data : treeData,
043         lines : true,
044         onClick : function (node) {
045             if (node.attributes) {
046                 Open(node.text, node.attributes.url);
047             }
048         }
049     });
050     //在右边center区域打开菜单，新增tab
051     function Open(text, url) {
052         if ($("#tabs").tabs('exists', text)) {
053             $('#tabs').tabs('select', text);
054         } else {
055             $('#tabs').tabs('add', {
056                 title : text,
057                 closable : true,
058                 content : text
059             });
060         }
061     }
062      
063     //绑定tabs的右键菜单
064     $("#tabs").tabs({
065         onContextMenu : function (e, title) {
066             e.preventDefault();
067             $('#tabsMenu').menu('show', {
068                 left : e.pageX,
069                 top : e.pageY
070             }).data("tabTitle", title);
071         }
072     });
073      
074     //实例化menu的onClick事件
075     $("#tabsMenu").menu({
076         onClick : function (item) {
077             CloseTab(this, item.name);
078         }
079     });
080      
081     //几个关闭事件的实现
082     function CloseTab(menu, type) {
083         var curTabTitle = $(menu).data("tabTitle");
084         var tabs = $("#tabs");
085          
086         if (type === "close") {
087             tabs.tabs("close", curTabTitle);
088             return;
089         }
090          
091         var allTabs = tabs.tabs("tabs");
092         var closeTabsTitle = [];
093          
094         $.each(allTabs, function () {
095             var opt = $(this).panel("options");
096             if (opt.closable && opt.title != curTabTitle && type === "Other") {
097                 closeTabsTitle.push(opt.title);
098             } else if (opt.closable && type === "All") {
099                 closeTabsTitle.push(opt.title);
100             }
101         });
102          
103         for (var i = 0; i < closeTabsTitle.length; i++) {
104             tabs.tabs("close", closeTabsTitle[i]);
105         }
106     }
107 });

 

html部分：

01 <!DOCTYPE html>
02 <html>
03 <head>
04 <meta charset=utf-8 />
05 <title>JS Bin</title>
06 <script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
07 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
08 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
09 <!--[if IE]>
10   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11 <![endif]-->
12 <style>
13   article, aside, figure, footer, header, hgroup,
14   menu, nav, section { display: block; }
15   .west{
16     width:200px;
17     padding:10px;
18   }
19   .north{
20     height:100px;
21   }
22 </style>
23 </head>
24 <body class="easyui-layout">
25   <div region="north" class="north" title="____′↘夏悸  http://easyui.btboys.com">
26     <h1>最简单的左右结构实现，及tab的右键菜单实现，右键查看源码</h1>
27   </div>
28   <div region="center" title="center">
29     <div class="easyui-tabs" fit="true" border="false" id="tabs">
30       <div title="首页"></div>
31     </div>
32   </div>
33   <div region="west" class="west" title="menu">
34     <ul id="tree"></ul>
35   </div>
36    
37   <div id="tabsMenu" class="easyui-menu" style="width:120px;"> 
38     <div name="close">关闭</div> 
39     <div name="Other">关闭其他</div> 
40     <div name="All">关闭所有</div>
41   </div> 
42 </body>
43 </html>

 

posted @ 2014-02-27 15:28  KainJC  阅读(733)  评论(0)    收藏  举报