Tabs选项卡
前言
今天为大家分享的知识点是easyui中的tabs选项卡，想了解的小伙伴们可以看我下面的具体操作！
案例演示
没错，还是按照以往的套路来操作，和之前Tree简介中获取数据一样，基本上获取数据有以下这两种方式：
最终想要实现的效果：
1、当点击书籍管理下的新增时、右边的区域展示一个新增的选项卡，点击下面的未上架、已上架、已下架也是一样！
2、当再次点击书籍管理下的新增时，切换到新增页面的具体内容！
3、当点击书籍管理的时候，不展示书籍管理这个选项卡！
4、右击关闭三种不同类型选项卡的操作！
Tree（树）数据使用的表格：
1、在jsp页面静态获取
1、首先找到jquery.easyui-1.5.1的文件夹
2、再找到该文件夹中的demo夹
3、再找到demo文件夹中的tabs文件
4、然后打开basic.html文件，复制代码：
复制下的代码：
<div class="easyui-tabs" style="width:700px;height:250px">
<div title="About" style="padding:10px">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<div title="My Documents" style="padding:10px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</div>
</div>
运行结果：
2、使用js动态地加载出数据
首先了解一下js学习文档的方法以及一些事件：
这个是新开一个New Tab的选项卡窗口：
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
当该选项卡被选择时将会触发’onSelect’事件：
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
这个是添加一个新选项卡面板，在添加一个新选项卡面板的时候它将变成可选的。
添加一个非选中状态的选项卡面板时，记得设置’selected’属性为false。
// 添加一个未选中状态的选项卡面板
$('#tt').tabs('add',{
title: '新选项卡面板',
selected: false
//...
});
这个是用来判断是否存在该节点，返回结果一般会false或者true
console.log($('#bookTabs').tabs('exists',node.text))；
其中console.log()是打印的意思，上面这个node.text是json对象的文本值，node指的是json对象！
那么想要呈现出下面这个结果，需要怎么做呢：
jsp页面代码如下：
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
使用下面这两个js的代码方法，一个是使用了点击事件，一个是使用了新增选项卡的方法：
js代码如下：
$(function(){
$('#tt').tree({
onClick: function(node){
alert(node.text); // 在用户点击的时候提示
}
});
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
})
运行结果：
欧克，现在我们回归主题，那么怎样动态地使用js加载数据呢？
请看我以下操作：
1、实现的需求：
浏览器请求index.jsp,看到首页一个选项卡，当点击某一个树形菜单的一个元素，新增一个选项卡
2、存在问题： 重复的tab页会反复打开
3、分析结果： 选项卡的添加是与树形菜单点击相挂钩
解决方案：
如果重复的tab页反复打开，那么我们添加一个点击事件进行控制
并且非叶子节点不能打开页面，因为非叶子节点都没有相应的跳转页面！
jsp页面核心代码如下：
<div title="首页" style="padding:20px;display:none;">
本站各种数据指标、各个模块的使用情况、数据量、报表</div>
</div>
index.js代码如下：
$(function(){
var ctx=$("#ctx").val();
$('#tt').tree({
url:$("#ctx").val()+'/permission.action?methodName=menuTree',
onClick: function(node){//node指的是json对象
// alert(node.text); // 在用户点击的时候提示
// debugger;//使用debugger调试js的代码
//目前存在的问题：重复的tab页反复打开
//针对于上面存在的问题分析，判断当前是否存在对应的title的选项卡
//如果存在 切换到相应的选项卡 如果不存在 重新打开一个选项卡
// console.log(); 打印
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');
}
}]
});
}
}
}
});
})
运行结果如下：
3、右击关闭选项卡
jsp页面代码：
<div id="book" class="easyui-menu">
<div id="closecur">
关闭当前选项卡
</div>
<div id="closeall">
关闭全部选项卡
</div>
<div id="closeother">
关闭其他选项卡
</div>
<div class="menu-sep"></div>
</div>
js代码实现过程大概思路：
通过$(".tabs-header")对象去绑定contextmenu事件，去阻止默认的事件，并实现右击菜单弹出关闭三个不同类型选项卡的操作！
e.preventDefault();默认事件
js代码：
$(".tabs-header").bind('contextmenu',function(e){
e.preventDefault();
$('#book').menu('show', {
left: e.pageX,
top: e.pageY
});
});
//关闭当前选项卡
$("#closecur").bind("click",function(){
var tab = $('#bookTabs').tabs('getSelected');
var index = $('#bookTabs').tabs('getTabIndex',tab);
$('#bookTabs').tabs('close',index);
});
//关闭全部选项卡
$("#closeall").bind("click",function(){
var tablist = $('#bookTabs').tabs('tabs');
//下标小于0，不删除第一个，小于等于0就全部删除
for(var i=tablist.length-1;i>0;i--){
$('#bookTabs').tabs('close',i);
}
});
//关闭其他选项卡
$("#closeother").bind("click",function(){
var tablist = $('#bookTabs').tabs('tabs');
var tab = $('#bookTabs').tabs('getSelected');
var index = $('#bookTabs').tabs('getTabIndex',tab);
for(var i=tablist.length-1;i>index;i--){
$('#bookTabs').tabs('close',i);
}
var num = index-1;
//防止首页被删除
for(var i=num;i>0;i--){
$('#bookTabs').tabs('close',i);
}
});
})
其次关闭三个不同类型的选项卡的事件和方法都是根据相应的学习文档来的！
运行结果：
1、当右击关闭全部选项卡时
结果只会留下首页，因为一般管理系统中首页的内容是必须要展示出来的：
2、当右击关闭当前选项卡时：
只会留下以下这三个页面：
3、当右击关闭其他选项卡时：
只会留下首页这一个页面：
总结
其实easyui的tabs选项卡的方式和之前学习Tree简介的方式基本相同，获取数据也都是通过静态和动态两种方式，所以大可不需要死记代码，灵活记忆，学会找不同点和相同点，静态的缺陷在于比较样式固定、不灵活，而动态加载数据，根据不同数据也可进行相应展示，更加方便灵活,今天博客内容就分享到这，baibai~
