EasyUI Tab新增右鍵選單
阿新 • • 發佈:2019-02-16
在頁面建立右鍵選單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>
頁面初始化時繫結各種事件
$(function(){
bindTabEvent();
bindTabMenuEvent();
});
Java程式碼
//繫結tab的雙擊事件、右鍵事件 function bindTabEvent(){ $(".tabs-inner").live('dblclick',function(){ var subtitle = $(this).children("span").text(); if($(this).next().is('.tabs-close')){ $('#tabs').tabs('close',subtitle); } }); $(".tabs-inner").live('contextmenu',function(e){ $('#mm').menu('show', { left: e.pageX, top: e.pageY }); var subtitle =$(this).children("span").text(); $('#mm').data("currtab",subtitle); return false; }); }
Js程式碼
//繫結tab右鍵選單事件 function bindTabMenuEvent() { //關閉當前 $('#mm-tabclose').click(function() { var currtab_title = $('#mm').data("currtab"); if ($(this).next().is('.tabs-close')) { $('#tabs').tabs('close', currtab_title); } }); //全部關閉 $('#mm-tabcloseall').click(function() { $('.tabs-inner span').each(function(i, n) { if ($(this).parent().next().is('.tabs-close')) { 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) { if ($(this).parent().next().is('.tabs-close')) { 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) { alert('已經是最後一個了'); return false; } nextall.each(function(i, n) { if ($('a.tabs-close', $(n)).length > 0) { 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 == 1) { alert('已經是第一個了'); return false; } prevall.each(function(i, n) { if ($('a.tabs-close', $(n)).length > 0) { var t = $('a:eq(0) span', $(n)).text(); $('#tabs').tabs('close', t); } }); return false; }); }