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

最新推荐文章于 2023-02-24 08:22:39 发布

ZChangfeng

最新推荐文章于 2023-02-24 08:22:39 发布

阅读量429

点赞数

分类专栏： jquery

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

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

<div id="menu" class="easyui-menu" style="width:150px;">
    <div id="m-refresh">刷新</div>
    <div class="menu-sep"></div>
    <div id="m-closeall">全部关闭</div>
    <div id="m-closeother">除此之外全部关闭</div>
    <div class="menu-sep"></div>
    <div id="m-close">关闭</div>
</div>

　　这样就在页面中添加了一个右键菜单。该菜单一共有 4 个菜单项，另外还有两个 class 属性为 menu-sep 的 DIV，这两个DIV是两个分隔符，可以将这些菜单项从视觉上分为三组。

　　当然，快捷菜单需要在触发鼠标事件的时候才显示，所以我们在这里在页面中添加一个按钮，其 id 属性为 btn。并在页面中 <script> 标签中添加如下代码：

$(function(){
    $("#btn").click(function(e){        
        $('#menu').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    });
});

　　这样在使用鼠标单击该按扭的时候，就会显示该快捷菜单，效果如图：

　　如何，是不是非常 beautiful ！

　　当然，右键菜单也得用到实用的地方。这里我就使用该右键菜单来对 Tabs 实现“刷新”、“全部关闭”、“除此之外全部关闭”、“关闭”等操作。

　　实现这些操作，需要对这 4 个 div 添加单击事件，所以我们需要添加如下一段代码（因为是用于操作 Tabs 的，所以这里将其追加到 tabs.js 文件中）：

$(function(){

    //刷新
    $("#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;
    });
});