摘要 使用easyui-menu插件实现右键菜单关闭tab页，实现更改主题

easyui menu

目录[-]

  • 一、引言
  • 二、右键菜单关闭tab
  • 1．绑定tabs的右键菜单
  • 2. 处理菜单点击事件
  • 三、更改皮肤theme

一、引言

终于坚持写到5了，接下来来点无关痛痒的，觉得没必要可直接跳过。一个系统可能会打开非常多tab页，如果一个一个点小叉叉会比较麻烦，如何一次性关闭？Windows 用户通常习惯使用快捷菜单来实现一些常用的用户操作。很荣幸 EasyUI 也提供了一个右键菜单的插件——Menu。EasyUI 中的 Menu 可以使用户方便的实现一个 Windows 风格的右键菜单，我们只需要编写菜单项的内容，并对菜单项容器设置相应的 Class 类 easyui-menu，即可实现一个漂亮的右键快捷菜单。

Easyui默认提供了5种主题风格的皮肤，接下来要实现一个简单的换肤风格。

二、右键菜单关闭tab

首先需要页面<body></body>中添加了一个右键菜单，代码位置任意。代码如下：

?
1
2
3
4
5
6
<div id="tabsMenu" style="width:150px;">
         <div data-options="name:'close'">关闭</div>
         <div></div>
         <div data-options="name:'closeall'">全部关闭</div>
         <div data-options="name:'closeother'">除此之外全部关闭</div>
</div>

该菜单指定一个id为tabsMenu。一共有 3个菜单项，分别命名为close,closeall,closeother。另外还有1个 class 属性为 menu-sep 的 DIV是分隔符，可以将这些菜单项从视觉上分为2组。

为了实现操作，有两个问题需要解决。首先是要实现tab与该右键菜单的绑定，即关闭选定tab页；其次是要处理点击事件。

1．绑定tabs的右键菜单

从http://www.jeasyui.net/查看tabs插件API我们可以看到它有个onContextMenu事件，该事件在标签页面板被右键点击时触发。它有3个可选参数为e,titile,index。e是javascript内定对象全称event，event代表事件的状态。参考例子代码如下：

?
1
2
3
4
5
6
7
8
9
10
/*绑定tabs的右键菜单*/
$("#tabs").tabs({
     onContextMenu : function (e, title) {
             e.preventDefault();
             $('#tabsMenu').menu('show', {
                     left : e.pageX,
                     top : e.pageY
              }).data("tabTitle", title);
     }
});

其中，e.preventDefault()取消事件默认动作。Easyui-menu插件的show方法是在指定的位置显示菜单（menu），参数是left和top位置。e.pageX则代表鼠标的当前位置。data() 方法向被选元素附加数据，或者从被选元素获取数据。该方法是取tab标签页的名称。

2. 处理菜单点击事件

从http://www.jeasyui.net/查看menu的点击事件为onClick(item),item代表菜单项。注意#tabsMenu应与页面右键菜单id相同。代码如下：

?
1
2
3
4
5
6
/*实例化menu的onClick事件*/
$("#tabsMenu").menu({
     onClick : function (item) {
         CloseTab(this, item.name);
     }
});

接下来就是对关闭tab页的方法进行编写处理代码了，总共3个菜单项，用了if，当然也可以用switch case。代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*右键菜单关闭事件的处理*/ function CloseTab(curTab, itemName) {
    //选中的tab的title     var curTabTitle = $(curTab).data("tabTitle");
    //所有tab     var allTabs = $("#tabs").tabs("tabs");
    //所有tab的title的数组     var allTabsTitle = [];
    //关闭菜单     if (itemName === "close") {
        $("#tabs").tabs("close", curTabTitle);
        return;
    }       
    //遍历所有tab     $.each(allTabs, function () {
    var optTab = $(this).panel("options");
    //关闭其他条件：(1)tab可关闭；(2)选中的不关闭；(3)菜单名为closeother     if (optTab.closable && optTab.title != curTabTitle && itemName === "closeother") {
        //往tab的title数组中添加title         allTabsTitle.push(optTab.title);
    //关闭所有     } else if (optTab.closable && itemName === "closeall") {
        allTabsTitle.push(optTab.title);
    }
    }); 
            //for循环逐个关闭     for (var i = 0; i < allTabsTitle.length; i++) {
    $("#tabs").tabs("close", allTabsTitle[i]);
    }
}

代码有点长，但都写了注释，相信应该是能够看明白的。

三、更改皮肤theme

Easyui默认提供5种皮肤主题，可在下载的easyui1.3.5—themes可以看到，分别为

Default浅蓝色/Black 黑色/gray灰色/metro风格/bootstrap风格。

为了实现换肤，同样首先需要在页面写操作菜单，位置呢我放在了north的右侧，代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="head" data-options="region:'north'" style="height:60px;">
    <div style="height:30px;font-size:30px">MISP</div>
    <div style="text-align: right;">
    <a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#theme',iconCls:'icon-filter'">主题</a>
    </div>
    <div id="theme" style="width: 100px; display: none;">
        <div onclick="changeTheme('default');">浅蓝</div>
        <div onclick="changeTheme('gray');">灰色</div>
        <div onclick="changeTheme('black');">黑色</div>
        <div onclick="changeTheme('metro');">Metro</div>
        <div onclick="changeTheme('bootstrap');">Bootstrap</div>
    </div>
