在使用easyui-tabs時，當我們打開許多個tab後，我們希望也能像瀏覽器窗口一樣有一個右鍵菜單，包含關閉全部、關閉當前、關閉右側等操作，該文就講述如何實現此功能。
掛上一圖，看看效果，菜單就是easyui的menu組件，使用者可以爲菜單選項添加圖標，定義樣式，甚至可以設置多級結構的菜單。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<divid="rcmenu"class="easyui-menu"style=""> <divdata-options="iconCls:'icon-cancel'"id="closecur"> 關閉 </div> <divid="closeall"> 關閉全部 </div> <divid="closeother"> 關閉其他 </div> <divclass="menu-sep"></div> <divid="closeright"> 關閉右側標籤頁 </div> <divid="closeleft"> 關閉左側標籤頁 </div></div> |
easyui-menu的使用請參考官方文檔：http://www.jeasyui.com/documentation/menu.php
|
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
|
$(function(){ $(".tabs-header").bind('contextmenu',function(e){ e.preventDefault(); $('#rcmenu').menu('show',
{ left:
e.pageX, top:
e.pageY }); }); //關閉當前標籤頁 $("#closecur").bind("click",function(){ vartab
= $('#tab').tabs('getSelected'); varindex
= $('#tab').tabs('getTabIndex',tab); $('#tab').tabs('close',index); }); //關閉所有標籤頁 $("#closeall").bind("click",function(){ vartablist
= $('#tab').tabs('tabs'); for(vari=tablist.length-1;i>=0;i--){ $('#tab').tabs('close',i); } }); //關閉非當前標籤頁（先關閉右側，再關閉左側） $("#closeother").bind("click",function(){ vartablist
= $('#tab').tabs('tabs'); vartab
= $('#tab').tabs('getSelected'); varindex
= $('#tab').tabs('getTabIndex',tab); for(vari=tablist.length-1;i>index;i--){ $('#tab').tabs('close',i); } varnum
= index-1; for(vari=num;i>=0;i--){ $('#tab').tabs('close',0); } }); //關閉當前標籤頁右側標籤頁 $("#closeright").bind("click",function(){ vartablist
= $('#tab').tabs('tabs'); vartab
= $('#tab').tabs('getSelected'); varindex
= $('#tab').tabs('getTabIndex',tab); for(vari=tablist.length-1;i>index;i--){ $('#tab').tabs('close',i); } }); //關閉當前標籤頁左側標籤頁 $("#closeleft").bind("click",function(){ vartab
= $('#tab').tabs('getSelected'); varindex
= $('#tab').tabs('getTabIndex',tab); varnum
= index-1; for(vari=0;i<=num;i++){ $('#tab').tabs('close',0); } }); }); |
$('.tabs-header')爲tabs的hearder對象，通過綁定contextmenu事件，並阻止默認的事件，來實現在header區域右鍵彈出菜單操作。最後運用官方提供的api，來實現tab標籤頁的關閉。