为jQuery-easyui的tab组件添加右键菜单功能

Posted 2020-09-13 雪花飘零

加入了右击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;
　　});
}