easyui为tabs添加右键菜单
在使用easyui-tabs时，当我们打开许多个tab后，我们希望也能像浏览器窗口一样有一个右键菜单，包含关闭全部、关闭当前、关闭右侧等操作，该文就讲述如何实现此功能。
挂上一图，看看效果，菜单就是easyui的menu组件，使用者可以为菜单选项添加图标，定义样式，甚至可以设置多级结构的菜单。
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<
div
id
=
"rcmenu"
class
=
"easyui-menu"
style
=
""
>
<
div
data-options
=
"iconCls:'icon-cancel'"
id
=
"closecur"
>
关闭
<
div
id
=
"closeall"
>
关闭全部
<
div
id
=
"closeother"
>
关闭其他
<
div
class
=
"menu-sep"
>
<
div
id
=
"closeright"
>
关闭右侧标签页
<
div
id
=
"closeleft"
>
关闭左侧标签页
|
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
(){
var
tab = $(
'#tab'
).tabs(
'getSelected'
);
var
index = $(
'#tab'
).tabs(
'getTabIndex'
,tab);
$(
'#tab'
).tabs(
'close'
,index);
});
//关闭所有标签页
$(
"#closeall"
).bind(
"click"
,
function
(){
var
tablist = $(
'#tab'
).tabs(
'tabs'
);
for
(
var
i=tablist.length-1;i>=0;i--){
$(
'#tab'
).tabs(
'close'
,i);
}
});
//关闭非当前标签页（先关闭右侧，再关闭左侧）
$(
"#closeother"
).bind(
"click"
,
function
(){
var
tablist = $(
'#tab'
).tabs(
'tabs'
);
var
tab = $(
'#tab'
).tabs(
'getSelected'
);
var
index = $(
'#tab'
).tabs(
'getTabIndex'
,tab);
for
(
var
i=tablist.length-1;i>index;i--){
$(
'#tab'
).tabs(
'close'
,i);
}
var
num = index-1;
for
(
var
i=num;i>=0;i--){
$(
'#tab'
).tabs(
'close'
,0);
}
});
//关闭当前标签页右侧标签页
$(
"#closeright"
).bind(
"click"
,
function
(){
var
tablist = $(
'#tab'
).tabs(
'tabs'
);
var
tab = $(
'#tab'
).tabs(
'getSelected'
);
var
index = $(
'#tab'
).tabs(
'getTabIndex'
,tab);
for
(
var
i=tablist.length-1;i>index;i--){
$(
'#tab'
).tabs(
'close'
,i);
}
});
//关闭当前标签页左侧标签页
$(
"#closeleft"
).bind(
"click"
,
function
(){
var
tab = $(
'#tab'
).tabs(
'getSelected'
);
var
index = $(
'#tab'
).tabs(
'getTabIndex'
,tab);
var
num = index-1;
for
(
var
i=0;i<=num;i++){
$(
'#tab'
).tabs(
'close'
,0);
}
});
});
|
$('.tabs-header')为tabs的hearder对象，通过绑定contextmenu事件，并阻止默认的事件，来实现在header区域右键弹出菜单操作。最后运用官方提供的api，来实现tab标签页的关闭。