easyui为tabs添加右键菜单

挂上一图，看看效果，菜单就是easyui的menu组件，使用者能够为菜单选项添加图标，定义样式，甚至能够设置多级结构的菜单。

<div id="rcmenu" class="easyui-menu" style="">
	<div data-options="iconCls:'icon-cancel'" id="closecur">
		关闭
	</div>
	<div id="closeall">
		关闭所有
	</div>
	<div id="closeother">
		关闭其余
	</div>
	<div class="menu-sep"></div>
	<div id="closeright">
		关闭右侧标签页
	</div>
	<div id="closeleft">
		关闭左侧标签页
	</div>
</div>

easyui-menu的使用请参考官方文档：http://www.jeasyui.com/documentation/menu.php

$(function(){
			
	$(".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',0);
		}
	});
	//关闭当前标签页右侧标签页
	$("#closeright").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);
		}
	});
	//关闭当前标签页左侧标签页
	$("#closeleft").bind("click",function(){
		var tab = $('#tab').tabs('getSelected');
		var index = $('#tab').tabs('getTabIndex',tab);
		var num = index-1;
		for(var i=0;i<=num;i++){
			$('#tab').tabs('close',0);
		}
	});
		
});

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