Tabs组件
属性
事件
方法
案例
实现效果
看一下数据库中的数据
在jsp页面中调用js代码
写在我们之前写的layout布局的Center里面
<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>
js代码
$(function(){
var ctx=$("#ctx").val();
$('#tt').tree({
url:$("#ctx").val()+'/permission.action?methodName=menuTree',
//点击事件,只有点击树形菜单才会新增
onClick:function(node){
// 判断面板是否存在,有的话就不用新增了
if($('#bookTabs').tabs('exists',node.text)){
// 切换选项卡
$('#bookTabs').tabs('select',node.text);
}else{
// 新增选项卡
// 存在问题:非叶子节点按照开发角度来说是不能够打开页面的
// 分析:非叶子节点都没有跳转页面的
// 路径
var src=node.attributes.self.url;
if(src){
//数据中url的地址
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');
}
}]
});
}
}
}
});
})
总结
今天的tabs选项卡就分享到这,谢谢大家的观看!