jQuery EasyUI 右键菜单--关闭标签/选项卡

目录结构:

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>

 

 

      

时间: 2024-10-14 12:12:57

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

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

使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯狂秀才”写的后台界面已经有一段时间了,直到昨天才好好的研究了一下.在测试的过程中,我发现了一个自认为不友好的地方,举个例子:只剩下一个Tab选项卡时,点击“除此之外全部关闭”,接着会弹出两个提示框,提示“后边没有了~~”和“到头了前边没有了~~”.我平时经常使用VS作为开发工具,使用VS的朋友也会注

Jquery Easy-UI 树形菜单的运用

一.树形菜单的右键标签 期中增加同级机构.增加下属机构.修改.删除分别是调用了addNode(),del()等方法. <div id="menuTree" class="easyui-menu" style="width: 120px;"> <SecurityTag:Authorize ID="Authorize12" runat="server" FunctionID="fun

新手学Jquery EasyUI---Datagrid右键菜单

最近在学Jquery EasyUI,现在来说一说EasyUI的DataGrid,一般当我们在实现前端界面的时候,经常在DataGrid 的上面或者后面加一些按钮,方便用户进行一些添加,删除,编辑等功能 用户在每次使用的时候,都需要去先选中一条或者多条数据,然后在去点按钮进行相关操作,这样其实还是很麻烦 的,做项目的过程中,为了用户着想,做了一个右键菜单,用户想要删除或者编辑某一条数据直接在其位置上右键 就可以.下面上代码: HTML 代码 <div id="menu" class

[xPlugins] jQuery Contextmenu右键菜单

[2012-04-12] Contextmenu 右键菜单 v0.1 版本发布 [功能] 在特定区域弹出右键菜单 [功能] 可以在弹出右键菜单区域内,再屏蔽某个小区域. [功能] 有两种方式添加右键菜单项,参数配置添加和指定ID项. [功能] 支持事件回调,有两种,一种以参数配置方式对应回调,指定ID项统一回调,可根据设置链接标签区别. [2012-04-29]Contextmenu 右键菜单 v0.2版本更新 [修正] 修正了指定ID添加内容在不存在时的bug. [新增] 新增了菜单失效后变成

jquery实现右键菜单

1 <!DOCTYPE html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>jQuery自定义区域的鼠标右键菜单</title> 5 <style type="text/css"> 6 #mask{position: absolute;l

jQuery EasyUI 教程-Tabs(选项卡)

使用$.fn.tabs.defaults重写默认值对象. 选项卡显示一批面板.但在同一个时间只会显示一个面板.每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他自定义按钮. 使用案例: 创建面板 通过标签和Javascript两种方法来创建选项卡. 1. 通过标签创建选项卡 通过标签可以更容易的创建选项卡,我们不需要写任何Javascript代码.只需要给<div/>标签添加一个类ID’easyui-tabs’.每个选项卡面板都通过子<div/>标签进行创建,用法和

jquery 自定义右键菜单

如果要自定义右键菜单,那么就需要禁止原本的右键菜单,代码如下 document.oncontextmenu = new Function("return false;");//禁止右键默认菜单 该自定义右键菜单是基于jquery上的 html+css: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

Jquery contentMenu右键菜单 当某个事件出发时才显示菜单

公司项目有一个地方用到了右键菜单,后来提出需求说不再编辑状态下不要弹出菜单,我就去网上找api,开始进错了网站http://swisnl.github.io/jQuery-contextMenu/index.html(里面名称什么的都一样),搞了好久发现一点反应没有,还不报错,后来在js里面发现他的官网,坑哭了!!! 官网http://www.trendskitchens.co.nz/jquery/contextmenu/  内容不多,但是够用了!! 实现这个功能的主要方法就是onContext

Jquery 屏蔽右键菜单,识别右键事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="a" style="height: 400px;width: 700px;background-color: blue;"></div