一、引言
EasyUI提供了easyui-accordion插件能让我们简单实现非常炫酷的折叠面板效果。此外,EasyUI的tree插件可以用来构建多级菜单。我们可以将accordion和tree插件组合起来构建实用的导航菜单。
二、创建导航菜单
1. 使用accordion创建折叠面板
创建折叠面板需指定元素class="easyui-accordion"。accordion容器有几个重要的属性:
(1) fit属性,值为true/false, 使折叠面板容器的尺寸适应它的父容器
(2) border属性,值为true/false,定义是否有边框
(3) animate属性,值为true/false,定义当展开或折叠面板(panel)时是否显示动画效果
用div创建折叠面板(Panel)。面板重要属性:
(1) title定义面板名称
(2) selected属性设置为 true 就展开面板(panel)
(3) collapsible属性设置是否显示可折叠按钮,默认为true
2.使用tree插件创建树形菜单
树(tree)定义在 <ul> 元素中。该标记可定义叶节点和子节点。
在网页中编写语句。
<ul id="tree" class="easyui-tree" data-options="lines:true">
其中,lines属性定义是否显示树线条。默认不显示。
示例如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
… //此处省略代码,见笔记2
<
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"
>
<
li
><
span
>产品管理</
span
>
<
ul
>
<
li
><
a
href
=
"#"
>产品类别</
a
></
li
>
<
li
><
a
href
=
"#"
>产品</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
=
"#"
>客户</
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
… //此处省略代码,见笔记2
|
运行tomcat,在浏览器中输入localhost:8080/easyui/index.html。显示如下界面:
三、使用JavaScript创建Tree菜单
Easyui的很多插件多可以使用两种方法创建。第1种方式是使用页面标签创建,通过标签来定义各种属性。第2种方式是通过javaccript来创建。此外,我们也可以结合两种方式来使用。
上节我们使用第1种方式创建tree菜单,接下来使用第2种方式。
依旧需要在网页中留下一句语句:
<ul id="tree" class="easyui-tree" data-options="lines:true"></ul>
注意,此处<ul></ul>之间是没有内容的。tree节点值是通过js代码来加载的。
接下来我们要在<script type="text/javascript"></script>编写js代码。通常建议把该段代码放在网页最后面,当然也可以把它单独写入**.js文件中,然后引入该js文件。Js代码如下:
1
2
3
4
5
6
7
|
$(
function
() {
/*树形菜单点击处理*/
$(
"#tree"
).tree({
url :
'treeData.json'
,
lines :
true
});
});
|
照例进行解释:
$(function ()}); :jquery内置入口函数,表示网页加载完毕后要执行的意思。$表示JQuery对象。
注意$("#tree")中的“tree”必须与网页标签中的id相同,即<ul id="tree" data-options="lines:true">。
.tree({}); 中可定义各种属性和事件。
tree插件有一个url属性用来获取远程数据的 URL。该url可以为php网页的路径,也可以是J2EE体系的action路径。也可以设为本地的json文件。如果是action,也必须是返回json格式的数据。因此,开发时就需要将对象或集合转换为json数据。那什么是json呢?问下度娘:
“JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript的一个子集…….. JSON 数据的书写格式是:名称/值对。”
以下是本笔记需要构建菜单treedata.json文件的内容,该文件放在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
|
[{
"id"
:1,
"text"
:
"产品管理"
,
"state"
:
"closed"
,
"children"
:[{
"id"
:11,
"text"
:
"产品类别"
,
"attributes"
:{
"url"
:
""
}
},{
"id"
:12,
"text"
:
"产品"
,
"attributes"
:{
"url"
:
""
}
}]
},{
"id"
:2,
"text"
:
"客户"
,
"attributes"
:{
"url"
:
""
}
}]
|
也许你要问,为什么要排成这样的格式。答案是:tree要求的,排成这样我才认得:)
至于json的具体属性值如state、attributes等在下篇笔记中再解释。
Java对象或集合转换成json需要fastjson等工具,如何使用则在更后面的笔记介绍。
运行tomcat,在浏览器中输入localhost:8080/easyui/index.html。得到上节同样的界面。
也许你还会问,既然是一样的,那为什么这么麻烦用js呢。相信你肯定会发现,这些菜单点击了是没有反应,是因为暂时还没有为菜单加上事件,用js代码就可以很方便加上各种事件。下篇将介绍点击菜单打开一个tab窗口页。
反正代码也不长,为了便于查看,最后附上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
|
<
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
});
});
</
script
>
</
head
>
<
body
>
<
div
id
=
"head"
data-options
=
"region:'north'"
style
=
"height:60px;"
>
<
div
style
=
"height:30px;font-size:30px"
>MISP</
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"
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"
data-options
=
"lines:true"
></
ul
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"mainPanle"
data-options
=
"region:'center'"
>
<
div
id
=
"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
>
</
body
>
</
html
>
|
转自:http://my.oschina.net/ooad/blog/390734