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標籤頁的關閉。