easyui-tab 加载右键菜单

转载 2015年07月07日 11:45:54

参考出处:http://blog.csdn.net/s1234567_89/article/details/9240177

第一种方法:此种方法live  IE不支持

  1. <span style="font-family: Arial, Helvetica, simsun, u5b8bu4f53; white-space: normal; ">在页面创建右键菜单html</span>  

[html] view plaincopy
  1. <div id="mm" class="easyui-menu" style="width:150px;">    
  2.         <div id="mm-tabclose">关闭</div>    
  3.         <div id="mm-tabcloseall">关闭全部</div>    
  4.         <div id="mm-tabcloseother">关闭其他</div>    
  5.         <div class="menu-sep"></div>    
  6.         <div id="mm-tabcloseright">关闭右侧标签</div>    
  7.         <div id="mm-tabcloseleft">关闭左侧标签</div>    
  8.     </div>    

页面初始化时绑定各种事件

[html] view plaincopy
  1. $(function(){    
  2.     bindTabEvent();    
  3.     bindTabMenuEvent();    
  4. });    

Java代码 

[html] view plaincopy
  1. //绑定tab的双击事件、右键事件    
  2. function bindTabEvent(){    
  3.     $(".tabs-inner").live('dblclick',function(){    
  4.         var subtitle = $(this).children("span").text();    
  5.         if($(this).next().is('.tabs-close')){    
  6.             $('#tabs').tabs('close',subtitle);    
  7.         }    
  8.     });    
  9.     $(".tabs-inner").live('contextmenu',function(e){    
  10.         $('#mm').menu('show', {    
  11.             left: e.pageX,    
  12.             top: e.pageY    
  13.      });    
  14.      var subtitle =$(this).children("span").text();    
  15.      $('#mm').data("currtab",subtitle);    
  16.      return false;    
  17.     });    
  18.  }    


Js代码

  

[html] view plaincopy
  1. //绑定tab右键菜单事件    
  2. function bindTabMenuEvent() {    
  3.     //关闭当前    
  4.     $('#mm-tabclose').click(function() {    
  5.         var currtab_title = $('#mm').data("currtab");    
  6.         if ($(this).next().is('.tabs-close')) {    
  7.             $('#tabs').tabs('close', currtab_title);    
  8.         }    
  9.     });    
  10.     //全部关闭    
  11.     $('#mm-tabcloseall').click(function() {    
  12.         $('.tabs-inner span').each(function(i, n) {    
  13.             if ($(this).parent().next().is('.tabs-close')) {    
  14.                 var t = $(n).text();    
  15.                 $('#tabs').tabs('close', t);    
  16.             }    
  17.         });    
  18.     });    
  19.     //关闭除当前之外的TAB    
  20.     $('#mm-tabcloseother').click(function() {    
  21.         var currtab_title = $('#mm').data("currtab");    
  22.         $('.tabs-inner span').each(function(i, n) {    
  23.             if ($(this).parent().next().is('.tabs-close')) {    
  24.                 var t = $(n).text();    
  25.                 if (t != currtab_title)    
  26.                     $('#tabs').tabs('close', t);    
  27.             }    
  28.         });    
  29.     });    
  30.     //关闭当前右侧的TAB    
  31.     $('#mm-tabcloseright').click(function() {    
  32.         var nextall = $('.tabs-selected').nextAll();    
  33.         if (nextall.length == 0) {    
  34.             alert('已经是最后一个了');    
  35.             return false;    
  36.         }    
  37.         nextall.each(function(i, n) {    
  38.             if ($('a.tabs-close', $(n)).length > 0) {    
  39.                 var t = $('a:eq(0) span', $(n)).text();    
  40.                 $('#tabs').tabs('close', t);    
  41.             }    
  42.         });    
  43.         return false;    
  44.     });    
  45.     //关闭当前左侧的TAB    
  46.     $('#mm-tabcloseleft').click(function() {    
  47.         var prevall = $('.tabs-selected').prevAll();    
  48.         if (prevall.length == 1) {    
  49.             alert('已经是第一个了');    
  50.             return false;    
  51.         }    
  52.         prevall.each(function(i, n) {    
  53.             if ($('a.tabs-close', $(n)).length > 0) {    
  54.                 var t = $('a:eq(0) span', $(n)).text();    
  55.                 $('#tabs').tabs('close', t);    
  56.             }    
  57.         });    
  58.         return false;    
  59.     });    
  60. }   

第二种方法

出处:http://www.cnblogs.com/yeminglong/p/3745914.html

但是方法比较繁琐

复制代码
<!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>
                    我的博客地址:http://www.cnblogs.com/yeminglong/p/3745914.html
                    
                    </h3>
            </div>
        </div>
    </div>
    <div id="mm" class="easyui-menu" style="width:120px;">
         <div id="mm-tabclose" 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>
    <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", curTabTitle);
                    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", curTabTitle);
                    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;
            }

        }

第三种方法

出处:http://blog.csdn.net/liuzheng2684/article/details/7196990

兼容且方便

加入了右击TAB选项卡时显示关闭的上下文菜单

具体实现代码:

右键菜单 HTML:

<div id="mm" class="easyui-menu" style="width:150px;">
        <div id="mm-tabclose">关闭</div>
        <div id="mm-tabcloseall">全部关闭</div>
        <div id="mm-tabcloseother">除此之外全部关闭</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright">当前页右侧全部关闭</div>
        <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
        
</div>

下面是js代码:

$(function(){
tabClose();
    tabCloseEven();
})

