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

前期的准备工作：

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

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

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

改为：

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

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

functioncloseTab(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;}
}

将js中tabCloseEven 方法 改为

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

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

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

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

熊掌网盘 : 点此下载最新的Easyui应用实例

亲，如果你觉得本文对你有帮助，请帮忙推荐下哦