为EasyUI 的Tab 标签添加右键菜单

盛夏的果实

在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6 easyui QQ群：15129679

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>tabs 右键菜单demo QQ：15129679</title>
  <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css" />
  <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/default/easyui.css" />
  <link rel="stylesheet" type="text/css" href="static/js/zTree/zTreeStyle/zTreeStyle.css" />
  <script type="text/javascript" src="static/js/jquery.min.js"></script>
  <script type="text/javascript" src="static/js/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="static/js/zTree/jquery.ztree.min.js"></script>
</head>
<body class="easyui-layout">
  <div data-options="region:'north',border:false" style="height: 60px; padding: 10px">
    tabs 右键菜单demo QQ：15129679</div>
  <div data-options="region:'west',split:true,title:'操作菜单'" style="width: 150px; padding: 10px;">
    <ul id="webMenu_list" class="ztree" style="display: ;">
    </ul>
  </div>
  <div data-options="region:'center',title:'',border:false">
    <div id="tt" class="easyui-tabs" data-options="fit:true">
      <div title="首页" style="padding: 20px;">
        <h3>
          欢迎您来到网站信息管理系统<br>
          
          </h3>
      </div>
    </div>
  </div>
  <div id="mm" class="easyui-menu" style="width:120px;">
     <div id="mm-tabclose" data-options="name:1">关闭</div>
    <div id="mm-tabcloseall" data-options="name:2">全部关闭</div>
    <div id="mm-tabcloseother" data-options="name:3">除此之外全部关闭</div>
    <div class="menu-sep"></div>
    <div id="mm-tabcloseright" data-options="name:4">当前页右侧全部关闭</div>
    <div id="mm-tabcloseleft" data-options="name:5">当前页左侧全部关闭</div>
  </div>
  <script type="text/javascript">
  
  
    //添加Tabs
    function addTabs(event, treeId, treeNode, clickFlag){
      if(!$("#tt").tabs('exists', treeNode.name)){
        $('#tt').tabs('add',{
          id:treeId,
          title: treeNode.name,
          selected: true,
          href:treeNode.dataurl,
          closable:true
        });
      }else $('#tt').tabs('select',treeNode.name);
    }
    
    //删除Tabs
    function closeTab(menu, type){
      var allTabs = $("#tt").tabs('tabs');
      var allTabtitle = [];
      $.each(allTabs,function(i,n){
        var opt=$(n).panel('options');
        if(opt.closable)
          allTabtitle.push(opt.title);
      });
      switch (type){
        case 1 :
          var curTabTitle = $(menu).data("tabTitle");
          $("#tt").tabs("close", curTabTitle);
          return false;
        break;
        case 2 :
          for(var i=0;i<allTabtitle.length;i++){
            $('#tt').tabs('close', allTabtitle[i]);
          }
        break;
        case 3 :
      
        break;
        case 4 :
      
        break;
        case 5 :
      
        break;
      }
      
    }
    
    
    $(document).ready(function () {
      //监听右键事件，创建右键菜单
      $('#tt').tabs({
        onContextMenu:function(e, title,index){
          e.preventDefault();
          if(index>0){
            $('#mm').menu('show', {
              left: e.pageX,
              top: e.pageY
            }).data("tabTitle", title);
          }
        }
      });
      //右键菜单click
      $("#mm").menu({
        onClick : function (item) {
          closeTab(this, item.name);
        }
      });
      //treeNodes
      var zNodes = [
        { id:1, pId:0, name:"操作菜单", open:true,url:"",click:false},
        { id: 11, pId: 1, name: "杨凌现代农业科技创业网", dataurl: "02.html", target: "_self" },
        { id: 12, pId: 1, name: "杨凌外贸农产品质量溯源公共服务平台", dataurl: "02.html", target: "_self" },
        { id: 13, pId: 1, name: "华县农产品标准化生产溯源管理系统华县农产品标准化生产溯源管理系统", dataurl: "02.html", target: "_self" },
        { id: 14, pId: 1, name: "杨陵区科技局", dataurl: "02.html", target: "_self" },
        { id: 15, pId: 1, name: "杨陵区农民专业合作社联合会", dataurl: "02.html", target: "_self" },
        { id: 16, pId: 1, name: "杨凌农产品标准化生产溯源管理系统", dataurl: "02.html", target: "_self" },
        { id: 17, pId: 1, name: "站点列表", dataurl: "02.html", target: "_self" },
        { id: 18, pId: 1, name: "站点列表", dataurl: "02.html", target: "_self" }
      ];
    
      var setting = {
        view: {
          selectedMulti: false
        },
        callback: {
          onClick: addTabs
        }
      };
      $.fn.zTree.init($("#webMenu_list"), setting,zNodes);
      
    });
  </script>
