目录结构：

noContextMenu.js 文件内容如下： 
$(function(){

    //屏蔽右键菜单

    $(document).bind("contextmenu", function(e){ return false; });

});

效果图：

方式 一：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>easyui右键菜单-关闭标签方式一</title>

<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />

<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/noContextMenu.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<script type="text/javascript">

    $(function() {

        //生成tab标签

        $('#tt').tabs({

            border : true,

            /* onSelect : function(title) {

                alert(title + ' is selected');

            } */

        });

         //生成右键菜单

         $('#tt').tabs({

             onContextMenu: function(e, title, index){

                //选中标签

                $('#tt').tabs('select',index);

                //显示右键菜单

                $('#mm').menu('show', {

                    left: e.pageX,

                    top: e.pageY

                }) ;

             }

          });

          //为每个菜单绑定点击事件

          //关闭选中的标签

          $("#closeCurrent").click(function(){

              //获取选中的标签索引

             var tab = $('#tt').tabs('getSelected');

             var index = $('#tt').tabs('getTabIndex',tab);

             $("#tt").tabs("close",index);

          });

          //关闭选中标签之外的标签

          $("#closeOthers").click(function(){

              //获取所有标签

             var tabs = $("#tt").tabs("tabs");

             var length = tabs.length;

             //获取选中标签的索引

             var tab = $('#tt').tabs('getSelected');

             var index = $('#tt').tabs('getTabIndex',tab);

             //关闭选中标签之前的标签

             for(var i=0;i<index;i++){

                $("#tt").tabs("close",0);

             }

             //关闭选中标签之后的标签

             for(var i=0;i<length-index-1;i++){

                 $("#tt").tabs("close",1);

             }

          });

          //关闭所有标签

          $("#closeAll").click(function(){

              var tabs = $("#tt").tabs("tabs");

              var length = tabs.length;

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

                  $("#tt").tabs("close",0);

              }

          });

    });

</script>

</head>

<body>

    <!-- menu -->

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

        <div id="closeCurrent" name="closeCurrent" data-options="iconCls:'icon-no'">关闭当前</div>

        <div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">关闭其它</div>

        <div id="closeAll" name="closeAll" data-options="iconCls:'icon-cancel'">关闭所有</div>

    </div>

    <!-- tabs -->

    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">

        <div title="Tab1" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab1</div>

        <div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2</div>

        <div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3</div>

    </div>

</body>

</html>

方式 二：　　　　

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>easyui右键菜单-关闭标签方式二</title>

<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />

<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>

<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/js/noContextMenu.js"></script> --%>

<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<script type="text/javascript">

    $(function() {

        //生成tab标签

        $('#tt').tabs({

            border : true,

            /* onSelect : function(title) {

                alert(title + ' is selected');

            } */

        });

        //生成右键菜单

         $('#tt').tabs({

             onContextMenu: function(e, title, index){

                 //让默认事件失效

                 e.preventDefault() ;

                 //选中标签

                 //$('#tt').tabs('select',title);

                 $('#tt').tabs('select',index);

                 //显示右键菜单

                $('#mm').menu('show', {

                    left: e.pageX,

                    top: e.pageY

                });

                $("#mm").menu({

                     onClick : function (item) {

                         /* alert(item.name);

                         alert(typeof this) ; */

                        closeTab(this, item.name);

                     }

                });

             }

          });

    });

    //关闭标签的方法

    var closeTab = function(type,menuName){

        if(menuName == "closeCurrent"){

            //获取选中的标签索引

             var tab = $('#tt').tabs('getSelected');

             var index = $('#tt').tabs('getTabIndex',tab);

             $("#tt").tabs("close",index);

        }else if(menuName == "closeOthers"){

            //获取所有标签

             var tabs = $("#tt").tabs("tabs");

             var length = tabs.length;

             //获取选中标签的索引

             var tab = $('#tt').tabs('getSelected');

             var index = $('#tt').tabs('getTabIndex',tab);

             //关闭选中标签之前的标签

             for(var i=0;i<index;i++){

                $("#tt").tabs("close",0);

             }

             //关闭选中标签之后的标签

             for(var i=0;i<length-index-1;i++){

                 $("#tt").tabs("close",1);

             }

        }else if(menuName == "closeAll"){

            var tabs = $("#tt").tabs("tabs");

              var length = tabs.length;

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

                  $("#tt").tabs("close",0);

              }

        }

    } ;

</script>

</head>

