单页签
在div标签内,增加class="easyui-tabs",指定id即可。
html代码:
<div class="easyui-tabs" id="tabs" data-options="region:'center',fit:true,border:false,plain:true" >
<div title="页面名称" style="padding:1px">
<iframe frameborder="0" width='100' height='99' id="centerFrame" scroll="no" src="about:blank"></iframe>
</div>
</div>
js使用tab组件(点击菜单或链接,更新页面内容)
$("#tabs").tabs('select', 0);
var seltab = $('#tabs').tabs('getSelected');
$('#tabs').tabs('update', {tab: seltab,iconCls:'icon-save',options: {title:text}});
$("#centerFrame").attr("src",url);
效果图:
多开页签
主要是在页签方法中,把update修改为add,然后根据自己多开的模式进行处理是同标题页面刷新啊,还是始终都打开新页签啊等等。 js代码:
//树菜单点击事件
function openurl(node){
var text=node.text;
var url = "http://www.baidu.com?nodeid="+node.id;
if(node.id=="root"){
url = "javascript:alert('根目录啊')";
}
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100;height:100;"></iframe>';
$('#tabs').tabs('add',{
title:text,
content:content,
closable:true
});
}
效果图:
作者: Zealon
崇尚简单,一切简单自然的事物都是美好的。