一个根据 EasyUI 的前台架构(5)右键快捷菜单

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

 

  这段代码实现了在增选项卡标签上单击右键的早晚装该选项卡为当选状态EasyUI,并弹来拖欠高速菜单。

  (注:.tabs 元素是 Tabs 中标签列表的器皿对象 UL,所以这边运用那下的
LI 元素选中所有标签项。。因为选项卡标签是动态增长的,所以这边不可知采取
bind 方法呢那绑定事件,而动 live 方法为该绑定事件)

  执行下效果使图:

  当然,单击相应的小菜单项以后就是见面实施相应操作。

 

  (注:以后在该类型受到以的组成部分功效还拿运右键菜单来促成)

 

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