在网上看了很多demo 自己实现了一个效果如下

<!doctype html>

<html>

<head>

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

    <title>tabs 右键菜单</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 右键菜单</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></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>

完善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;

            }

        }

via:http://www.cnblogs.com/yeminglong/p/3745914.html

EasyUI-Tab 标签添加右键菜单的更多相关文章

  1. EasyUI 的Tab 标签添加右键菜单

    样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href=& ...

  2. 为EasyUI 的Tab 标签添加右键菜单

    在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群:15129679 <!doctype html> ...

  3. easyui tab上面添加右键菜单

    说扩展,我觉得有点过了,只是加入了右击TAB选项卡时显示关闭的上下文菜单,先看下效果图: 具体实现代码: 右键菜单 HTML: <div id="mm" class=&quo ...

  4. 仅在TabControl中的Tab中添加右键菜单

    若想实现仅在TabControl中的Tab中添加右键菜单,可在XAML中通过使用样式得到: <TabControl> <TabControl.ItemContainerStyle&g ...

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

    加入了右击TAB选项卡时显示关闭的上下文菜单 具体实现代码: 右键菜单 HTML: <div id="mm" class="easyui-menu" st ...

  6. 给jquery easy-ui 添加右键菜单

    版权声明:转自为EasyUI 的Tab 标签添加右键菜单

  7. 使用easyui为tab页增加右键菜单

    在使用easyui进行上左右布局一文中,我们已经使用easyui搭建起了一个简单的上左右布局.在使用的过程中,我们经常会遇到tab页打开的太多,但只能一个一个的关闭的烦恼,这个时候有没有想到eclip ...

  8. NX二次开发-自定义添加右键菜单RegisterConfigureContextMenuCallback

    首先声明这个知识我以前不知道,是夏天的时候看到别人在唐工的QQ群里问的,唐工说西门子官方有这个例子.那个时候我因为在忙其他事情,也就没去研究那个右键菜单到底是怎么做的.关于自定义添加右键菜单Regis ...

  9. pyqt5-为QListWidget添加右键菜单

    如何在pyqt5下为QListWidget添加右键菜单? 能百度到的均是pyqt4下的,有些貌似并不好用. 在尝试了很多方法后,下面贴出可用的方法: from PyQt4 import QtCore, ...

随机推荐

  1. 工具栏ToolStrip能触发焦点控件的Leave、Validating、DataError等事件以验证数据 z

    public class ToolStripEx : ToolStrip { protected override void OnClick(EventArgs e) { base.OnClick(e ...

  2. Java并发编程-可重入锁

    可重入锁,也叫做递归锁,指的是同一线程 外层函数获得锁之后 ,内层递归函数仍可以获取该锁而不受影响.在JAVA环境下 ReentrantLock 和synchronized 都是 可重入锁. publ ...

  3. hihocoder 1356 分隔相同整数 简单贪心

    分析:考虑贪心,考虑填ans[i],前i-1个合法,现在剩下一些数, 那么挑出出现次数最多的数,次数为mx,当前剩余总数为sum 如果sum-mx>=mx-1那么肯定有解,这个想想就知道了(这种 ...

  4. 错误记录：html隐藏域的值存字符串时出错

    问题 webform在后台给前台传值.  <input type="hidden" value="<%=userType %>" id=&qu ...

  5. Monitor traffic to localhost from IE or .NET

    原文:http://docs.telerik.com/fiddler/Configure-Fiddler/Tasks/MonitorLocalTraffic Monitor traffic to lo ...

  6. 【LeetCode】165 - Compare Version Numbers

    Compare two version numbers version1 and version2.If version1 > version2 return 1, if version1 &l ...

  7. BITED数学建模七日谈之四：数学模型分类浅谈

    本文进入到数学建模七日谈第四天:数学模型分类浅谈 大家常常问道,数学模型到底有哪些,分别该怎么学习,这样能让我们的学习有的放矢,而不至于没了方向.我想告诉大家,现实生活中的问题有哪些类,数学模型就有哪 ...

  8. Windows Azure 设置虚拟机静态外网IP地址

    官方说法叫做“虚拟公共IP地址保留”,为容易理解,我们称之为静态外网IP地址. 如果在国内使用国际版Windows Azure服务时强烈推荐为虚拟机设置IP地址保留. 由于Windows Azure ...

  9. 在适配iPhone 6 Plus屏幕的时候，模拟器上两边有很细的白边如何解决

    取消掉Constrain to margin 然后添加左右约束 版权声明:本文为博主原创文章,未经博主允许不得转载.    

  10. Linux下动态库生成和使用

    Linux下动态库生成和使用 一.动态库的基本概念 1.动态链接库是程序运行时加载的库,当动态链接库正确安装后,所有的程序都可以使用动态库来运行程序.动态链接库是目标文件的集合,目标文件在动态链接库中 ...