EasyUI —— tab 使用用例

/ UI / 178浏览

单页签

在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);

效果图:

alt

多开页签

主要是在页签方法中,把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
	});
}

效果图:

alt