easyui实现tabs选项卡之间的切换（只显示一个）

最新推荐文章于 2023-07-20 15:08:25 发布

木雷双雄7

最新推荐文章于 2023-07-20 15:08:25 发布

阅读量1.2w

点赞数

分类专栏： easyui 文章标签： easyui tabs

本文链接：https://blog.csdn.net/wlangmood/article/details/70258495

版权

easyui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、创建菜单项

<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);	
				}
			}]	
		});
	}
});