easyui中tabs的右键菜单的实现

最新推荐文章于 2024-07-16 22:31:12 发布

iteye_19011

最新推荐文章于 2024-07-16 22:31:12 发布

阅读量120

点赞数

分类专栏： easyui 文章标签： easyui tab menu tabs拓展右键菜单

本文链接：https://blog.csdn.net/iteye_19011/article/details/82360381

版权

easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

步骤一：
在页面里加入html片段

 <div id="mainTab" class="easyui-tabs" style="width:500px;height:250px;">  
    <div title="Tab1" style="padding:20px;display:none;">  
        tab1   
    </div>  
    <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">  
        tab2   
    </div>  
    <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">  
        tab3   
    </div>
</div>
 <div id="tab_menu" class="easyui-menu" style="width:150px;">  
        <div id="tab_menu-tabclose">关闭</div>  
     <div id="tab_menu-tabcloseall">关闭全部</div>  
       <div id="tab_menu-tabcloseother">关闭其他</div>  
        <div class="menu-sep"></div>  
       <div id="tab_menu-tabcloseright">关闭右侧标签</div>  
       <div id="tab_menu-tabcloseleft">关闭左侧标签</div>  
   </div>

步骤二：编写js片段

/**
 * 绑定tab右键菜单事件
 */
function bindTabMenuEvent() {
 //关闭当前
 $('#tab_menu-tabclose').click(function() {
  var currtab_title = $('#tab_menu').data("currtab");
  if ($(this).next().is('.tabs-close')) {
   $('#mainTab').tabs('close', currtab_title);
  }
 });
 //全部关闭
 $('#tab_menu-tabcloseall').click(function() {
  $('.tabs-inner span').each(function(i, n) {
   if ($(this).parent().next().is('.tabs-close')) {
    var t = $(n).text();
    $('#mainTab').tabs('close', t);
   }
  });
 });
 //关闭除当前之外的TAB
 $('#tab_menu-tabcloseother').click(function() {
  var currtab_title = $('#tab_menu').data("currtab");
  $('.tabs-inner span').each(function(i, n) {
   if ($(this).parent().next().is('.tabs-close')) {
    var t = $(n).text();
    if (t != currtab_title)
     $('#mainTab').tabs('close', t);
   }
  });
 });
 //关闭当前右侧的TAB
 $('#tab_menu-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();
    $('#mainTab').tabs('close', t);
   }
  });
  return false;
 });
 //关闭当前左侧的TAB
 $('#tab_menu-tabcloseleft').click(function() {
  var prevall = $('.tabs-selected').prevAll();
  if (prevall.length == 1) {
   $.messager.alert('已经是第一个了');
   return false;
  }
  prevall.each(function(i, n) {
   if ($('a.tabs-close', $(n)).length > 0) {
    var t = $('a:eq(0) span', $(n)).text();
    $('#mainTab').tabs('close', t);
   }
  });
  return false;
 });
}

最后在需要的地方直接调用以上方法即可！