</div>

上述代码中有一个自定义的切换主题方法changeTheme(title)。

接下来就是js代码实现该方法，直接上吧：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
/*切换主题*/
changeTheme=function (themeName) {
    var $easyuiTheme = $('#easyuiTheme');
    var url = $easyuiTheme.attr('href');
    var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
    $easyuiTheme.attr('href', href);
    var $iframe = $('iframe');
    if ($iframe.length > 0) {
    for (var i = 0; i < $iframe.length; i++) {
          var ifr = $iframe[i];
          $(ifr).contents().find('#easyuiTheme').attr('href', href);
     }
}

代码从网上扒的，算是简洁的了。如果要人性化，还应该使用cookie来保存用户的选择。但考虑到本节内容纯属甜点，就不弄得太复杂，也懒得解释。

运行tomcat，在浏览器中输入localhost:8080/easyui/index.html。界面如下：

收拾心情，准备迎接正餐datagrid！

最后附上完整index.html代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<html>
<head>
    <meta charset="UTF-8">
    <title>easyui学习笔记</title>
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/icon.css"/>
    <script type="text/javascript" src="jslib/easyui1.3.5/jquery.min.js"></script>
    <script type="text/javascript" src="jslib/easyui1.3.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
    <script type="text/javascript">
    $(function () {
        /*树形菜单点击处理*/
        $("#tree").tree({
            url : 'treeData.json',
            lines : true,
            onClick : function (node) {
                if (node.attributes) {
                    openTab(node.text, node.attributes.url);
                }
            }
        });
        /*在右边center区域打开菜单，新增tab*/
        function openTab(title, url) {
            //判断是否已存在             if ($("#tabs").tabs('exists', title)) {  
                $('#tabs').tabs('select', title);
            } else {
                //新增tab                 $('#tabs').tabs('add', {
                    title : title,
                    closable : true,
                    content : createTabContent(url)
                });
            }
        }
      
        /* 生成tab内容 */
        function createTabContent(url){
            return '<iframe style="width:100%;height:98%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>';
        }
  
        /*绑定tabs的右键菜单*/
        $("#tabs").tabs({
            onContextMenu : function (e, title) {
                e.preventDefault();
                $('#tabsMenu').menu('show', {
                    left : e.pageX,
                    top : e.pageY
                }).data("tabTitle", title);
            }
        });
          
        /*实例化menu的onClick事件*/
        $("#tabsMenu").menu({
                onClick : function (item) {
                CloseTab(this, item.name);
            }
        });
          
        /*右键菜单关闭事件的处理*/
        function CloseTab(curTab, itemName) {
            //选中的tab的title             var curTabTitle = $(curTab).data("tabTitle");
            //所有tab             var allTabs = $("#tabs").tabs("tabs");
            //所有tab的title的数组             var allTabsTitle = [];
            //关闭菜单             if (itemName === "close") {
                $("#tabs").tabs("close", curTabTitle);
                return;
            }       
            //遍历所有tab             $.each(allTabs, function () {
                var optTab = $(this).panel("options");
                //关闭其他条件：(1)tab可关闭；(2)选中的不关闭；(3)菜单名为closeother                 if (optTab.closable && optTab.title != curTabTitle && itemName === "closeother") {
                    //往tab的title数组中添加title                     allTabsTitle.push(optTab.title);
                //关闭所有                 } else if (optTab.closable && itemName === "closeall") {
                    allTabsTitle.push(optTab.title);
                }
            }); 
            //for循环逐个关闭             for (var i = 0; i < allTabsTitle.length; i++) {
                $("#tabs").tabs("close", allTabsTitle[i]);
            }
        }
        /*切换主题*/
        changeTheme=function (themeName) {
            var $easyuiTheme = $('#easyuiTheme');
            var url = $easyuiTheme.attr('href');
            var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
            $easyuiTheme.attr('href', href);
            var $iframe = $('iframe');
            if ($iframe.length > 0) {
                for (var i = 0; i < $iframe.length; i++) {
                    var ifr = $iframe[i];
                    $(ifr).contents().find('#easyuiTheme').attr('href', href);
                }
            }
        };  
});
</script>
</head>
<body class="easyui-layout">
    <div id="head" data-options="region:'north'" style="height:60px;">
        <div style="height:30px;font-size:30px">MISP</div>
        <div style="text-align: right;">
            <a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#theme',iconCls:'icon-filter'">主题</a>
        </div>
        <div id="theme" style="width: 100px; display: none;">
            <div onclick="changeTheme('default');">浅蓝</div>
            <div onclick="changeTheme('gray');">灰色</div>
            <div onclick="changeTheme('black');">黑色</div>
            <div onclick="changeTheme('metro');">Metro</div>
            <div onclick="changeTheme('bootstrap');">Bootstrap</div>
        </div>
    </div>
    <div id="foot" data-options="region:'south'" style="height:30px;text-align: center;background: #D2E0F2">CopyRight:SCAU</div>
    <div id="nav" data-options="region:'west',split:true" style="width:200px" title="导航">
            <div id="navMenu" class="easyui-accordion" data-options="fit:true,border:false">
                <div title="系统管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
                </div>
                <div title="基础数据" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
                <ul id="tree" class="easyui-tree" data-options="lines:true"></ul>    
                </div>    
            </div>
    </div>
    <div id="mainPanle" data-options="region:'center'">
        <div id="tabs" class="easyui-tabs" data-options="fit:true, border: false" >
            <div title="About" data-options="iconCls:'icon-tip'">
                <iframe src="about.html" style="border: 0; width: 100%; height: 98%;" frameBorder="0"></iframe>
            </div>
        </div>    
    </div>
    <div id="tabsMenu" class="easyui-menu" style="width:150px;">
        <div data-options="name:'close'">关闭</div>
        <div class="menu-sep"></div>
        <div data-options="name:'closeall'">全部关闭</div>
        <div data-options="name:'closeother'">除此之外全部关闭</div>
    </div>
