样式：

　　

主要提供右键功能代码。

(只需要提供你需要的js和css就行了)

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <base href="/smile/" />
  5.   <title>标签右键菜单</title>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7.   <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
  8.   <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
  9.   <meta HTTP-EQUIV="Expires" CONTENT="0">
  10.   <link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/icon.css?ver=1.0031" />
  11.   <link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/gray/easyui.css?ver=1.0031" />
  12.   <script type="text/javascript" src="/smile/js/jquery.min.js?ver=1.0031"></script>
  13.   <script type="text/javascript" src="/smile/js/easyui/jquery.easyui.min.js?ver=1.0031"></script> 
  14.  
  15. </head>
  16. <body class="easyui-layout">
  17.   <div data-options="region:'west',title:'功能导航菜单',collapsible:false,iconCls:'fa fa-leaf'" style="width: 200px;">
  18.    <div id="aa" class="easyui-accordion" data-options="fit:true">
  19.     <div title="菜单一" style="overflow: auto; padding: 5px;" iconCls="fa fa-building">
  20.          <ul class="easyui-tree" data-options="onClick:clickTree">
  21.          <li data-options="attributes:{'url':'/smile/html/menu1.html'}"><span>菜单一</span></li>
  22.          </ul>
  23.     </div>
  24.    <div title="菜单二" style="overflow: auto; padding: 5px;" iconCls="fa fa-building">
  25.          <ul class="easyui-tree" data-options="onClick:clickTree">
  26.              <li data-options="attributes:{'url':'/smile/html/menu2.html'}"><span>菜单二</span></li>
  27.          </ul>
  28.     </div>
  29.    </div>
  30.   </div>
  31.   <!--首页  -->
  32.   <div data-options="region:'center',collapsible:false">
  33.   <div id="mainTabs" class="easyui-tabs" data-options="fit:true,narrow:true">
  34.        <div title="首页" style="overflow:hidden;" data-options="iconCls:'fa fa-home'">
  35.         <div id="myclock" style="margin: 0 auto;width: 400px;" class="clock"></div>
  36.        </div>
  37.   </div>
  38.  </div>
  39.   <!--右键菜单栏  -->
  40.    <div id="mm" class="easyui-menu" style="width: 120px;">
  41.          <div id="mm-tabclosecurrent" name="1"> 关闭当前页</div>
  42.          <div id="mm-tabcloseall" name="2">   全部关闭</div>
  43.          <div id="mm-tabcloseother" name="3">  其他全部关闭</div>
  44.     </div>
  45.     <script type="text/javascript">
  46.     $(function(){
  47.            //监听右键事件，创建右键菜单
  48.            $('#mainTabs').tabs({
  49.                onContextMenu:function(e, title,index){
  50.                    e.preventDefault();
  51.                    if(index>0){
  52.                        $('#mm').menu('show', {
  53.                            left: e.pageX,
  54.                            top: e.pageY
  55.                        }).data("tabTitle", title);
  56.                    }
  57.                }
  58.            });
  59.            //右键菜单click
  60.            $("#mm").menu({
  61.                onClick : function (item) {
  62.                    closeTab(this, item.name);
  63.                }
  64.            });
  65.  
  66.    });
  67.  
  68.        function addTab(title, url) {
  69.        if ($('#mainTabs').tabs('exists', title)) {
  70.          $('#mainTabs').tabs('select', title);
  71.        } else {
  72.         var  content = '<iframe  scrolling="auto" frameborder="0"  src="'+ url+'" style="width:100%;height:99%;"></iframe>';
  73.          $('#mainTabs').tabs('add', {
  74.              title: title,
  75.             content: content,
  76.             closable: true ,
  77.             cache:true,
  78.          });
  79.        }
  80.  
  81.      }
  82.  
  83.        //  //删除Tabs
  84.       function closeTab(menu, type) {
  85.            var allTabs = $("#mainTabs").tabs('tabs');
  86.            var allTabtitle = [];
  87.            $.each(allTabs, function (i, n) {
  88.                var opt = $(n).panel('options');
  89.                if (opt.closable)
  90.                    allTabtitle.push(opt.title);
  91.            });
  92.         var curTabTitle = $(menu).data("tabTitle");
  93.            var curTabIndex = $("#mainTabs").tabs("getTabIndex", $("#mainTabs").tabs("getTab", curTabTitle));
  94.            switch (type) {
  95.                case "1"://关闭当前
  96.                    $("#mainTabs").tabs("close", curTabTitle);
  97.                    return false;
  98.                    break;
  99.                case "2"://全部关闭
  100.                    for (var i = 0; i < allTabtitle.length; i++) {
  101.                        $('#mainTabs').tabs('close', allTabtitle[i]);
  102.                    }
  103.                    break;
  104.                case "3"://关闭其他全部
  105.                    for (var i = 0; i < allTabtitle.length; i++) {
  106.                        if (curTabTitle != allTabtitle[i])
  107.                            $('#mainTabs').tabs('close', allTabtitle[i]);
  108.                    }
  109.                    $('#mainTabs').tabs('select', curTabTitle);
  110.                    break;
  111.            }
  112.  
  113.        }   
  114.  
  115.      function clickTree(node) {
  116.        if ($(this).tree('isLeaf', node.target)) {
  117.        addTab(node.text, node.attributes.url);
  118.        } else {
  119.         $(this).tree('toggle', node.target);
  120.  
  121.        }
  122.      } 
  123.  
  124.     </script>
  125. </body>
  126. </html>