</body>
</html>

2014-205-26完善menu剩下的功能修改 closeTab function 如下

//删除Tabs
    function closeTab(menu, type) {
      var allTabs = $("#tt").tabs('tabs');
      var allTabtitle = [];
      $.each(allTabs, function (i, n) {
        var opt = $(n).panel('options');
        if (opt.closable)
          allTabtitle.push(opt.title);
      });
      var curTabTitle = $(menu).data("tabTitle");
      var curTabIndex = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle));
      switch (type) {
        case 1:
          $("#tt").tabs("close", curTabIndex);
          return false;
          break;
        case 2:
          for (var i = 0; i < allTabtitle.length; i++) {
            $('#tt').tabs('close', allTabtitle[i]);
          }
          break;
        case 3:
          for (var i = 0; i < allTabtitle.length; i++) {
            if (curTabTitle != allTabtitle[i])
              $('#tt').tabs('close', allTabtitle[i]);
          }
          $('#tt').tabs('select', curTabTitle);
          break;
        case 4:
          for (var i = curTabIndex; i < allTabtitle.length; i++) {
            $('#tt').tabs('close', allTabtitle[i]);
          }
          $('#tt').tabs('select', curTabTitle);
          break;
        case 5:
          for (var i = 0; i < curTabIndex-1; i++) {
            $('#tt').tabs('close', allTabtitle[i]);
          }
          $('#tt').tabs('select', curTabTitle);
          break;
      }
    }

添加一个刷新

<div id="mm" class="easyui-menu" style="width: 120px;">
    <div id="mm-tabclose" name="6">
      刷新</div>
    <div id="Div1" name="1">
      关闭</div>
    <div id="mm-tabcloseall" name="2">
      全部关闭</div>
    <div id="mm-tabcloseother" name="3">
      除此之外全部关闭</div>
    <div class="menu-sep">
    </div>
    <div id="mm-tabcloseright" name="4">
      当前页右侧全部关闭</div>
    <div id="mm-tabcloseleft" name="5">
      当前页左侧全部关闭</div>
  </div>

//删除Tabs
    function closeTab(menu, type) {
      var allTabs = $("#tt").tabs('tabs');
      var allTabtitle = [];
      $.each(allTabs, function (i, n) {
        var opt = $(n).panel('options');
        if (opt.closable)
          allTabtitle.push(opt.title);
      });
      var curTabTitle = $(menu).data("tabTitle");
      var curTabIndex = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle));
      switch (type) {
        case 1://关闭当前
          $("#tt").tabs("close", cutTabIndex);
          return false;
          break;
        case 2://全部关闭
          for (var i = 0; i < allTabtitle.length; i++) {
            $('#tt').tabs('close', allTabtitle[i]);
          }
          break;
        case 3://除此之外全部关闭
          for (var i = 0; i < allTabtitle.length; i++) {
            if (curTabTitle != allTabtitle[i])
              $('#tt').tabs('close', allTabtitle[i]);
          }
          $('#tt').tabs('select', curTabTitle);
          break;
        case 4://当前侧面右边
          for (var i = curTabIndex; i < allTabtitle.length; i++) {
            $('#tt').tabs('close', allTabtitle[i]);
          }
          $('#tt').tabs('select', curTabTitle);
          break;
        case 5: //当前侧面左边
          for (var i = 0; i < curTabIndex - 1; i++) {
            $('#tt').tabs('close', allTabtitle[i]);
          }
          $('#tt').tabs('select', curTabTitle);
          break;
        case 6: //刷新
          var panel = $("#tt").tabs("getTab", curTabTitle).panel("refresh");
          break;
      }
    }

demo下载

[jQuery] 为EasyUI 的Tab 标签添加右键菜单

相关帖子

Win10电脑为什么总是叮咚响？

自己电脑耗电怎么查看

显卡废了的表现

windows7忘记开机密码了怎么办 win7开机密码怎么跳过删除

2023微信红包封面制作教程,快来领取你的红包封面吧

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

视频压缩软件_VideoMinimizer

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

盛夏的果实 LV4