<body>

    <!-- menu -->

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

        <div id="closeCurrent" name="closeCurrent" data-options="iconCls:'icon-no'">关闭当前</div>

        <div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">关闭其它</div>

        <div id="closeAll" name="closeAll" data-options="iconCls:'icon-cancel'">关闭所有</div>

    </div>

    <!-- tabs -->

    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">

        <div title="Tab1" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab1</div>

        <div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2</div>

        <div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3</div>

    </div>

</body>

</html>

 

 

　　　　　　

jQuery EasyUI 右键菜单--关闭标签/选项卡的更多相关文章

  1. 实现JQuery EasyUI右键菜单变灰不可用效果

    使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...

  2. 雷林鹏分享：jQuery EasyUI 树形菜单 - 使用标记创建树形菜单

    jQuery EasyUI 树形菜单 - 使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 元素中.无序列表的 元素提供一个基础的树(Tre ...

  3. 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单添加节点

    jQuery EasyUI 树形菜单 - 树形菜单添加节点 本教程向您展示如何附加节点到树形菜单(Tree).我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点. 创建食 ...

  4. 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建异步树形菜单

    jQuery EasyUI 树形菜单 - 创建异步树形菜单 为了创建异步的树形菜单(Tree),每一个树节点必须要有一个 'id' 属性,这个将提交回服务器去检索子节点数据. 创建树形菜单(Tree) ...

  5. 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单拖放控制

    jQuery EasyUI 树形菜单 - 树形菜单拖放控制 当在一个应用中使用树(Tree)插件,拖拽(drag)和放置(drop)功能要求允许用户改变节点位置.启用拖拽(drag)和放置(drop) ...

  6. 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单

    jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...

  7. 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建复杂树形网格

    jQuery EasyUI 树形菜单 - 创建复杂树形网格 树形网格(TreeGrid)可以展示有限空间上带有多列和复杂数据电子表格.本教程将演示如何将表格数据排列在分割的网格和多行表头中,以便组织共 ...

  8. 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点

    jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...

  9. 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建基础树形网格

    jQuery EasyUI 树形菜单 - 创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGr ...

随机推荐

  1. BZOJ 1369 树形DP

    思路: f[i][j] 表示节点i 染成j时 子树的最小权值 (我会猜这个j很小 你打我吖~) 随便DP一发就好了 (证明我也不会) //By SiriusRen #include <cstdi ...

  2. 转：Hibernate中Criteria和DetachedCriteria的完整用法

    原文地址:http://blog.sina.com.cn/s/blog_667528fd0100rkrf.html 设计上可以灵活的根据 Criteria 的特点来方便地进行查询条件的组装.现在对 H ...

  3. dedecms清空栏目后,新建ID不从1开始的解决方法

    在后台SQL运行器运行下面的语句,这样新建的栏目ID就从1开始了: ALTER TABLE `dede_arctype` AUTO_INCREMENT =1; (注意表名) 下面是文章的,运行后,发布 ...

  4. linux 下vim中关于删除某段，某行，或者全部删除的命令

  5. spring的JdbcTemplate

    一.首先配置JdbcTemplate: 要使用Jdbctemplate 对象来完成jdbc 操作.通常情况下,有三种种方式得到JdbcTemplate 对象.       第一种方式:我们可以在自己定 ...

  6. Prime Distance POJ - 2689 线性筛

    一个数 $n$ 必有一个不超过 $\sqrt n$ 的质因子. 打表处理出 $1$ 到 $\sqrt n$ 的质因子后去筛掉属于 $L$ 到 $R$ 区间的素数即可. Code: #include&l ...

  7. [分享]前端javascript插件（均开源）

    记录并分享一些自己使用过的插件,便于以后有相应的功能需要使用可以及时想到. 1:数字插件countUp.js 功能:用于动态显示数字的增加和减少 项目github地址:http://inorganik ...

  8. CefSharp获取页面Html代码的两种方式

    CefSharp在NuGet的简介是“The CefSharp Chromium-based browser component”,机翻的意思就是“基于Cefsharp Chromium的浏览器组件” ...

  9. 51nod 1301 集合异或和（DP）

    因为当\(A<B\)时,会存在在二进制下的一位,满足这一位B的这一位是\(1\),\(A\)的这一位是\(0\). 我们枚举最大的这一位.设为\(x\)吧. 设计状态.\(dp[i][j][1/ ...

  10. [luogu4035 JSOI2008] 球形空间产生器 （矩阵 高斯消元）

    传送门 题目描述 有一个球形空间产生器能够在 nnn 维空间中产生一个坚硬的球体.现在,你被困在了这个 nnn 维球体中,你只知道球面上 n+1n+1n+1 个点的坐标,你需要以最快的速度确定这个 n ...