EasyUI之tabs组件、右键关闭tabs

tabs组件的实现

之前分享了Tree组件的实现，那么单纯的Tree结构在点击时，侧面都会展示相关Tree节点下的数据页面，今天就为大家介绍一下它是怎么实现的

官方文档：

实现步骤：
那么我们在HTML页码引入该段代码，注意：由于是加载数据库的数据，我们只需要保留一个主页tabs就行

	<div id="tabsTree" class="easyui-tabs" style="width:100%;height:100%;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        主页  
    </div>   
    </div> 

然后就是js文件了

注意点：

1. tabs选项重复问题
   如果我们没做判断，那么点击一个节点，就会新开一个tabs,这时候则需要在js中作判断：

//如果被点击的节点结构已经打开了，就跳转到指定的节点树
							if ($('#tabsTree').tabs('exists', node.text)) {
								// 切换选项卡
								$('#tabsTree').tabs('select', node.text);
							}

1. tabs在页面一访问就新增tabs选项卡
   按照业务逻辑来说，在未点击Tree结构时，是不能新增tabs选项卡的,所以我们不能在函数的入口添加新的tabs选项卡，需要在Tree结构被点击时新增tabs选项卡

2. 父节点在被点击时新开tabs选项卡
   父节点在被点击时，是不会跳转或者去实现具体业务的，只作为目录结构点作为树展开

实现tabs选项卡的js文件代码:

$(function() {
	var ctx = $("#ctx").val();
	$('#tt').tree({
		url : ctx + '/menu.action?opt=menuTree',
	});
	$('#tt')
			.tree(
					{
						onClick : function(node) {
							//获取节点的url路径
							var urlNode = node.attributes.self.menuURL;
							// alert(urlNode);
							//如果被点击的节点结构已经打开了，就跳转到指定的节点树
							if ($('#tabsTree').tabs('exists', node.text)) {
								// 切换选项卡
								$('#tabsTree').tabs('select', node.text);
							} else {
								//嵌套节点url页面
								var content = '<iframe scrolling="no" frameborder="0" src="'
										+ ctx
										+ "/"
										+ urlNode
										+ '" width="99%" height="99%"></iframe>';
								//如果节点不是空的，代表时父节点，不能打开新的tabs,否则新开一个tabs
								if (urlNode != null) {
									//给tabs绑定鼠标右击事件
									$('#tabsTree').bind('contextmenu',
											function(e) {
												e.preventDefault();
												$('#mymenu').menu('show', {
													left : e.pageX,
													top : e.pageY
												});
											});
									//新开tabs
									$('#tabsTree').tabs('add', {
										title : node.text,
										content : content,
										closable : true,
										tools : [ {
											iconCls : 'icon-mini-refresh',
											handler : function() {
												alert('refresh');
											}
										} ]
									});
								}
							}
						}
					});
})

右键关闭tabs功能

一般来说，选项卡在打开时，都会有关闭功能，EasyUI也提供了这个属性方法（closable）：
也就是在新增tabs选项卡时，在这个属性上选填false或者true就可以控制选项卡上附不附带一个关闭图标

但是为了满足用户的一个多元化需求，可以自己定义一些功能，比如说右键点击时可以关闭单个选项卡、关闭其他选项卡等等…,如图：

那么，我们现在HTML页面上，添加两个div的关闭按钮

 <span font-size:18px;">   
    			 <div id="mymenu" class="easyui-menu">  
    				 <div id="closeall">关闭全部</div>  
    			     <div id="closeelse">关闭其他</div>  
    			</div>
  </span>

然后在js文件中实现具体的业务判断，首先EasyUI的官方文档中，提供了一个鼠标右击的事件：

根据该方法，可以在js中，给每一个满足新增条件的tabs选项卡绑定事件：

	//给tabs绑定鼠标右击事件
					$('#tabsTree').bind('contextmenu',
			        		function(e) {
							e.preventDefault();
							$('#mymenu').menu('show', {
										left : e.pageX,
										top : e.pageY
							             			});
									   });

要给这两个按钮绑定关闭的事件，只需要bind绑定事件就行了：

// 关闭所有选项卡
	$("#closeall").bind("click", function() {
		// 获取所有的tabs
		var tags = $('#tabsTree').tabs('tabs');
		for (var i = tags.length - 1; i >= 1; i--) {
			$('#tabsTree').tabs('close', i);
		}

	});

	// 关闭其他选项卡
	$("#closeelse").bind("click", function() {
		// 获取所有的tabs
		var tags = $('#tabsTree').tabs('tabs');
		// 获取当前的tabs
		var tag = $('#tabsTree').tabs('getSelected');
		// 获取tabs所在的index;
		var index = $('#tabsTree').tabs('getTabIndex', tag);

		for (var i = tags.length - 1; i >= 1; i--) {
			if (index == i) {
				continue;
			}
			$('#tabsTree').tabs('close', i);
		}

	});

具体的业务功能实现就完成了…