easyui最简单的左右布局实现，及tab的右键菜单实现
发现最近有些人问用JQuery easyui要怎么实现左右结构的布局。就是点击左边的菜单在右边的tab中打开。其实easyui要实现这种布局很简单，只需要简单的几行代码就ok了。
特意做了一个小小的demo供大家参考，还把怎么实现tab的右键菜单附上。
效果图：
在线预览地址.....
要看怎么实现的 只需要右键查看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> |
