为EasyUI 的Tab 标签添加右键菜单（转）

来源：互联网发布：js文本框只能输入整数编辑：程序博客网时间：2024/06/07 12:44

我看到的原文地址:http://www.cnblogs.com/yeminglong/p/3745914.html，非常感谢这位大神

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

<!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" data-options="name:1">关闭</div>        <div id="mm-tabcloseall" data-options="name:2">全部关闭</div>        <div id="mm-tabcloseother" data-options="name:3">除此之外全部关闭</div>        <div class="menu-sep"></div>        <div id="mm-tabcloseright" data-options="name:4">当前页右侧全部关闭</div>        <div id="mm-tabcloseleft" data-options="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>

后面大神又更新了一下，添加了刷新功能

<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", cutTabIndex);                    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;            }        }

可是，在我本地没有效果。捣鼓半天，才发现是这个switch（） case有问题

应该是这样的

  function closeTab(menu, type) {         var allTabs = $("#mainTabs").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 = $("#mainTabs").tabs("getTabIndex", $("#mainTabs").tabs("getTab", curTabTitle));         switch (type) {             case "1"://关闭当前                 $("#mainTabs").tabs("close", curTabTitle);                 return false;                 break;             case "2"://全部关闭                 for (var i = 0; i < allTabtitle.length; i++) {                     $('#mainTabs').tabs('close', allTabtitle[i]);                 }                 break;             case "3"://除此之外全部关闭                 for (var i = 0; i < allTabtitle.length; i++) {                     if (curTabTitle != allTabtitle[i])                         $('#mainTabs').tabs('close', allTabtitle[i]);                 }                 $('#mainTabs').tabs('select', curTabTitle);                 break;             case "4"://当前侧面右边                 for (var i = curTabIndex; i < allTabtitle.length; i++) {                     $('#mainTabs').tabs('close', allTabtitle[i]);                 }                 $('#mainTabs').tabs('select', curTabTitle);                 break;             case "5": //当前侧面左边                 for (var i = 0; i < curTabIndex - 1; i++) {                     $('#mainTabs').tabs('close', allTabtitle[i]);                 }                 $('#mainTabs').tabs('select', curTabTitle);                 break;             case "6": //刷新                 var panel = $("#mainTabs").tabs("getTab", curTabTitle).panel("refresh");                 break;         }     }

你看到 case “” 引号了吗？是的，就是这个，但是不知道原因。

0 0