页面格式设计为,左边为导航栏,右边为tab页面,使用的是easyui框架中的tabs
<!-- 页脚信息 -->
<div data-options="region:'south',border:false" style="height:20px; background:#F3F3F3; padding:2px; vertical-align:middle;">
<span id="sysVersion">系统版本:V1.0</span>
<span id="nowTime"></span>
</div>
<!-- 左侧导航 -->
<div data-options="region:'west',split:true,title:'导航菜单', fit:false" style="width:200px;">
<ul id="menuTree" class="ztree">
</ul>
</div>
<!-- 内容tabs -->
<div id="center" data-options="region:'center'">
<!-- 这个定义div的id,后面需要用到-->
<div id="tabs" class="easyui-tabs">
<div title="欢迎使用" style="padding:5px;display:block;">
正在更新中...(这是默认创建的一个div页面)
</div>
</div>
</div>
在内容tabs中,下面嵌套的每一个div都为一个页面,从一个div中打开另一个,或者转到另一个div页面中,需要传递页面url和页面的标题
function LRGHSLink(){//事件
var urls = "JSGL/FPGL/GHSFPMain.html";
var subtitle = "供货商发票录入("+decodeURIComponent($.session.get("FDMC"))+")";
addTabw(subtitle,urls);
}
function addTabw(title, url){
var jq=top.jQuery;
if (jq('#tabs').tabs('exists', title)) {
jq('#tabs').tabs('select', title);//如果存在当前页面,则跳转到页面
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
jq('#tabs').tabs('add',{//不存在,则添加一个
title:title,
content:content,
closable:true
});
}
}
其中的var jq=top.jQuery;为关键,如果使用 $(‘#tabs’).tabs(‘exists’, title);会造成‘nodeName’ undefined;也就是“#tabs”找不到。具体原因是因为,页面div嵌套在父类的tabs里,所以,要写成父类也就是顶层的window对象的jquery对象.
当然关闭div页面使用
$('#tabs').tabs('close', title);