一、引言 终于坚持写到5了，接下来来点无关痛痒的，觉得没必要可直接跳过。一个系统可能会打开非常多tab页，如果一个一个点小叉叉会比较麻烦，如何一次性关闭？Windows 用户通常习惯使用快捷菜单来实现
一、引言
终于坚持写到5了，接下来来点无关痛痒的，觉得没必要可直接跳过。一个系统可能会打开非常多tab页，如果一个一个点小叉叉会比较麻烦，如何一次性关闭？Windows 用户通常习惯使用快捷菜单来实现一些常用的用户操作。很荣幸 EasyUI 也提供了一个右键菜单的插件——Menu。EasyUI 中的 Menu 可以使用户方便的实现一个 Windows 风格的右键菜单，我们只需要编写菜单项的内容，并对菜单项容器设置相应的 Class 类 easyui-menu，即可实现一个漂亮的右键快捷菜单。
Easyui默认提供了5种主题风格的皮肤，接下来要实现一个简单的换肤风格。
二、右键菜单关闭tab
首先需要页面<body></body>中添加了一个右键菜单，代码位置任意。代码如下：
<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代表事件的状态。参考例子代码如下：
/*绑定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相同。代码如下：
/*实例化menu的onClick事件*/$("#tabsMenu").menu({ onClick : function (item) { CloseTab(this, item.name); }});接下来就是对关闭tab页的方法进行编写处理代码了，总共3个菜单项，用了if，当然也可以用switch case。代码如下：
/*右键菜单关闭事件的处理*/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的右侧，代码如下：
<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代码实现该方法，直接上吧：
/*切换主题*/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代码：
<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>