easyUI中的tabs组件及关闭选项卡操作

转载请标明出处：https://blog.youkuaiyun.com/men_ma/article/details/106847165.
本文出自 不怕报错 就怕不报错的小猿猿 的博客

前言

本篇博客的tabs组件离不开前面的树形菜单tree知识点，博主提供tree控件的资源，要完成今天需要实现的目标，必然离不开tree控件和tabs组件（按照先后顺序学习）：
链接: easyUI前端框架tree（树）后台实现（树形菜单一）——java.
easyUI前端框架的tree（树）前台展示（树形菜单二）——java.

如何自学easyUI中的控件？

需要实现的目标

tabs选项卡的切换：

关闭选项卡的操作（关闭全部、关闭其他选项卡、关闭右侧选项卡、关闭左侧选项卡）：、

实现tabs组件的思路步骤

代码实现最终效果

index.jsp:主界面的展示

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录后的主界面</title>
<!--导入css  -->
<!--全局样式  -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!--定义图标  -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   

<!--导入js  -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<!--组件库源码的js文件  -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index1.js"></script>  
</head>
<!--隐藏域：项目名  -->
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }"> 
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">美食网站管理系统</div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
		 <ul id="tt"></ul> 
	</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'">
		<div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%">
	   			 <div title="首页" style="padding:20px;display:none;"> 本站各种数据指标（各个模块的使用情况，数据量、报表）</div>   
		   			  <a href="javascript:void(0)" id="mb" class="easyui-menubutton"     
		        	data-options="menu:'#mm',iconCls:'icon-edit'">关闭选项卡操作</a>
		</div>
				<div id="mm" class="easyui-menu" style="width:150px;align:right">   
				    <div name="tab_menu-tabcloseall" id="closeAll" data-options="iconCls:'icon-cancel'">关闭全部选项卡</div>
			        <div name="tab_menu-tabcloseother" id="closeOthor" data-options="iconCls:'icon-clear'">关闭其他选项卡</div>
			        <div class="menu-sep"></div>
			        <div name="tab_menu-tabcloseright" id="closeRight" data-options="iconCls:'icon-redo'">关闭右侧选项卡</div>
			        <div name="tab_menu-tabcloseleft" id="closeLeft" data-options="iconCls:'icon-undo'">关闭左侧选项卡</div>
				</div> 
	</div>  
	</div>
</body>
</html>

index.js：使用JavaScript加载数据

$(function() {
	var ctx=$("#ctx").val();
	$('#tt').tree({    
	    url:ctx+'/menu.action?methodName=menuTree' ,
	    onClick: function(node){//node指的是json对象
//			alert(node.text);  // 在用户点击的时候提示
//	    	如何调试（debug）js代码
//	    	debugger;
//	    	目前存在的问题，重复的tab页反复打开
//	    	针对于上面存在的问题进行分析，判断当前是否存在对应的title的选项卡
//	    	如果存在，就切换到对应的选项卡，如果不存在，那么重新打开一个选项卡
//	    	 <iframe scrolling="no" frameborder="0" src="" width="99%" height="99%"></iframe>
//	    	console.log($('#bookTabs').tabs('exists',node.text));
	    	if($('#bookTabs').tabs('exists',node.text)){
//	    		切换选项卡
	    		$('#bookTabs').tabs('select',node.text);
	    	}else{
//	    		新增选项卡
//	    		存在问题，非叶子节点（例如树叶子来理解）按照开发角度来说是不能够打开页面的
//	    		分析：非叶子节点都没有跳转页面的
	    		var src=node.attributes.self.menuURL;
//	    		alert(ctx+src);
	    		if(src){
		    		var content=' <iframe scrolling="no" frameborder="0" src="'+ctx+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');    
			    	        }    
			    	    }]    
			    	});  
	    		}
	    	}
		}
	});
	$('#mm').menu({
        "onClick":function(item) {
            closeTab(item.id,item.text);
        }
    });

//=======================================================
	   //关闭选项卡功能    注意：还需要上面的 .tabs和.menu右击触发事件显示菜单功能哦
    function closeTab(title, text) {
        if(text == '关闭全部选项卡') {
//        	alert(text);
            $(".tabs li").each(function(index, obj) {
                //获取所有可关闭的选项卡
                var tabTitle = $(".tabs-closable", this).text();
                $("#bookTabs").tabs("close", tabTitle);
            });
        }
        if(text == '关闭其他选项卡') {
        /*	alert(text);
            $(".tabs li").each(function(index, obj) {
                //获取所有可关闭的选项卡
                var tabTitle = $(".tabs-closable", this).text();
                if(tabTitle != title) {
                    $("#bookTabs").tabs("close", tabTitle);
                }
            });*/
        	var tablist = $('#bookTabs').tabs('tabs');  
            var tab = $('#bookTabs').tabs('getSelected');  
            var index = $('#bookTabs').tabs('getTabIndex',tab);  
            for(var i=tablist.length-1;i>index;i--){  
                $('#bookTabs').tabs('close',i);  
            }  
            var num = index-1;  
            if(num < 1){  
                return;  
            }else{  
                for(var i=num;i>=1;i--){  
                    $('#bookTabs').tabs('close',i);  
                }  
                $("#bookTabs").tabs("select", 1);  
            }  
        }
        if(text == '关闭右侧选项卡') {
//        	alert(11);
        	 var tablist = $('#bookTabs').tabs('tabs');  
	            var tab = $('#bookTabs').tabs('getSelected');  
	            var index = $('#bookTabs').tabs('getTabIndex',tab);  
	            for(var i=tablist.length-1;i>index;i--){  
	                $('#bookTabs').tabs('close',i);  
	            }  
        }
        if(text == '关闭左侧选项卡') {
        	 var tablist = $('#bookTabs').tabs('tabs');  
	            var tab = $('#bookTabs').tabs('getSelected');  
	            var index = $('#bookTabs').tabs('getTabIndex',tab);  
	            var num = index-1;  
	            if(num < 1){  
	                return;  
	            }else{  
	                for(var i=num;i>=1;i--){  
	                    $('#bookTabs').tabs('close',i);  
	                }  
	                $("#bookTabs").tabs("select", 1);  
	            }  
        }
    }
})

easyUI中tabs组件的其他属性及事件和方法

属性：



事件：

方法：

选项卡面板

尾言

今天的tabs组件的知识就分享到这里啦！！ 有问题或不懂的朋友们，欢迎大家在下评论！！谢谢！！