EasyUI 的Tab 标签添加右键菜单的更多相关文章

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

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

  2. 仅在TabControl中的Tab中添加右键菜单

    若想实现仅在TabControl中的Tab中添加右键菜单,可在XAML中通过使用样式得到: <TabControl> <TabControl.ItemContainerStyle&g ...

  3. 使用easyui为tab页增加右键菜单

    在使用easyui进行上左右布局一文中,我们已经使用easyui搭建起了一个简单的上左右布局.在使用的过程中,我们经常会遇到tab页打开的太多,但只能一个一个的关闭的烦恼,这个时候有没有想到eclip ...

  4. easyui tab上面添加右键菜单

    说扩展,我觉得有点过了,只是加入了右击TAB选项卡时显示关闭的上下文菜单,先看下效果图: 具体实现代码: 右键菜单 HTML: <div id="mm" class=&quo ...

  5. EasyUI-Tab 标签添加右键菜单

    在网上看了很多demo 自己实现了一个效果如下 <!doctype html> <html> <head> <meta http-equiv="co ...

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

    加入了右击TAB选项卡时显示关闭的上下文菜单 具体实现代码: 右键菜单 HTML: <div id="mm" class="easyui-menu" st ...

  7. 给jquery easy-ui 添加右键菜单

    版权声明:转自为EasyUI 的Tab 标签添加右键菜单

  8. NX二次开发-自定义添加右键菜单RegisterConfigureContextMenuCallback

    首先声明这个知识我以前不知道,是夏天的时候看到别人在唐工的QQ群里问的,唐工说西门子官方有这个例子.那个时候我因为在忙其他事情,也就没去研究那个右键菜单到底是怎么做的.关于自定义添加右键菜单Regis ...

  9. pyqt5-为QListWidget添加右键菜单

    如何在pyqt5下为QListWidget添加右键菜单? 能百度到的均是pyqt4下的,有些貌似并不好用. 在尝试了很多方法后,下面贴出可用的方法: from PyQt4 import QtCore, ...

随机推荐

  1. How to add taxonomy element to a summary view?

    [re: Orchard CMS] This caused me scratching my head for days and now I can even feel it's bleeding. ...

  2. spring cloud 学习研究- spring-cloud-microservice-example

    spring cloud + docker 微服务架构 http://www.open-open.com/lib/view/open1437363835818.html 实例项目 https://gi ...

  3. ORA-1034 ORACLE not available (转）

    http://blog.csdn.net/onlyone_htliu/article/details/6075150 前言 每一个DBA在进行数据库管理的过程中不可避免的要遇到形形色色的错误(ORA- ...

  4. Tomcat发布项目方法

    第一种方法:    将已完成的项目(无论用jbuilder\eclipse\netbeans)下的webroot目录整个拷贝到Tomcat的webapps目录中,假若webroot目录改名为xxx,则 ...

  5. python实现排序算法

    冒泡排序  import randomdef BubbleSort(num):    n=len(num)    for i in range(0,n):        for j in range( ...

  6. MVC中view和controller相互传值的方法

    MVC项目中,在view层如果使用前台框架,框架中会有封装好的相互传值方法.但是,那些postdata[][]方法不一定能够满足功能需求,反而一些常用的传值方法可能会刚好解决它们的不足.总结如下: 一 ...

  7. Icon字体制作

    工具网站:https://icomoon.io 这个网站是免费的 功能也很强大 不过我那是铁通网络,导致这个网站不能访问,做vpn跳转就可以了 正题: 点击这里进入制作页面: 点击这里选取 svg 矢 ...

  8. Pro Git 第一章 起步 读书笔记

    Pro Git 笔记 第1章 起步 1.文件的三种状态. 已提交:文件已经保存在本地数据库中了.(commit) 已修改:修改了某个文件,但还没有提交保存.(vim) 已暂存:已经把已修改的文件放在下 ...

  9. Bar codes in NetSuite Saved Searches(transport/reprint)

    THIS IS A COPY FROM BLOG Ways of incorporating Bar Codes into your Netsuite Saved Searches.    Code ...

  10. Netsuite > Employee Record Name维护规则

    Employee Record Name 维护规则 - 在NS系统设计中,默认的Field展现是:First Name, Middle Name, Last Name - 在General Prefe ...