使用菜单组件Menu写一个右键菜单

来源：互联网发布：网络教育属于函授吗编辑：程序博客网时间：2024/06/03 16:30

右键菜单：菜单组件Menu

关闭选项卡的右键菜单

第一种：

<div id="mm" class="easyui-menu" style="width:120px;">    <div id="mm-tabclosrefresh" data-options="name:6">刷新</div>    <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>

js判断

<script type="text/javascript">    //监听右键事件，创建右键菜单、myTab是我的选项卡的ID             $('#myTab').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 );      }   });      //删除Tabs     function closeTab(menu, type) {        var allTabs = $("#myTab").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 = $("#myTab").tabs("getTabIndex", $("#myTab").tabs("getTab", curTabTitle));        switch (type) {            case 1:                $("#myTab").tabs("close", curTabIndex);                return false;                break;            case 2:                for (var i = 0; i < allTabtitle.length; i++) {                    $('#myTab').tabs('close', allTabtitle[i]);                }                break;            case 3:                for (var i = 0; i < allTabtitle.length; i++) {                    if (curTabTitle != allTabtitle[i])                        $('#myTab').tabs('close', allTabtitle[i]);                }                $('#myTab').tabs('select', curTabTitle);                break;            case 4:                for (var i = curTabIndex; i < allTabtitle.length; i++) {                    $('#myTab').tabs('close', allTabtitle[i]);                }                $('#myTab').tabs('select', curTabTitle);                break;            case 5:                for (var i = 0; i < curTabIndex-1; i++) {                    $('#myTab').tabs('close', allTabtitle[i]);                }                $('#myTab').tabs('select', curTabTitle);                break;            case 6: //刷新                var panel = $("#myTab").tabs("getTab", curTabTitle).panel("refresh");                break;        }    }     </script>

第二种：

<div id="mm" class="easyui-menu"><div id="closeCurrent" data-options="iconCls:'icon-no'">关闭当前</div><div id="closeOthers" data-options="iconCls:'icon-no'">关闭其它</div><div id="closeAll" data-options="iconCls:'icon-no'">关闭所有</div></div>

js判断

$('#myTab').tabs({    onContextMenu: function(e, title, index){    e.preventDefault();    //选中标签    $('#myTab').tabs('select',index);    //显示右键菜单    $('#mm').menu('show', {     left: e.pageX,     top: e.pageY    }) ;    }});//为每个菜单绑定点击事件  //关闭选中的标签  $("#closeCurrent").click(function(){   //获取选中的标签索引   var tab = $('#myTab').tabs('getSelected');   var index = $('#myTab').tabs('getTabIndex',tab);   $("#myTab").tabs("close",index);  });   //关闭选中标签之外的标签   $("#closeOthers").click(function(){    //获取所有标签    var tabs = $("#myTab").tabs("tabs");    var length = tabs.length;    //获取选中标签的索引    var tab = $('#myTab').tabs('getSelected');    var index = $('#myTab').tabs('getTabIndex',tab);    //关闭选中标签之前的标签    for(var i=0;i<index;i++){    $("#myTab").tabs("close",0);    }    //关闭选中标签之后的标签    for(var i=0;i<length-index-1;i++){     $("#myTab").tabs("close",1);    }   });   //关闭所有标签   $("#closeAll").click(function(){    var tabs = $("#myTab").tabs("tabs");    var length = tabs.length;    for(var i=0;i<length;i++){     $("#myTab").tabs("close",0);    }   });

阅读全文

0 0