tabs控件
前言
tabs控件简介
这个是它的文档
找到它的实例，用记事本打开，把需要的复制
放到index.jsp里，这些是从实例中复制过来的
先运行一遍，实现出来的效果如下图：（只不过现在还是静态的，我们需要的是得到相关的数据）
通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给
标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子
标签进行创建，用法和panel(面板)相同。
所以就把刚复制的代码替换成：
显示结果：
但这还不是我们想要的结果，那个框太小了，我们想要的是全屏，只需要把宽度改一下，把宽度改成100%
最后代码改成这样
结果
所以就把刚复制的代码替换成：
显示结果：
但这还不是我们想要的结果，那个框太小了，我们想要的是全屏，只需要把宽度改一下，把宽度改成100%
最后代码改成这样
结果
tabs选项卡实现
我们需要添加一个新的包含小工具菜单的选项卡面板，小工具菜单图标(8x8)被放置在关闭按钮之前。
1.目前呢，jsp中有一个静态的首页的选项卡tab，当浏览器请求jsp的时候，会调用下列代码，造成页面端看到两个tab页
$('#bookTabs').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
2.我们需求，浏览器index.jsp，看到首页一个选项卡，当点击一个树形菜单的一个元素，新增一个选项卡
3.分析，选项卡的添加是与树形菜单点击相挂钩
所以我们要在这里添加个树的事件
node：指的是json对象
node.text=‘New Tab’，替换一下
$(function(){
// var ctx = $("#ctx").val();
$('#tt').tree({
url:$("#ctx").val()+'/permission.action?methodName=menuTree',
onClick: function(node){
// alert(node.text); // 在用户点击的时候提示
$('#bookTabs').tabs('add',{
title:node.text,
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
});
})
最后我们要做出的功能，点击新增会出现它的数据，首先专门建一个包放增加界面，这里就用到了iframe
通过菜单去打开不同的tab页
var content = '<iframe scrolling="no" frameborder="0" src="'+menuUrl+'" width="99%" height="99%"></iframe>';
dubugger一下
目前存在的问题： 重复的tab页会反复打开
针对于上面存在的问题进行分析：判断当前是否存在对应的title的选项卡，
如果存在，就切换到对应的选项卡，如果不存在，那么重新打开一个选项卡
在方法里找到
这样就解决了，
但是还有最后一个bug，旁边的列表，如果我点击书籍管理，则数据管理下的内容会收缩。就算不论收缩，起码不会报错
存在问题， 非叶子节点按照开发角度来说是不能够打开页面的
分析： 非叶子节点都没有跳转界面的
解决办法：
最终index.js的代码是：
$(function(){
var ctx = $("#ctx").val();
$('#tt').tree({
url:ctx+'/permission.action?methodName=menuTree',
onClick: function(node){
// alert(node.text); // 在用户点击的时候提示
// debugger;//debuggerjs代码
// 目前存在的问题：重复的tab页会反复打开
// 针对于上面存在的问题进行分析：判断当前是否存在对应的title的选项卡，
// 如果存在，就切换到对应的选项卡，如果不存在，那么重新打开一个选项卡
// console.log($('#bookTabs').tab('exists',node.text));
if($('#bookTabs').tabs('exists',node.text)){
// 切换选项卡
$('#bookTabs').tabs('select',node.text)
}else{
// 新增选项卡
// 存在问题，非叶子节点按照开发角度来说是不能够打开页面的
// 分析：非叶子节点都没有跳转界面的
var src=node.attributes.self.url;
if(src){
// 如果不为空则执行
var content = '<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
$('#bookTabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
}
}
});
})
最终index.jsp的主要代码：
<title>登录后的主界面</title>
</head>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<body class="easyui-layout">
<div data-options="region:'north',border:false"
style="height:60px;background:#B3DFDA;padding:10px">网上书籍</div>
<div data-options="region:'west',split:true,title:'目录'"
style="width:150px;padding:10px;">
<ul id="tt"></ul>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'右边'"
style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false"
style="height:50px;background:#A9FACD;padding:10px;">底部版权</div>
<div data-options="region:'center',title:'内容'">
<div id="bookTabs" class="easyui-tabs" style="width:100%;height:250px;">
<div title="首页" style="padding:20px;display:none;">
本站各种数据指标 （各个模块的使用情况、数据量、报表）
</div>
</div>
</body>
最终完成结果：
本次章节分享到这！加油！
