easyui的tabs右键关闭菜单

男娘i 2022-09-26 03:07 299阅读 0赞

近期研究了下MenuButton,有了新的感悟，原先在那个[DEMO][]中右键支持做法，现在看来真是小儿科啊！

前期的准备工作：

1、下载DEMO源码，并升级为最新版本（jquery 1.7.2,Easyui 1.2.6）,直接替换就可以啦，升级easyui 是的要把css js theme 全部替换

2、在首页的HTML代码中：将

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

1 <div id="mm" class="easyui-menu" style="width:150px;">
     2         <div id="mm-tabupdate">刷新</div>
     3         <div class="menu-sep"></div>
     4         <div id="mm-tabclose">关闭</div>
     5         <div id="mm-tabcloseall">全部关闭</div>
     6         <div id="mm-tabcloseother">除此之外全部关闭</div>
     7         <div class="menu-sep"></div>
     8         <div id="mm-tabcloseright">当前页右侧全部关闭</div>
     9         <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
    10         <div class="menu-sep"></div>
    11         <div id="mm-exit">退出</div>
    12 </div>

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

改为：

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

1 <div id="mm" class="easyui-menu" style="width:150px;">
     2         <div id="refresh">刷新</div>
     3         <div class="menu-sep"></div>
     4         <div id="close">关闭</div>
     5         <div id="closeall">全部关闭</div>
     6         <div id="closeother">除此之外全部关闭</div>
     7         <div class="menu-sep"></div>
     8         <div id="closeright">当前页右侧全部关闭</div>
     9         <div id="closeleft">当前页左侧全部关闭</div>
    10         <div class="menu-sep"></div>
    11         <div id="exit">退出</div>
    12 </div>

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

outlook2.js 中添加新方法如下：

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

function closeTab(action)
    {
        var alltabs = $('#tabs').tabs('tabs');
        var currentTab =$('#tabs').tabs('getSelected');
        var allTabtitle = [];
        $.each(alltabs,function(i,n){
            allTabtitle.push($(n).panel('options').title);
        })
    
    
        switch (action) {
            case "refresh":
                var iframe = $(currentTab.panel('options').content);
                var src = iframe.attr('src');
                $('#tabs').tabs('update', {
                    tab: currentTab,
                    options: {
                        content: createFrame(src)
                    }
                })
                break;
            case "close":
                var currtab_title = currentTab.panel('options').title;
                $('#tabs').tabs('close', currtab_title);
                break;
            case "closeall":
                $.each(allTabtitle, function (i, n) {
                    if (n != onlyOpenTitle){
                        $('#tabs').tabs('close', n);
                    }
                });
                break;
            case "closeother":
                var currtab_title = currentTab.panel('options').title;
                $.each(allTabtitle, function (i, n) {
                    if (n != currtab_title && n != onlyOpenTitle)
                    {
                        $('#tabs').tabs('close', n);
                    }
                });
                break;
            case "closeright":
                var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
    
                if (tabIndex == alltabs.length - 1){
                    alert('亲，后边没有啦 ^@^!!');
                    return false;
                }
                $.each(allTabtitle, function (i, n) {
                    if (i > tabIndex) {
                        if (n != onlyOpenTitle){
                            $('#tabs').tabs('close', n);
                        }
                    }
                });
    
                break;
            case "closeleft":
                var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
                if (tabIndex == 1) {
                    alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');
                    return false;
                }
                $.each(allTabtitle, function (i, n) {
                    if (i < tabIndex) {
                        if (n != onlyOpenTitle){
                            $('#tabs').tabs('close', n);
                        }
                    }
                });
    
                break;
            case "exit":
                $('#closeMenu').menu('hide');
                break;
        }
    }

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

将js中tabCloseEven 方法 改为

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

function tabCloseEven() {
        $('#mm').menu({
            onClick: function (item) {
                closeTab(item.id);
            }
        });
    
        return false;
    }

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

这样就OK啦，代码比原来优雅多啦！

调用刷新，关闭当前标签时，就调用 closeTab(‘action’) //action 可以为 refresh（刷新）,close（关闭）

iframe 中使用时，要这么屎 top.closeTab('action');

[DEMO]: http://www.cnblogs.com/hxling/archive/2011/01/17/1937357.html
[copycode.gif]: /images/20220717/0e5ea62316b64e95a6c02ed3bb527e73.png

发表评论取消回复

表情：

评论列表（有 0 条评论，299人围观）

还没有评论，来说两句吧...

相关阅读

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

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

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

相关 easyui的tabs右键关闭菜单

近期研究了下MenuButton,有了新的感悟，原先在那个[DEMO][]中右键支持做法，现在看来真是小儿科啊！前期的准备工作： 1、下载DEMO源码，并升级为最新版本（

男娘i/ 2022年09月26日 03:07/ 0 赞/ 300 阅读

相关右键菜单

.h: afx\_msg void OnContextMenu(CWnd\ pWnd, CPoint point); afx\_msg void OnCopy();

青旅半醒/ 2022年08月27日 03:38/ 0 赞/ 334 阅读

相关 MFC右键菜单

原文档地址：[http://wenku.baidu.com/view/f7fdc60a6c85ec3a87c2c5d1.html][http_wenku.baidu.com

男娘i/ 2022年08月05日 11:29/ 0 赞/ 275 阅读

相关【easyUI】批量关闭tabs

我是干货（代码） function closeAll(){ var t = $(mainTabs); var ti

向右看齐/ 2022年06月15日 22:13/ 0 赞/ 271 阅读

相关 easyui中在datagrid中右键出现菜单

onRowContextMenu，easyui提供了这个方法，来实现右键出现菜单。其中给了三个参数：e,index,row. 大多数人会出现这样的问题，你发现，当你

骑猪看日落/ 2022年06月09日 04:22/ 0 赞/ 279 阅读

相关 easyUI选项卡—右键关闭tabs

今天在改一个easyUI界面时，有个这样的需求，要我通过在选项卡上绑定一个右击事件，做到tabs全部关闭，或关闭左右变的。因为自己对easyUI不是很熟，导致搞这个功能花了比较

妖狐艹你老母/ 2022年05月28日 11:07/ 0 赞/ 382 阅读

相关 layui tab标签右键关闭菜单

layui tab标签右键关闭菜单，包括：关闭当前（closethis）、关闭所有（closeall）、关闭其它（closeothers）、关闭左侧所有（closelef

秒速五厘米/ 2022年02月27日 01:24/ 0 赞/ 1124 阅读

相关 easyui-tabs关闭页面

easyui-tabs中iframe了个页面，作为修改内容的页面，修改完了保存后，需要关闭这个panel 不知道怎么关闭，看了API，用close方法无法实现

àì夳堔傛蜴生んèń/ 2022年01月05日 12:21/ 0 赞/ 312 阅读

相关 EasyUI 界面中tab页右键快捷菜单

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

系统管理员/ 2021年05月12日 11:51/ 0 赞/ 486 阅读