為jQuery-easyui的tab組件添加右鍵菜單功能

標籤：als   ret   bin   雙擊   右鍵   右擊   ext   .text   實現   

加入了右擊TAB選項卡時顯示關閉的操作功能表

具體實現代碼：

右鍵菜單 HTML:

<div id="mm" class="easyui-menu" style="width:150px;">
　　<div id="mm-tabclose">關閉</div>
　　<div id="mm-tabcloseall">全部關閉</div>
　　<div id="mm-tabcloseother">除此之外全部關閉</div>
　　<div class="menu-sep"></div>
　　<div id="mm-tabcloseright">當前頁右側全部關閉</div>
　　<div id="mm-tabcloseleft">當前頁左側全部關閉</div>
</div>

下面是js代碼：

$(function(){
　　tabClose();
　　tabCloseEven();
})

function tabClose()
{
　　/*雙擊關閉TAB選項卡*/
　　$(".tabs-inner").dblclick(function(){
　　　　var subtitle = $(this).children("span").text();
　　　　$(‘#tabs‘).tabs(‘close‘,subtitle);
　　});

　　$(".tabs-inner").bind(‘contextmenu‘,function(e){
　　　　$(‘#mm‘).menu(‘show‘, {
　　　　　　left: e.pageX,
　　　　　　top: e.pageY,
　　　　});

　　　　var subtitle =$(this).children("span").text();
　　　　$(‘#mm‘).data("currtab",subtitle);

　　　　return false;
　　});
}

//綁定右鍵菜單事件
function tabCloseEven(){
　　//關閉當前
　　$(‘#mm-tabclose‘).click(function(){
　　　　var currtab_title = $(‘#mm‘).data("currtab");
　　　　$(‘#tabs‘).tabs(‘close‘,currtab_title);
　　});
　　

　　//全部關閉
　　$(‘#mm-tabcloseall‘).click(function(){
　　　　$(‘.tabs-inner span‘).each(function(i,n){
　　　　　　var t = $(n).text();
　　　　　　$(‘#tabs‘).tabs(‘close‘,t);
　　　　});
　　});
　　

　　//關閉除當前之外的TAB
　　$(‘#mm-tabcloseother‘).click(function(){
　　　　var currtab_title = $(‘#mm‘).data("currtab");
　　　　$(‘.tabs-inner span‘).each(function(i,n){
　　　　　　var t = $(n).text();
　　　　　　if(t!=currtab_title)
　　　　　　$(‘#tabs‘).tabs(‘close‘,t);
　　　　});
　　});

　　//關閉當前右側的TAB
　　$(‘#mm-tabcloseright‘).click(function(){
　　　　var nextall = $(‘.tabs-selected‘).nextAll();
　　　　if(nextall.length==0){
　　　　　　//msgShow(‘系統提示‘,‘後邊沒有啦~~‘,‘error‘);
　　　　　　alert(‘後邊沒有啦~~‘);
　　　　　　return false;
　　　　}
　　　　

　　　　nextall.each(function(i,n){
　　　　　　var t=$(‘a:eq(0) span‘,$(n)).text();
　　　　　　$(‘#tabs‘).tabs(‘close‘,t);
　　　　});
　　　　return false;
　　});

　　//關閉當前左側的TAB
　　$(‘#mm-tabcloseleft‘).click(function(){
　　　　var prevall = $(‘.tabs-selected‘).prevAll();
　　　　if(prevall.length==0){
　　　　　　alert(‘到頭了，前邊沒有啦~~‘);
　　　　　　return false;
　　　　}
　　　　prevall.each(function(i,n){
　　　　　　var t=$(‘a:eq(0) span‘,$(n)).text();
　　　　　　$(‘#tabs‘).tabs(‘close‘,t);
　　　　});
　　　　return false;
　　});
}

為jQuery-easyui的tab組件添加右鍵菜單功能