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之tab标签显示页面内容

tab标签显示页面内容

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

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

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

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

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

为jQuery-easyui的tab组件添加右键菜单功能 2011-04-08 14:09 jQuery中的easyui插件包的tab标签组件,挺不错的,下面介绍如何为...

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

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

使用dtree生成的树结构,ajax动态加载子节点后,如何绑定右键菜单?求助

我现在出现的问题是第一个节点可以绑定contextMenu,但是当点击完此节点加载完其子节点后,右键菜单就失效了,请高手指教,如何在子节点动态加载后都能绑定contextMenu? js代码: var...

ztree完美整合easyui右键菜单

转自:http://www.crazyit.org/thread-9510-1-1.html 本人最近工作之余在研究张其纲老师的zTree,觉得很好用,发现demo中的右键菜单不太好看,而且代码比较...

easyui为tabs添加右键菜单

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

【干货】jsMind思维导图整合Easyui的右键菜单

原材料: 1、web版本的JavaScript思维导图(BSD开源协议)【戳这里去官网】。 2、easyui最新版【戳这里去官网】。   这里是原本的jsMind: 在线测试地址 :ht...

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

$.fn.contextMenus=function(){ var $tabs=$(this); var temphtml=''+ '
  • xundh
  • xundh
  • 2015年07月12日 00:02
  • 1951
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui-tab 加载右键菜单
举报原因:
原因补充:

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