一个基于 EasyUI 的前台架构（5）右键快捷菜单

　　Windows 用户通常习惯使用快捷菜单来实现一些常用的用户操作。很荣幸 EasyUI 也提供了一个右键菜单的插件——Menu。

　　EasyUI 中的 Menu 可以使用户方便的实现一个 Windows 风格的右键菜单，我们只需要编写菜单项的内容，并对菜单项容器设置相应的 Class 类 easyui-menu，即可实现一个漂亮的右键快捷菜单。

　　比如在页面中添加如下代码： 

<div id="menu"  >    //刷新
    $("#m-refresh").click(function(){
        var currTab = $('#tabs').tabs('getSelected');    //获取选中的标签项
        var url = $(currTab.panel('options').content).attr('src');    //获取该选项卡中内容标签（iframe）的 src 属性
        /* 重新设置该标签 */
        $('#tabs').tabs('update',{
            tab:currTab,
            options:{
                content: createTabContent(url)
            }
        })
    });
    
    //关闭所有
    $("#m-closeall").click(function(){
        $(".tabs li").each(function(i, n){
            var title = $(n).text();
            $('#tabs').tabs('close',title);    
        });
    });
    
    //除当前之外关闭所有
    $("#m-closeother").click(function(){
        var currTab = $('#tabs').tabs('getSelected');
        currTitle = currTab.panel('options').title;    
        
        $(".tabs li").each(function(i, n){
            var title = $(n).text();
            
            if(currTitle != title){
                $('#tabs').tabs('close',title);            
            }
        });
    });
    
    //关闭当前
    $("#m-close").click(function(){
        var currTab = $('#tabs').tabs('getSelected');
        currTitle = currTab.panel('options').title;    
        $('#tabs').tabs('close', currTitle);
    });
});

　　然后，修改页面中绑定快捷菜单事件的JS代码，如下：

$(function(){
     /*为选项卡绑定右键*/
    $(".tabs li").live('contextmenu',function(e){
        
        /* 选中当前触发事件的选项卡 */
        var subtitle =$(this).text();
        $('#tabs').tabs('select',subtitle);
        
        //显示快捷菜单
        $('#menu').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
        
        return false;
    });
});

　　这段代码实现了在选项卡标签上单击右键的时候设置该选项卡为选中状态，并弹出该快捷菜单。

　　（注：.tabs 元素是 Tabs 中标签列表的容器对象 UL，所以这里使用其下的 LI 元素选中所有标签项。。因为选项卡标签是动态添加的，所以这里不能使用 bind 方法为其绑定事件，而使用 live 方法为其绑定事件）

　　执行以后效果如图：

　　当然，单击相应的菜单项以后就会执行相应操作。

　　（注：以后在该项目中使用的一些功能都将使用右键菜单来实现）

 附源码：http://files.cnblogs.com/zhhh/HTML.zip

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：一个基于 EasyUI 的前台架构（5）右键快捷菜单

关键词：架构