JQuery EasyUI Tree和tab右键菜单实现
$(
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,
// 动态菜单数据
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,
onContextMenu: function (e, title) { e.preventDefault(); $("#tabsMenu").menu('show', { left: e.pageX, top: e.pageY }).data("tabTitle", title.text); }
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部分：
< 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>