easyui_tabs组件以及菜单关闭

tabs组件

选项卡显示一批面板。但在同一个时间只会显示一个面板
tabs的属性：

tabs的事件：

tabs的方法：

使用有两种方法：

静态数据的使用方法

1. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给

标签添加一个类ID 'easyui-tabs’。每个选项卡面板都通过子

标签进行创建。

代码

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>  

效果

这种比较死板，数据全部是写死的，如果有很多条数据的话，就要加很多代码，太麻烦，而且我们要实现的是点击左边的树形菜单在tabs里显示对应的选项卡，很显然这种方式不行，然后我们看下一种。

js创建的使用方法

2. 通过Javascript创建选项卡

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发’onSelect’事件。

代码

js文件代码：
添加一个新的包含小工具菜单的选项卡面板，小工具菜单图标(8x8)被放置在关闭按钮之前。
记得把这些事件都要放在function函数里

$(function(){
$('#tt').tabs({    
    border:false,    
    onSelect:function(title){    
        alert(title+' is selected');    
    }    
}); 
$('#tt').tabs('add',{    
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});   
})

jsp页面代码：

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
</div>  

可以看到这里代码是只设置了一个选项卡，因为我们刚刚在js文件里定义了函数待会运行的时候，会自动增加一个选项卡叫new tabs，然后我们看看效果。

效果

tabs的动态使用举例

然后js文件创建选项卡我们熟悉之后就可以利用js文件，动态从tree菜单获取到值来创建选项卡啦
需求：浏览器请求index。jsp看到首页一个选项卡，点击某一个树形菜单的某一个元素时，新建一个选项卡。
分析：选项卡的添加是与树形菜单点击相挂钩，可以添加点击事件

代码

然后我们来看下面的js文件代码：
首先我们要考虑到几个问题：
1、当用户点击执行时，相同的tab页不能反复打开
2、非叶子节点（当url为空）按开发角度来说是不能打开页面的，所以我们要处理一下这个问题
然后我们可以开始敲：

$(function(){
	
	var ctx=$("#ctx").val();
	var ctx=ctx+'/';
	$('#tt').tree({    
	    url:ctx + 'menu.action?methodName=menuTree', 
		onClick: function(node){//当用户点击时执行
			
			//目前问题：相同的tab页反复打开
			//判断是否存在相同的选项卡，如果存在就切换到对应的选项卡，如果不存在就打开一个
			if($('#tab').tabs('exists',node.text)){
				//存在，切换选项卡
				$('#tab').tabs('select',node.text);
			}else{
				//不存在，新增选项卡
				//存在问题，非叶子节点（当url为空）按开发角度来说是不能打开页面的
				var menuURL=node.attributes.self.menuURL;
				if(menuURL){
					var content='<iframe scrolling="no" frameborder="0" src="'+ctx+menuURL+'" width="99%" height="99%"></iframe>';
					$('#tab').tabs('add',{    
					    title:node.text,    
					    content: content,    
					    closable:true,    
					    tools:[{    
					        iconCls:'icon-mini-refresh',    
					        handler:function(){    
					            alert('refresh');    
					        }    
					    }]    
					}); 
				}
			}
		} 
	}); 
})

jsp页面：

效果

然后我们康康效果：

tabs的菜单关闭

代码

OK，实现上面的效果之后呢，一般的选项卡都有那种关闭全部，关闭除当前选项卡的其他选项卡以及关闭当前选项卡的功能，那我们也要有：
然后我们来看看js文件，js文件在上面的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');
		//下标小于0，不删除第一个，小于等于0就全部删除
		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;
		//下标小于0，不删除第一个，小于等于0就全部删除
		for(var i=num;i>0;i--){
			$('#tab').tabs('close',i);
		}
	});

$(’.tabs-header’)为tabs的hearder对象，通过绑定contextmenu事件，并阻止默认的事件，来实现在header区域右键弹出菜单操作。最后运用官方提供的api，来实现tab标签页的关闭。

jsp页面

效果

普通显示

关闭当前选项卡

关闭其他选项卡
关闭其他的功能会留下当前选项卡和首页

关闭全部选项卡
关闭所有会留下首页的选项卡

然后关闭功能就写到这里啦。

总结

有什么问题阔以评论区留言。