function tabClose()
{
    /*双击关闭TAB选项卡*/
    $(".tabs-inner").dblclick(function(){
        var subtitle = $(this).children("span").text();
        $('#tabs').tabs('close',subtitle);
    })

    $(".tabs-inner").bind('contextmenu',function(e){
        $('#mm').menu('show', {
            left: e.pageX,
            top: e.pageY,
        });
        
        var subtitle =$(this).children("span").text();
        $('#mm').data("currtab",subtitle);
        
        return false;
    });
}
//绑定右键菜单事件
function tabCloseEven()
{
    //关闭当前
    $('#mm-tabclose').click(function(){
        var currtab_title = $('#mm').data("currtab");
        $('#tabs').tabs('close',currtab_title);
    })
    //全部关闭
    $('#mm-tabcloseall').click(function(){
        $('.tabs-inner span').each(function(i,n){
            var t = $(n).text();
            $('#tabs').tabs('close',t);
        });    
    });
    //关闭除当前之外的TAB
    $('#mm-tabcloseother').click(function(){
        var currtab_title = $('#mm').data("currtab");
        $('.tabs-inner span').each(function(i,n){
            var t = $(n).text();
            if(t!=currtab_title)
                $('#tabs').tabs('close',t);
        });    
    });
    //关闭当前右侧的TAB
    $('#mm-tabcloseright').click(function(){
        var nextall = $('.tabs-selected').nextAll();
        if(nextall.length==0){
            //msgShow('系统提示','后边没有啦~~','error');
            alert('后边没有啦~~');
            return false;
        }
        nextall.each(function(i,n){
            var t=$('a:eq(0) span',$(n)).text();
            $('#tabs').tabs('close',t);
        });
        return false;
    });
    //关闭当前左侧的TAB
    $('#mm-tabcloseleft').click(function(){
        var prevall = $('.tabs-selected').prevAll();
        if(prevall.length==0){
            alert('到头了,前边没有啦~~');
            return false;
        }
        prevall.each(function(i,n){
            var t=$('a:eq(0) span',$(n)).text();
            $('#tabs').tabs('close',t);
        });
        return false;
    });
}



EasyUI学习之menu and button(菜单和按钮)

前言     今天下午的天气感觉格外的气闷,整个人有一种黏糊糊的感觉,格外的不舒服。加之马上要放假了了,感觉自己完全坐不住呢(节前综合症么)。不过学习还是的继续的。      原定计划这篇文章本来...
  • kiritor
  • kiritor
  • 2014年06月04日 09:37
  • 8493

EasyUI基本使用——(tabs右键菜单)

$.fn.contextMenus=function(){ var $tabs=$(this); var temphtml=''+ '
  • xundh
  • xundh
  • 2015年07月12日 00:02
  • 2162

easyui为tabs添加右键菜单

 在使用easyui-tabs时,当我们打开许多个tab后,我们希望也能像浏览器窗口一样有一个右键菜单,包含关闭全部、关闭当前、关闭右侧等操作,该文就讲述如何实现此功能。 挂上...
  • sunny_lv
  • sunny_lv
  • 2016年01月12日 15:03
  • 1150

EasyUI基本使用——(tabs右键菜单)

$.fn.contextMenus=function(){ var $tabs=$(this); var temphtml=''+ '
  • xundh
  • xundh
  • 2015年07月12日 00:02
  • 2162

easyui的tabs右键关闭菜单

近期研究了下MenuButton,有了新的感悟,原先在那个DEMO中右键支持做法,现在看来真是小儿科啊! 前期的准备工作: 1、下载DEMO源码,并升级为最新版本(jquery 1.7.2...
  • LanSeTianKong12
  • LanSeTianKong12
  • 2016年09月19日 12:01
  • 1595

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

我看到的原文地址:http://www.cnblogs.com/yeminglong/p/3745914.html,非常感谢这位大神 在网上看了很多demo 自己实现了一个效果如下 ps jque...
  • zhchyun2008
  • zhchyun2008
  • 2016年11月16日 16:11
  • 242

JQuery EasyUI Tree和tab右键菜单实现

$( function () {      // 动态菜单数据      var treeData = [{             text : "菜单",     ...
  • dyllove98
  • dyllove98
  • 2013年04月30日 10:55
  • 4061

JQuery EasyUI 最简单的左右布局实现及tab的右键菜单实现

发现最近有些人问用JQuery easyui要怎么实现左右结构的布局。就是点击左边的菜单在右边的tab中打开。其实easyui要实现这种布局很简单,只需要简单的几行代码就ok了。 特意做了一个小...
  • chenchudongsg
  • chenchudongsg
  • 2014年09月20日 10:29
  • 1076

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

为jQuery-easyui的tab组件添加右键菜单功能 2011-04-08 14:09 jQuery中的easyui插件包的tab标签组件,挺不错的,下面介绍如何为...
  • liuzheng2684
  • liuzheng2684
  • 2012年01月12日 17:38
  • 4645

JQuery EasyUI 最简单的左右布局实现及tab的右键菜单实现

发现最近有些人问用JQuery easyui要怎么实现左右结构的布局。就是点击左边的菜单在右边的tab中打开。其实easyui要实现这种布局很简单,只需要简单的几行代码就ok了。 特意做了一个小小的...
  • szyone
  • szyone
  • 2013年07月04日 14:37
  • 1667
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui-tab 加载右键菜单
举报原因:
原因补充:

(最多只允许输入30个字)