加入了右擊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組件添加右鍵菜單功能的簡單實例全部內容了,希望大家多多支持~