近期研究了下MenuButton,有了新的感悟，原先在那個DEMO中右鍵支持做法，現在看來真是小兒科啊！

前期的準備工作：

1、下載DEMO源碼，并升級為最新版本（jquery 1.7.2,Easyui 1.2.6）,直接替換就可以啦，升級easyui 是的要把css js theme 全部替換

2、在首頁的HTML代碼中：將

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>

改為：

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>

?

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

?

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

?

?

?

將js中tabCloseEven 方法?改為

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

?

這樣就OK啦，代碼比原來優雅多啦！

調用刷新，關閉當前標簽時，就調用 closeTab(‘action’) //action 可以為 refresh（刷新）,close（關閉）

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

?

熊掌網盤 :?點此下載最新的Easyui應用實例?

?

親，如果你覺得本文對你有幫助，請幫忙推薦下哦

?

總結

以上是生活随笔為你收集整理的为EasyUI 的Tab 标签添加右键菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。