tab选项卡实现

前言：

选项卡的实现基于前面tree组件的实现，链接如下
[tree组件实现](https://blog.csdn.net/qq_46705598/article/details/106912698)
[tree组件的后端](https://blog.csdn.net/qq_46705598/article/details/106891364)

效果图：

代码

界面代码，默认设置一个首页的tab页：

<div id="booktabs" class="easyui-tabs" style="width:100%;height:100%;">   
		    <div title="首页" style="padding:20px;display:none;">   
		        	本站各种数据指标 
		    </div>   
		</div>

js代码：
在函数里添加一个点击事件，当点击树形菜单中的某一个元素，新增一个选项卡

onClick: function(node)

会有一个重复的tab页会反复的打开的问题，就使用一个if判断，如果
已经有了那个标题的tab页，那么就切换到相应的选项卡

if($('#booktabs').tabs('exists',node.text)){
				//切换选项卡
				$('#booktabs').tabs('select',node.text);
			}

如果没有，那么新增一个选项卡

$('#booktabs').tabs('add',{    
	    title:'New Tab',    
	    content:'Tab Body',    
	    closable:true,    
	    tools:[{    
	        iconCls:'icon-mini-refresh',    
	        handler:function(){    
	            alert('refresh');    
	        }    
	    }]    
	}); 

这时候又会有一个非叶子节点能够新增选项卡的问题，只需要做一个判断，当有src路径的时候才能新增选项卡

var src = node.attributes.self.url;
var content = '<iframe scrolling="no" frameborder="0" src="'+dl+src+'" width="99%" height="99%"></iframe>';

总的js的代码为：

$(function(){
	var dl = $("#dl").val();
	$('#tt').tree({
		url:dl+'/permission.action?methodName=menuTree',
//		点击事件
		onClick: function(node){
//			alert(node.text);  // 在用户点击的时候提示
//			重复的tab页会反复打开
//			console.log($('#tt').tabs('exists',node.text));
			if($('#booktabs').tabs('exists',node.text)){
				//切换选项卡
				$('#booktabs').tabs('select',node.text);
			}else{
				//新增选项卡
				//非叶子节点不能打开页面
				var src = node.attributes.self.url;
				if(src){
					var content = '<iframe scrolling="no" frameborder="0" src="'+dl+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');    
					        }    
					    }]    
					});
				}
			}
		}
	});
})

右键点击关闭选项卡

jsp界面代码

<div id="rcmenu" class="easyui-menu">
		    	<div id="closecur">
		    		关闭当前
		    	</div>
		    	<div id="closeall">
		    		关闭全部
		    	</div>
		    	<div id="closeother">
		    		关闭其他
		    	</div>
		    	<div class="menu-sep"></div>
		    </div>

js代码

$(".tabs-header").bind('contextmenu',function(e){
		e.preventDefault();
		$('#rcmenu').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	});
	关闭当前标签页
	$("#closecur").bind("click",function(){
		var tab = $('#tab').tabs('getSelected');
		var index = $('#tab').tabs('getTabIndex',tab);
		$('#tab').tabs('close',index);
	});
	//关闭所有标签页
	$("#closeall").bind("click",function(){
		
		var tablist = $('#tab').tabs('tabs');
		for(var i=tablist.length-1;i>0;i--){
			$('#tab').tabs('close',i);
		}
	});
	//关闭其他标签页
	$("#closeother").bind("click",function(){
		var tablist = $('#tab').tabs('tabs');
		var tab = $('#tab').tabs('getSelected');
		var index = $('#tab').tabs('getTabIndex',tab);
		for(var i=tablist.length-1;i>index;i--){
			$('#tab').tabs('close',i);
		}
		var num = index-1;
		for(var i=num;i>0;i--){
			$('#tab').tabs('close',i);
		}
	});

效果图：