</body>
</html>

EasyUI学习笔记5：来点甜点_ menu和theme插件相关推荐

  1. Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】

    Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...

  2. 学习笔记：Java 并发编程①_基础知识入门

    若文章内容或图片失效,请留言反馈. 部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 视频链接:https://www.bilibili.com/video/av81461839 视频下载: ...

  3. 学习笔记：Java 并发编程②_管程

    若文章内容或图片失效,请留言反馈. 部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 视频链接:https://www.bilibili.com/video/av81461839 配套资料: ...

  4. 学习笔记：Java 并发编程④_无锁

    若文章内容或图片失效,请留言反馈. 部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 视频链接:https://www.bilibili.com/video/av81461839 配套资料: ...

  5. 学习笔记：Java 并发编程⑥_并发工具_JUC

    若文章内容或图片失效,请留言反馈. 部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 视频链接:https://www.bilibili.com/video/av81461839 配套资料: ...

  6. EasyUI学习笔记6：MIS开发利器_ datagrid插件(上)

    为什么80%的码农都做不了架构师?>>>    一.引言 终于来到easyui系列笔记的重点部分--数据网格datagrid插件.在MIS开发中,需要展示数据大量数据并且频繁地进行C ...

  7. EasyUI学习笔记7：MIS开发利器_ datagrid插件(中)

    摘要 使用datagrid实现数据列表和CRUD操作,并实现与后台action交互,支持后台分页与排序.. easyui datagrid dialog form 目录[-] 一.引言 二.数据管理对 ...

  8. easyUI学习笔记二

    1．  拖拉大小 <!DOCTYPE html> <html> <head><title>easyui学习</title><scrip ...

  9. EasyUI学习笔记8：MIS开发利器_ datagrid插件(下)(终结篇)

    为什么80%的码农都做不了架构师?>>>    一.引言 最后一篇是easyui与struts传递数据.拖了好多天,因为一直没想好怎么写.这部分代码参考了一个开源项目,很早之前写的, ...

最新文章

  1. java中JUnit单元测试的使用方法
  2. Java-Web监听器
  3. android 虚拟按键 增减和删除的方法
  4. Spring构造注入重载
  5. 团队作业8----第二次项目冲刺（beta阶段）5.25
  6. 随手能做194个实验，不呆板，轻松撬动大智慧
  7. linux之父子进程的输出
  8. java jar命令_Java命令行之jar命令
  9. 字符串 -- 3.15 Length of Last Word -- 图解
  10. 4G知识总结（LTE网络架构、关键技术、物理层、移动性管理）
  11. 用Python解读房贷利率，有没有套路？这是我见过最透彻的Python版解读！
  12. linux 安装k8s
  13. python wmic_wmic linux python
  14. 央视《家有妙招》整理版，值得永远收藏！
  15. 令人深思的文章：也许你这辈子都只是个小人物
  16. Error starting child
  17. 超简单集成华为HMS Core MLKit通用卡证识别SDK，一键实现各种卡绑定
  18. 三国时期蜀国的巅峰实力
  19. FastAdmin 多表联查 踩坑
  20. 已知二叉树先序序列和中序序列，求后序序列

热门文章

  1. 阿里达摩院420集python_阿里达摩院推的407集的python教程，入门到精通简直不要太简单...
  2. 狼蛛收割者_制作狼蛛标识符
  3. Three.js-着色器加工材质及材质着色器详解
  4. c#高级编程第11版 pdf网盘_c#高级编程_c#高级编程 目录 微盘_c#高级编程第10版 pdf...
  5. win7下编译python源码
  6. 蓝桥嵌入式之 最后的挣扎
  7. 经典语录！不看你会后悔!
  8. 【前端重构技能天赋】（二）——Javascript、CSS篇
  9. 区块链安全—随机数安全分析（上）
  10. python中定义函数的关键字是_____定义函数