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

刺骨的言语ヽ痛彻心扉 2023-08-17 16:38 116阅读 0赞

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

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

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

![复制代码][copycode.gif]

<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>

![复制代码][copycode.gif]

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

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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

![2011122700174033.jpg][]

如何，是不是非常 beautiful ！

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

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

![复制代码][copycode.gif]

$(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);
        });
    });

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

$(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;
        });
    });

![复制代码][copycode.gif]

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

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

执行以后效果如图：

![2011122701162297.jpg][]

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

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

[copycode.gif]: /images/20230809/d00582ad1d7e4c1b839aba6db7f1b32a.png
[2011122700174033.jpg]: /images/20230809/46161d165f734fd4bc29512af3053932.png
[2011122701162297.jpg]: /images/20230809/e5d4d0227dd34c75accbb41763e782dc.png