代码
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css"><script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
// 数据
var treeData=[{
text:"主页菜单",
children:[
{
text:"用户管理",
children:[{
text:"用户信息",
attributes:{
url:"tuser.jsp"
}
},{
text:"测试信息",
attributes:{
url:"test.jsp"
}
}]
},
{
text:"班级管理",
children:[{
text:"班级信息",
attributes:{
url:"grade.jsp"
}
},{
text:"学生信息",
attributes:{
url:"student.jsp"
}
}]
}
]
}
];
// 实例化树菜单
$("#tree").tree({
data:treeData,
lines:true,
onClick:function(node){
if(node.attributes){
openTab(node.text,node.attributes.url);
}
}
});
// 新增Tab
function openTab(text,url){
if($("#tabs").tabs('exists',text)){
$("#tabs").tabs('select',text);
}else{
var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
$("#tabs").tabs('add',{
title:text,
closable:true,
content:content
});
//获取最后一个tabs 在新加的选项卡后面添加"关闭全部"
var li = $(".tabs-wrap ul li:last-child");
$("#close").remove();
li.after("<li id='close'><a class='tabs-inner' href='javascript:void()' onClick='javascript:closeAll()'>关闭全部</a></li>");
}
}
});
//需写在外面
function closeAll() {
$(".tabs li").each(function(index, obj) {
//获取所有可关闭的选项卡
var tab = $(".tabs-closable", this).text();
$(".easyui-tabs").tabs('close', tab);
});
$("#close").remove();//同时把此按钮关闭
}
</script>
</head>
<body class="easyui-layout">
<div region="north" style="height: 80px;background-color: #E0EDFF">
<div align="left" style="width: 80%;float: left"><img src="images/main1.jpg"></div>
<div style="padding-top: 50px;padding-right: 20px;">当前用户： <font color="red" >${currentUser.userName }</font></div>
</div>
<div region="center">
<div class="easyui-tabs" fit="true" border="false" id="tabs">
<div title="首页" >
<div align="center" style="padding-top: 100px;"><font color="red" size="10"></font></div>
</div>
</div>
</div>
<div region="west" style="width: 150px;" title="导航菜单" split="true">
<ul id="tree"></ul>
</div>
<div region="south" style="height: 25px;" align="center">版权所有</div>
</body>
</html>
1650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
