一、引言
终于坚持写到5了，接下来来点无关痛痒的，觉得没必要可直接跳过。一个系统可能会打开非常多tab页，如果一个一个点小叉叉会比较麻烦，如何一次性关闭？Windows 用户通常习惯使用快捷菜单来实现一些常用的用户操作。很荣幸 EasyUI 也提供了一个右键菜单的插件——Menu。EasyUI 中的 Menu 可以使用户方便的实现一个 Windows 风格的右键菜单，我们只需要编写菜单项的内容，并对菜单项容器设置相应的 Class 类 easyui-menu，即可实现一个漂亮的右键快捷菜单。
Easyui默认提供了5种主题风格的皮肤，接下来要实现一个简单的换肤风格。
二、右键菜单关闭tab
首先需要页面<body></body>中添加了一个右键菜单，代码位置任意。代码如下：
|
1
2
3
4
5
6
|
<
div
id
=
"tabsMenu"
style
=
"width:150px;"
>
<
div
data-options
=
"name:'close'"
>关闭</
div
>
<
div
></
div
>
<
div
data-options
=
"name:'closeall'"
>全部关闭</
div
>
<
div
data-options
=
"name:'closeother'"
>除此之外全部关闭</
div
>
</
div
>
|
该菜单指定一个id为tabsMenu。一共有 3个菜单项，分别命名为close,closeall,closeother。另外还有1个 class 属性为 menu-sep 的 DIV是分隔符，可以将这些菜单项从视觉上分为2组。
为了实现操作，有两个问题需要解决。首先是要实现tab与该右键菜单的绑定，即关闭选定tab页；其次是要处理点击事件。
1．绑定tabs的右键菜单
从http://www.jeasyui.net/查看tabs插件API我们可以看到它有个onContextMenu事件，该事件在标签页面板被右键点击时触发。它有3个可选参数为e,titile,index。e是javascript内定对象全称event，event代表事件的状态。参考例子代码如下：
|
1
2
3
4
5
6
7
8
9
10
|
/*绑定tabs的右键菜单*/
$(
"#tabs"
).tabs({
onContextMenu :
function
(e, title) {
e.preventDefault();
$(
'#tabsMenu'
).menu(
'show'
, {
left : e.pageX,
top : e.pageY
}).data(
"tabTitle"
, title);
}
});
|
其中，e.preventDefault()取消事件默认动作。Easyui-menu插件的show方法是在指定的位置显示菜单（menu），参数是left和top位置。e.pageX则代表鼠标的当前位置。data() 方法向被选元素附加数据，或者从被选元素获取数据。该方法是取tab标签页的名称。
2. 处理菜单点击事件
从http://www.jeasyui.net/查看menu的点击事件为onClick(item),item代表菜单项。注意#tabsMenu应与页面右键菜单id相同。代码如下：
|
1
2
3
4
5
6
|
/*实例化menu的onClick事件*/
$(
"#tabsMenu"
).menu({
onClick :
function
(item) {
CloseTab(
this
, item.name);
}
});
|
接下来就是对关闭tab页的方法进行编写处理代码了，总共3个菜单项，用了if，当然也可以用switch case。代码如下：
|
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
|
/*右键菜单关闭事件的处理*/
function
CloseTab(curTab, itemName) {
//选中的tab的title
var
curTabTitle = $(curTab).data(
"tabTitle"
);
//所有tab
var
allTabs = $(
"#tabs"
).tabs(
"tabs"
);
//所有tab的title的数组
var
allTabsTitle = [];
//关闭菜单
if
(itemName ===
"close"
) {
$(
"#tabs"
).tabs(
"close"
, curTabTitle);
return
;
}
//遍历所有tab
$.each(allTabs,
function
() {
var
optTab = $(
this
).panel(
"options"
);
//关闭其他条件：(1)tab可关闭；(2)选中的不关闭；(3)菜单名为closeother
if
(optTab.closable && optTab.title != curTabTitle && itemName ===
"closeother"
) {
//往tab的title数组中添加title
allTabsTitle.push(optTab.title);
//关闭所有
}
else
if
(optTab.closable && itemName ===
"closeall"
) {
allTabsTitle.push(optTab.title);
}
});
//for循环逐个关闭
for
(
var
i = 0; i < allTabsTitle.length; i++) {
$(
"#tabs"
).tabs(
"close"
, allTabsTitle[i]);
}
}
|
代码有点长，但都写了注释，相信应该是能够看明白的。
三、更改皮肤theme
Easyui默认提供5种皮肤主题，可在下载的easyui1.3.5—themes可以看到，分别为
Default浅蓝色/Black 黑色/gray灰色/metro风格/bootstrap风格。
为了实现换肤，同样首先需要在页面写操作菜单，位置呢我放在了north的右侧，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<
div
id
=
"head"
data-options
=
"region:'north'"
style
=
"height:60px;"
>
<
div
style
=
"height:30px;font-size:30px"
>MISP</
div
>
<
div
style
=
"text-align: right;"
>
<
a
href
=
"javascript:void(0);"
class
=
"easyui-menubutton"
data-options
=
"menu:'#theme',iconCls:'icon-filter'"
>主题</
a
>
</
div
>
<
div
id
=
"theme"
style
=
"width: 100px; display: none;"
>
<
div
onclick
=
"changeTheme('default');"
>浅蓝</
div
>
<
div
onclick
=
"changeTheme('gray');"
>灰色</
div
>
<
div
onclick
=
"changeTheme('black');"
>黑色</
div
>
<
div
onclick
=
"changeTheme('metro');"
>Metro</
div
>
<
div
onclick
=
"changeTheme('bootstrap');"
>Bootstrap</
div
>
</
div
>
</
div
>
|
上述代码中有一个自定义的切换主题方法changeTheme(title)。
接下来就是js代码实现该方法，直接上吧：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/*切换主题*/
changeTheme=
function
(themeName) {
var
$easyuiTheme = $(
'#easyuiTheme'
);
var
url = $easyuiTheme.attr(
'href'
);
var
href = url.substring(0, url.indexOf(
'themes'
)) +
'themes/'
+ themeName +
'/easyui.css'
;
$easyuiTheme.attr(
'href'
, href);
var
$iframe = $(
'iframe'
);
if
($iframe.length > 0) {
for
(
var
i = 0; i < $iframe.length; i++) {
var
ifr = $iframe[i];
$(ifr).contents().find(
'#easyuiTheme'
).attr(
'href'
, href);
}
}
|
代码从网上扒的，算是简洁的了。如果要人性化，还应该使用cookie来保存用户的选择。但考虑到本节内容纯属甜点，就不弄得太复杂，也懒得解释。
运行tomcat，在浏览器中输入localhost:8080/easyui/index.html。界面如下：
收拾心情，准备迎接正餐datagrid！
最后附上完整index.html代码：
|
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
<html>
<head>
<meta charset=
"UTF-8"
>
<title>easyui学习笔记</title>
<link id=
"easyuiTheme"
rel=
"stylesheet"
type=
"text/css"
href=
"jslib/easyui1.3.5/themes/default/easyui.css"
/>
<link rel=
"stylesheet"
type=
"text/css"
href=
"jslib/easyui1.3.5/themes/icon.css"
/>
<script type=
"text/javascript"
src=
"jslib/easyui1.3.5/jquery.min.js"
></script>
<script type=
"text/javascript"
src=
"jslib/easyui1.3.5/jquery.easyui.min.js"
></script>
<script type=
"text/javascript"
src=
"jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
$(
function
() {
/*树形菜单点击处理*/
$(
"#tree"
).tree({
url :
'treeData.json'
,
lines :
true
,
onClick :
function
(node) {
if
(node.attributes) {
openTab(node.text, node.attributes.url);
}
}
});
/*在右边center区域打开菜单，新增tab*/
function
openTab(title, url) {
//判断是否已存在
if
($(
"#tabs"
).tabs(
'exists'
, title)) {
$(
'#tabs'
).tabs(
'select'
, title);
}
else
{
//新增tab
$(
'#tabs'
).tabs(
'add'
, {
title : title,
closable :
true
,
content : createTabContent(url)
});
}
}
/* 生成tab内容 */
function
createTabContent(url){
return
'<iframe style="width:100%;height:98%;" scrolling="auto" frameborder="0" src="'
+ url +
'"></iframe>'
;
}
/*绑定tabs的右键菜单*/
$(
"#tabs"
).tabs({
onContextMenu :
function
(e, title) {
e.preventDefault();
$(
'#tabsMenu'
).menu(
'show'
, {
left : e.pageX,
top : e.pageY
}).data(
"tabTitle"
, title);
}
});
/*实例化menu的onClick事件*/
$(
"#tabsMenu"
).menu({
onClick :
function
(item) {
CloseTab(
this
, item.name);
}
});
/*右键菜单关闭事件的处理*/
function
CloseTab(curTab, itemName) {
//选中的tab的title
var
curTabTitle = $(curTab).data(
"tabTitle"
);
//所有tab
var
allTabs = $(
"#tabs"
).tabs(
"tabs"
);
//所有tab的title的数组
var
allTabsTitle = [];
//关闭菜单
if
(itemName ===
"close"
) {
$(
"#tabs"
).tabs(
"close"
, curTabTitle);
return
;
}
//遍历所有tab
$.each(allTabs,
function
() {
var
optTab = $(
this
).panel(
"options"
);
//关闭其他条件：(1)tab可关闭；(2)选中的不关闭；(3)菜单名为closeother
if
(optTab.closable && optTab.title != curTabTitle && itemName ===
"closeother"
) {
//往tab的title数组中添加title
allTabsTitle.push(optTab.title);
//关闭所有
}
else
if
(optTab.closable && itemName ===
"closeall"
) {
allTabsTitle.push(optTab.title);
}
});
//for循环逐个关闭
for
(
var
i = 0; i < allTabsTitle.length; i++) {
$(
"#tabs"
).tabs(
"close"
, allTabsTitle[i]);
}
}
/*切换主题*/
changeTheme=
function
(themeName) {
var
$easyuiTheme = $(
'#easyuiTheme'
);
var
url = $easyuiTheme.attr(
'href'
);
var
href = url.substring(0, url.indexOf(
'themes'
)) +
'themes/'
+ themeName +
'/easyui.css'
;
$easyuiTheme.attr(
'href'
, href);
var
$iframe = $(
'iframe'
);
if
($iframe.length > 0) {
for
(
var
i = 0; i < $iframe.length; i++) {
var
ifr = $iframe[i];
$(ifr).contents().find(
'#easyuiTheme'
).attr(
'href'
, href);
}
}
};
});
</script>
</head>
<body
class
=
"easyui-layout"
>
<div id=
"head"
data-options=
"region:'north'"
style=
"height:60px;"
>
<div style=
"height:30px;font-size:30px"
>MISP</div>
<div style=
"text-align: right;"
>
<a href=
"javascript:void(0);"
class
=
"easyui-menubutton"
data-options=
"menu:'#theme',iconCls:'icon-filter'"
>主题</a>
</div>
<div id=
"theme"
style=
"width: 100px; display: none;"
>
<div onclick=
"changeTheme('default');"
>浅蓝</div>
<div onclick=
"changeTheme('gray');"
>灰色</div>
<div onclick=
"changeTheme('black');"
>黑色</div>
<div onclick=
"changeTheme('metro');"
>Metro</div>
<div onclick=
"changeTheme('bootstrap');"
>Bootstrap</div>
</div>
</div>
<div id=
"foot"
data-options=
"region:'south'"
style=
"height:30px;text-align: center;background: #D2E0F2"
>CopyRight:SCAU</div>
<div id=
"nav"
data-options=
"region:'west',split:true"
style=
"width:200px"
title=
"导航"
>
<div id=
"navMenu"
class
=
"easyui-accordion"
data-options=
"fit:true,border:false"
>
<div title=
"系统管理"
data-options=
"iconCls:'icon-save'"
style=
"overflow:auto;padding:10px;"
>
</div>
<div title=
"基础数据"
data-options=
"iconCls:'icon-reload',selected:true"
style=
"padding:10px;"
>
<ul id=
"tree"
class
=
"easyui-tree"
data-options=
"lines:true"
></ul>
</div>
</div>
</div>
<div id=
"mainPanle"
data-options=
"region:'center'"
>
<div id=
"tabs"
class
=
"easyui-tabs"
data-options=
"fit:true, border: false"
>
<div title=
"About"
data-options=
"iconCls:'icon-tip'"
>
<iframe src=
"about.html"
style=
"border: 0; width: 100%; height: 98%;"
frameBorder=
"0"
></iframe>
</div>
</div>
</div>
<div id=
"tabsMenu"
class
=
"easyui-menu"
style=
"width:150px;"
>
<div data-options=
"name:'close'"
>关闭</div>
<div
class
=
"menu-sep"
></div>
<div data-options=
"name:'closeall'"
>全部关闭</div>
<div data-options=
"name:'closeother'"
>除此之外全部关闭</div>
</div>
</body>
</html>
|
926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
