一、设置超链接
选项卡页面是点击某个超链接后触发的，这里以树形菜单为例，点击任何一个菜单，将会产生一个新的选项卡页面。
树形菜单参考http://www.cnblogs.com/ywlaker/p/6042244.html
树形菜单需要配置一个点击事件
$(‘<div></div>‘).tree({
data : data[i].children,
onClick : function(node) {
tab(node);
}
}).appendTo("#" + data[i].id);
二、选项卡页面
完整代码
<html>
<head>
<title>easyui</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="easyui/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
<script type="text/javascript">
var data = [
{
"id" : 1,
"text" : "menu demo 1",
"children" : [
{
"id" : 11,
"text" : "menu demo 1 1",
"url" : "/menu/demo/1/1"
},
{
"id" : 12,
"text" : "menu demo 1 2",
"url" : "/menu/demo/1/2"
}
]
},
{
"id" : 2,
"text" : "menu demo 2",
"children" : [
{
"id" : 21,
"text" : "menu demo 2 1",
"url" : "/menu/demo/2/1",
"children" : [
{
"id" : 211,
"text" : "menu demo 2 1 1",
"url" : "/menu/demo/2/1/1"
}
]
}
]
}
];
function show () {
for (var i = 0; i < data.length; i ++) {
//添加分类
$("#menu").accordion(‘add‘, {
id : data[i].id,
title : data[i].text,
selected : false
});
//在分类中添加目录
$(‘<div></div>‘).tree({
data : data[i].children,
onClick : function(node) {
tab(node);
}
}).appendTo("#" + data[i].id);
}
}
function tab(node) {
var tabs = $(‘#tabs‘);
//如果选项卡已经打开
if (tabs.tabs(‘exists‘, node.text)) {
tabs.tabs(‘select‘, node.text);
return;
}
//如果节点的url为空，不打开新选项卡
if (node.url == null || node.url == ‘‘) return;
//添加新选项卡
tabs.tabs(‘add‘, {
id : node.id,
title : node.text,
href : node.url,
closable : true
});
}
</script>
</head>
<body class="easyui-layout" onload="show();">
<div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
<div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
<div data-options="region:‘east‘,title:‘East‘,split:true" style="width:100px;"></div>
<div data-options="region:‘west‘,title:‘West‘,split:true" style="width:200px;">
<div id="menu" data-options="fit:true,border:false" class="easyui-accordion"></div>
</div>
<div data-options="region:‘center‘,title:‘center title‘">
<div id="tabs" data-options="fit:true,border:false" class="easyui-tabs">
<div title="welcome">welcome</div>
</div>
</div>
</div>
</body>
</html>
点击菜单，加载的选项卡页面如下图
三、iframe形式的选项卡页面
上面的选项卡内容是作为easyui.html整个页面的一部分而存在，如果太多，重名的问题解决起来就麻烦，iframe则将每个页面独立开，不会有重名问题。只需要修改以下代码，将“href”属性替换为“content”属性。
//添加新选项卡
tabs.tabs(‘add‘, {
id : node.id,
title : node.text,
content : ‘<iframe src="in.html"></iframe>‘,
closable : true
});
in.html文件与easyui.html在一个目录，里面只有一句话“iframe page”。
运行效果如下
时间： 2024-11-05 19:43:40