在网上看了很多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. 企业网站DDOS防护解决方案

    随着网络的普及,越来越多的企业开始了上网之路,由于网络安全知识的欠缺,很多企业以为做一个网站就 等于 网络化了,于是狠花血本请专业网络公司制作出各种漂亮的网页.但做完才发现,网络上的各种漏洞的DDOS ...

  2. SoapUI中Groovy的实用方法

    1.依照上次结果判断下步是否执行: import com.eviware.soapui.model.testsuite.TestStepResult.TestStepStatus myTestStep ...

  3. org.unsaved transient instance - save the transient instance before flushing: bug解决方案

    最近开发和学习过程中,遇到很多零碎的知识点,在此简单地记录下: 1.遇如下bug: org.unsaved transient instance - save the transient instan ...

  4. WMI使用的WIN32_类库名

    WMI使用的WIN32_类库名 包括:硬件类.操作系统类.安装应用程序类.WMI服务管理类.性能计数器类1.硬件类冷却类别Win32_Fan--风扇Win32_HeatPipe--热管Win32_Re ...

  5. Scrum之Sprint会议

    Scrum的项目过程有一系列的Sprint组成. Sprint的长度一般控制在2-4周. 通过固定的周期保持良好的节奏. 产品的设计.开发.测试都在Sprint期间完成. Sprint结束时交付可以工 ...

  6. 【openstack报错】【因更新包而致】IncompatibleObjectVersion: Version 1.9 of Instance is not supported

    [时间]2014年2月18日 [平台]ubuntu 12.04.3 openstack havana [日志]/var/log/upstart/nova-compute.log  内容如下: ERRO ...

  7. poj 1003 Hangover

    #include <iostream> using namespace std; int main() { double len; while(cin >> len & ...

  8. 前端复习－01-dom操作包括ie和现代浏览器处理相关

    一.事件流事件流描述的是从页面中接受事件的顺序.IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流1.事件冒泡事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然 ...

  9. Spark RDD概念学习系列之RDD的创建（六）

    RDD的创建  两种方式来创建RDD: 1)由一个已经存在的Scala集合创建 2)由外部存储系统的数据集创建,包括本地文件系统,还有所有Hadoop支持的数据集,比如HDFS.Cassandra.H ...

  10. c#通过操作mongodb gridfs实现文件的数据库存储

    @(编程) 源码 using MongoDB.Driver; using MongoDB.Driver.GridFS; using System.IO; namespace Wisdombud.Mon ...