快捷導(dǎo)航

為EasyUI的Tab標(biāo)簽添加右鍵菜單的方法

更新時(shí)間：2012年07月14日 12:39:12 作者：

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

前期的準(zhǔn)備工作：
1、下載DEMO源碼，并升級(jí)為最新版本（jquery 1.7.2,Easyui 1.2.6）,直接替換就可以啦，升級(jí)easyui 是的要把css js theme 全部替換
2、在首頁的HTML代碼中：將

復(fù)制代碼代碼如下:

 
<div id="mm" class="easyui-menu" style="width:150px;"> 
<div id="mm-tabupdate">刷新</div> 
<div class="menu-sep"></div> 
<div id="mm-tabclose">關(guān)閉</div> 
<div id="mm-tabcloseall">全部關(guān)閉</div> 
<div id="mm-tabcloseother">除此之外全部關(guān)閉</div> 
<div class="menu-sep"></div> 
<div id="mm-tabcloseright">當(dāng)前頁右側(cè)全部關(guān)閉</div> 
<div id="mm-tabcloseleft">當(dāng)前頁左側(cè)全部關(guān)閉</div> 
<div class="menu-sep"></div> 
<div id="mm-exit">退出</div> 
</div> 

改為：

復(fù)制代碼代碼如下:

 
<div id="mm" class="easyui-menu" style="width:150px;"> 
<div id="refresh">刷新</div> 
<div class="menu-sep"></div> 
<div id="close">關(guān)閉</div> 
<div id="closeall">全部關(guān)閉</div> 
<div id="closeother">除此之外全部關(guān)閉</div> 
<div class="menu-sep"></div> 
<div id="closeright">當(dāng)前頁右側(cè)全部關(guān)閉</div> 
<div id="closeleft">當(dāng)前頁左側(cè)全部關(guān)閉</div> 
<div class="menu-sep"></div> 
<div id="exit">退出</div> 
</div> 

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

復(fù)制代碼代碼如下:

 
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('親，前邊那個(gè)上頭有人，咱惹不起哦。 ^@^!!'); 
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 方法改為

復(fù)制代碼代碼如下:

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

這樣就OK啦，代碼比原來優(yōu)雅多啦！
調(diào)用刷新，關(guān)閉當(dāng)前標(biāo)簽時(shí)，就調(diào)用 closeTab(‘a(chǎn)ction') //action 可以為 refresh（刷新）,close（關(guān)閉）
iframe 中使用時(shí)，要這么屎 top.closeTab('action');
點(diǎn)此下載最新的Easyui應(yīng)用實(shí)例

您可能感興趣的文章: