easyui树形菜单，自动化添加tab
效果如图
1.先来一段js代码
<script type="text/javascript">
$(function () {
//动态菜单数据
//创建三个一级菜单，每个一级菜单下有2个二级菜单
var treeData =[{
id:1,
text:"一级菜单1",
state:"closed",
children:[{
id:11,
text:"二级菜单11",
attributes:{
url:"Demo.html"
}
},{
id:12,
text:"二级菜单12",
attributes:{
url:""
}
}]
},{
id:2,
text:"一级菜单2",
state:"closed",
children:[{
id:21,
text:"二级菜单21",
attributes:{
url:""
}
},{
id:22,
text:"二级菜单21",
attributes:{
url:""
}
}]
},{
id:3,
text:"一级菜单3",
state:"closed",
children:[{
id:31,
text:"二级菜单31",
attributes:{
url:""
}
},{
id:32,
text:"二级菜单32",
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) {
var content = '';
if ($("#tabs").tabs('exists', text)) {
$('#tabs').tabs('select', text);
} else {
$('#tabs').tabs('add', {
title : text,
closable : true,
content : content
});
}
}
//绑定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]);
}
}
});
script>2.再来一段html
<body class="easyui-layout">
<div data-options="region:'north',title:'Logo+名称',split:false,collapsible:false" style="height:70px;background:#E8F1FF ">div>
<div data-options="region:'south',title:'foot',split:true,collapsible:false" style="height:100px;">div>
<div data-options="region:'east',title:'东部区域',split:true" style="width:300px;">
<div class="easyui-calendar" style="width: 300px;height: 250px;">div>
<hr>
div>
<div data-options="region:'west',title:'收起菜单',split:true" style="width:300px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="树菜单" style="padding: 10px;">
<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>
<div title="菜单二" style="padding: 10px;">内容二div>
<div title="菜单三" style="padding: 10px;">内容三div>
div>
div>
<div data-options="region:'center',title:'内容区域'" style="padding:5px;">
<div class="easyui-tabs" fit="true" border="false" id="tabs">
<div title="首页">div>
div>
div>
body>