在网上看了很多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. Drupal如何更新注册表？

    Drupal的注册表是指registry和registry_file两个数据表.前一个表保存所有可用的类和接口以及它们所对应的文件,后一个表保存每个文件的hash码. 1. 将所有需要更新的文件都汇总 ...

  2. OpenCV安装要点

    OpenCV安装要点1.设置系统和用户环境变量PATH指向opencv\build\x86\vc10\bin或者opencv\build\x64\vc10\bin2.新建用户环境变量OpenCV指向o ...

  3. 使用ncc分析代码

    1 ncc是一个编译器, 用于输出程序的一些调用信息等, 可以查看函数调用关系, 支持函数指针, 查看数据结构和代码. 可以用来分析和理解代码. “" ... with ncc, in le ...

  4. ASP.NET下跨应用共享Session和使用Redis进行Session托管简介

    在之前的博客中,我说到了Session的共享问题,其中说到了Web Farm和Web Garden两种情况下Session的处理.在ASP.NET提供的Session处理方法中,有以下四种模式: 1. ...

  5. ubuntu下Qt cannot find -lGL错误的解决方法 （转载）

    在ubuntu下使用Qt 编译时候遇上了cannot find -lGL错误,使用命令 sudo apt-get install libqt4-dev或者sudo apt-get install li ...

  6. 14个超赞的响应式HTML5模板免费下载

    现在HTML5已经势不可挡.很多朋友开始学习HTML5,当你已经学习过一些HTML5的教程之后,是不是想立即开始实战了呢?对,现在就开始吧,不过 找一些优秀的HTML5模板案例练习是相当不错的注意.当 ...

  7. 快速入门linux系统的iptables防火墙 1 本机与外界的基本通信管理

    概述 iptables是一种运行在linux下的防火墙组件,下面的介绍可以快速的学习iptables的入门使用. 特点(重要) 它的工作逻辑分为 链.表.规则三层结构. 数据包通过的时候,在对应表中, ...

  8. IE 兼容性写法

    1. 条件注释语句 <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE ...

  9. sql-labs 分享

    前段时间在网上发现了一个阿三同学托管在github上的sql注入入门科普项目,感觉挺不错,在此分享一下.虽然现在有很多工具比如sqlmap可以实现自动化的sql注入,但是个人感觉如果只知其然而不知其所 ...

  10. 20160512关于mac安装caffe的记录

    记得2015年在mac系统上安装过一次caffe,非常顺利,但是最近群里许多同学反映mac安装caffe出现了各种问题,同时我也在帮助别人安装caffe的时候也遇到了一些坑,不再像以前这么顺利了.估计 ...