前台代码:
<div data-options="region:'west',title:'我的工作平台',split:true,iconCls:'icon-desk'" style="width: 200px;">
<div id="aa" class="easyui-accordion" style="width: 300px; height: 200px;" data-options="fit:true">
<div title="xx" data-options="iconCls:'icon-save',selected:true" style="overflow: auto; padding: 10px;">
<ul id="tab1" class="easyui-tree">
<li id="Purchase.html">
<span>xxxx</span>
</li>
<li id="">
<span>xxxx</span>
</li>
<li id="">
<span>xxxx</span>
</li>
</ul>
</div>
<div title="xx" data-options="iconCls:'icon-inStorage'" style="padding: 10px;">
<ul id="Ul1" class="easyui-tree">
<li id="Li2">
<span>xxxx</span>
</li>
<li id="Li3">
<span>xxxx</span>
</li>
<li id="Li4">
<span>xxxx</span>
</li>
</ul>
</div>
</div>
</div>
<div data-options="region:'center'" style="padding: 5px; background: #eee;">
<div id="tabs" class="easyui-tabs" data-options="fit:true">
<div title="主控台" id="mainimg"></div>
</div>
</div>
js代码:
$(function () {
$(".easyui-tree").tree({
onClick: function (node) {
AddTab(node.text, node.id);
}
});
function AddTab(title, url) {
//判断选项卡是否重复打开
if ($('#tabs').tabs('exists', title)) {
$('#tabs').tabs('select', title);//选中并刷新
} else {
var content = createFrame(url); //创建Frame
$("#tabs").tabs("add", {
title: title,
content: content,
closable: true
})
}
}
//创建Frame
function createFrame(url) {
var tabHeight = $("#tabs").height() - 35;
var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:' + tabHeight + 'px;"></iframe>';
return s;
}
});