样式：

　　

主要提供右键功能代码。

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

<!doctype html>

<html>

<head>

  <base href="/smile/" />

  <title>标签右键菜单</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">

  <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

  <meta HTTP-EQUIV="Expires" CONTENT="0">

  <link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/icon.css?ver=1.0031" />

  <link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/gray/easyui.css?ver=1.0031" />

  <script type="text/javascript" src="/smile/js/jquery.min.js?ver=1.0031"></script>

  <script type="text/javascript" src="/smile/js/easyui/jquery.easyui.min.js?ver=1.0031"></script> 

</head>

<body class="easyui-layout">

  <div data-options="region:'west',title:'功能导航菜单',collapsible:false,iconCls:'fa fa-leaf'" style="width: 200px;">

   <div id="aa" class="easyui-accordion" data-options="fit:true">

    <div title="菜单一" style="overflow: auto; padding: 5px;" iconCls="fa fa-building">

         <ul class="easyui-tree" data-options="onClick:clickTree">

         <li data-options="attributes:{'url':'/smile/html/menu1.html'}"><span>菜单一</span></li>

         </ul>

    </div>

   <div title="菜单二" style="overflow: auto; padding: 5px;" iconCls="fa fa-building">

         <ul class="easyui-tree" data-options="onClick:clickTree">

             <li data-options="attributes:{'url':'/smile/html/menu2.html'}"><span>菜单二</span></li>

         </ul>

    </div>

   </div>

  </div>

  <!--首页  -->

  <div data-options="region:'center',collapsible:false">

  <div id="mainTabs" class="easyui-tabs" data-options="fit:true,narrow:true">

       <div title="首页" style="overflow:hidden;" data-options="iconCls:'fa fa-home'">

        <div id="myclock" style="margin: 0 auto;width: 400px;" class="clock"></div>

       </div>

  </div>

 </div>

  <!--右键菜单栏  -->

   <div id="mm" class="easyui-menu" style="width: 120px;">

         <div id="mm-tabclosecurrent" name="1"> 关闭当前页</div>

         <div id="mm-tabcloseall" name="2">   全部关闭</div>

         <div id="mm-tabcloseother" name="3">  其他全部关闭</div>

    </div>

    <script type="text/javascript">

    $(function(){

           //监听右键事件，创建右键菜单

           $('#mainTabs').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);

               }

           });

   });

       function addTab(title, url) {

       if ($('#mainTabs').tabs('exists', title)) {

         $('#mainTabs').tabs('select', title);

       } else {

        var  content = '<iframe  scrolling="auto" frameborder="0"  src="'+ url+'" style="width:100%;height:99%;"></iframe>';

         $('#mainTabs').tabs('add', {

             title: title,

            content: content,

            closable: true ,

            cache:true,

         });

       }

     }

       //  //删除Tabs

      function closeTab(menu, type) {

           var allTabs = $("#mainTabs").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 = $("#mainTabs").tabs("getTabIndex", $("#mainTabs").tabs("getTab", curTabTitle));

           switch (type) {

               case "1"://关闭当前

                   $("#mainTabs").tabs("close", curTabTitle);

                   return false;

                   break;

               case "2"://全部关闭

                   for (var i = 0; i < allTabtitle.length; i++) {

                       $('#mainTabs').tabs('close', allTabtitle[i]);

                   }

                   break;

               case "3"://关闭其他全部

                   for (var i = 0; i < allTabtitle.length; i++) {

                       if (curTabTitle != allTabtitle[i])

                           $('#mainTabs').tabs('close', allTabtitle[i]);

                   }

                   $('#mainTabs').tabs('select', curTabTitle);

                   break;

           }

       }   

     function clickTree(node) {

       if ($(this).tree('isLeaf', node.target)) {

       addTab(node.text, node.attributes.url);

       } else {

        $(this).tree('toggle', node.target);

       }

     } 

    </script>

</body>

</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. ubuntu command

    uninstall software: sudo apt-get purge openjdk*

  2. 3.MongoDB下Windows下的安装

    由于博主目前使用的是Windows的系统,没有使用Linux等其它的系统,因此此安装配置和开发使用,均是在Windows下进行的,以后在使用其它的系统的时候,再将其它系统的配置的使用补充上来. 1.下 ...

  3. Elasticsearch 聚合

    桶(bucket)聚合 满足条件的结果集合.桶可以嵌套 标(metric)聚合 满足条件的结果集合的一些指标.如count,max等.

  4. ACE bus

    ACE bus增加的内容: 1):5状态的cache model 2):关于coherency的additional signal 3):两个cache master访问shared cache的ad ...

  5. ORACLE工作原理小结

    ORACLE工作原理1-连接 我们从一个用户请求开始讲,ORACLE的完整的工作机制是怎样的,首先一个用户进程发出一个连接请求,如果使用的是主机命名或者是本地服务命中的主机名使用的是机器名(非IP地址 ...

  6. post数据过大到服务端，接收不到的问题

    在页面把datagrid上的数据post到服务端,解析提供导出.datagrid的数据大概有1w. 结果能post过去,但在服务端接收的数据显示null.但是如果post6000条左右就没问题. 经过 ...

  7. JDK在Linux系统上安装教程

      一.下载jdk相应版本(我用的是jdk-8u111-linux-x64) 下载地址去官网:http://www.oracle.com/technetwork/cn/java/javase/down ...

  8. Gradle使用小结

    Gradle是CI过程工具,而不是系统.持续集成过程中的构建.自动化测试.打包.发布都可以使用Gradle来完成.而持续进程过程为我们降低各方面成本,提高产品信心,提高产品质量有着非常重要的作用(不要 ...

  9. 在VS中添加lib库的三种方法

    注意: 1.每种方法也要复制相应的DLL文件到相应目录,或者设定DLL目录的位置,具体方法为:"Properties" -> "Configuration Prop ...

  10. 《机器学习实战》学习笔记一K邻近算法

     一. K邻近算法思想:存在一个样本数据集合,称为训练样本集,并且每个数据都存在标签,即我们知道样本集中每一数据(这里的数据是一组数据,可以是n维向量)与所属分类的对应关系.输入没有标签的新数据后,将 ...