在网上看了很多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. ANT 发布项目中 build.xml 文件的详细配置

    xml 代码 <?xml version="1.0" encoding="UTF-8"?> <!-- name:对应工程名字 default: ...

  2. bjfu1299 stl使用

    题目超简单,我写解题报告是因为我的代码用了些STL,使代码很简洁. * * Author : ben */ #include <cstdio> #include <cstdlib&g ...

  3. FreeMarker笔记 第二章 数值和类型

    2.1 基本内容 2.1.1 简介 2.1.2 什么是数值 和程序语言中的数值类型是相似的. 2.1.3 什么是类型? 2.1.4 数据模型是哈希表 2.2 类型 2.2.1 简介 2.2.2 标量 ...

  4. linux 学习网站

    study-Area:http://www.study-area.org 鸟哥的私房菜:http://linux.vbird.org 鸟哥的私房菜课后答案:http://wapwenku.baidu. ...

  5. git初步使用

    git初步使用 主要目的:使用代码控制工具,练习使用git 1.创建新项目 网址如下: https://github.com/kellyseeme?tab=repositories 注意每个人使用的名 ...

  6. ListView蛮好用

    知识点如下: 1. ListView的基本用法 2. ArrayAdapter和SimpleAdapter的用法 3. OnScrollListener 和 OnItemClickListener 4 ...

  7. HTML5标签改变

    1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...

  8. Nodejs开发指南-笔记

    第三章 异步式I/O与事件编程3.1 npm install -g supervisor supervisor app.js 当后台修改代码后,服务器自动重启,生效修改的代码,不用手动停止/启动3.2 ...

  9. Principles of good RESTful API Design 好的 RESTful API 设计

    UPDATE: This post has been expanded upon and converted into an eBook. Good API design is hard! An AP ...

  10. 第二百一十五、六天 how can I 坚持

    昨天刷机刷到很晚,博客都忘写了,刷了个flyme,用着没什么感觉,今天打电话试了下还有破音,有点小后悔.不行过两天再刷回来. 今天.mysql ifnull函数. 两条熊猫鱼都死了,这两天雾霾那么严重 ...