jsp
中心
div中
左侧
<script type="text/javascript" src="js/home.js"></script>
<div data-options="region:'west',title:'导航',split:true,collapsible:false,iconCls:'icon-system'"
style="width:200px;padding:10px">
<ul id="nav"></ul>
</div>
中心
<div data-options="region:'center'" style="overflow:hidden;">
<div id="tabs">
<div title="起始页" style="padding:0,10px;display:block;">欢迎进入系统</div>
</div>
</div>
同时自定义左侧小图标,添加16*16图片到icon文件夹下,在icon.css中添加相应条目
js中
$(function(){
$('#tabs').tabs({
fit:true,
border:false,
});
//在右边center区域打开菜单,新增tab
function Open(text, url,icon) {
if ($("#tabs").tabs('exists', text)) {
$('#tabs').tabs('select', text);
} else {
$('#tabs').tabs('add', {
title : text,
closable : true,
content : url,
iconCls : icon
});
}
}
$('#nav').tree({
data: [{
text:"系统模块",
"iconCls":"icon-system",
"children":[{
"text":"审核模块",
"iconCls":"icon-check",
"children":[{
"text":"身份审核",
"iconCls":"icon-admin",
attributes : {
url : '<iframe width="100%" height="100%" frameborder="0" src="tab1.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'
}
},{
"text":"请假审核",
"iconCls":"icon-holiday",
attributes : {
url : '<iframe width="100%" height="100%" frameborder="0" src="tab2.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'
}
}]
},{
"text":"成绩模块",
"iconCls":"icon-record",
"children":[{
"text":"上传成绩",
"iconCls":"icon-grade",
attributes : {
url : '<iframe width="100%" height="100%" frameborder="0" src="tab3.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'
}
}]
},{
"text":"课表模块",
"iconCls":"icon-course",
"children":[{
"text":"上传成绩",
"iconCls":"icon-up",
attributes : {
url : '<iframe width="100%" height="100%" frameborder="0" src="tab4.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'
}
}]
},{
"text":"聊天功能",
"iconCls":"icon-chat",
attributes : {
url : '<iframe width="100%" height="100%" frameborder="0" src="tab5.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'
}
}]
}],
lines : true,
onClick : function (node) {
if (node.attributes) {
Open(node.text, node.attributes.url,node.iconCls);
}
}
});
});