前言
本章讲解的是easyui tabs控件,以及案例演示。
tabs控件介绍
从标记创建标签页(Tabs)更容易,我们不需要写任何 JavaScript 代码。
记住把 ‘easyui-tabs’ class 添加到标记。
每个标签页面板(tab panel)通过子标记被创建,其用法与面板(panel)一样。
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
属性
事件
方法
tabs选项卡案例演示
效果演示
1.jsp页面布局
<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">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
<ul id="tt"></ul>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'">
<div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%;">
<div title="首页" style="padding:20px;display:none;">本章各种数据指标</div>
</div>
</div>
</body>
2.js代码
$(function(){
var ctx=$("#ctx").val();
$('#tt').tree({
url:ctx+'/permission.action?methodName=menuTree',
onClick: function(node){
//alert(node.text);
//debugger;
//目前存在的问题,重复的tab页反复打开
//针对于上面存在的问题进行分析,判断单前是否存在对应的title的选项卡
//如果存在,就切换到对应的选项卡,不存在就重新打开一个
//console.loh($('#bookTabs').tabs('exists',node.text));
if($('#bookTabs').tabs('exists',node.text)){
//切换选项卡
$('#bookTabs').tabs('select',node.text);
}else{
//新增选项
//存在问题:非页子节点按照开发角度来说,是不能够打开页面的
//分析,非叶子节点都没有跳转页面的
var src=ctx+node.attributes.self.url;
if(src){
var content='<iframe scrolling="no" frameborder="0" src="'+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');
}
}]
});
}
}
}
});
})