1. 程式人生 > >easyui實現tabs選項卡之間的切換(只顯示一個)

easyui實現tabs選項卡之間的切換(只顯示一個)

一、建立選單項

<div class="easyui-accordion" id="wl_accordion" data-options="fit:true,border:false">
	<div title="aa" data-options="iconCls:'icon-hamburg-graphic'" style="overflow:auto;">
                <ul class="easyui-tree">
                    <li data-options="iconCls:'icon-hamburg-monitor'"><a href="javascript:;" class="btn_menu" url="aa1url" name="icon-hamburg-monitor">aa1</a></li>
                </ul>
        </div>
	<div title="bb" data-options="iconCls:'icon-hamburg-graphic'" style="overflow:auto;">
                <ul class="easyui-tree">
			<li data-options="iconCls:'icon-hamburg-monitor'"><a href="javascript:;" class="btn_menu" url="bb1url" name="icon-hamburg-monitor">bb1</a></li>
			<li data-options="iconCls:'icon-hamburg-monitor'"><a href="javascript:;" class="btn_menu" url="bb2url" name="icon-hamburg-monitor">bb2</a></li>
                </ul>
       </div>
</div>

二、點選選單生成tabs選項卡,並新增重新整理按鈕,實現選項卡之間切換(只顯示一個)
$(".tree-node").click(function () {
	var title = $(this).find(".btn_menu").text();
	var url = $(this).find(".btn_menu").attr("url");
	var icon = $(this).find(".btn_menu").attr("name");
	var isSelect = $("#tabs").tabs('exists', title);
	var strHtml = '<iframe src="' + url + '" frameborder="0" width="100%" height="100%" marginwidth="0px" marginheight="0px" scrolling="no" style="display:block"></iframe>';
	//'exists' 方法來判斷 tab 是否已經存在,如果為true,則選中tab
	if (isSelect) {
		$("#tabs").tabs('select', title);
		return;
	}else{
		$(".tabs li").each(function (index, obj) {
			//獲取所有可關閉的選項卡
			var tab = $(".tabs-closable", this).text();
			$(".easyui-tabs").tabs('close', tab);
		});
		//新增tab選單
		$("#tabs").tabs('add', {
			title: title,
			content: strHtml,
			closable: true,
			iconCls: icon,
			//重新整理按鈕
			tools: [{
				iconCls: 'icon-mini-refresh',
				handler: function(){
					$('.panel:visible > .panel-body > iframe').get(0).contentDocument.location.reload(true);	
				}
			}]	
		});
	}
});