Accordion组件是easyui框架中的布局组件之一，它提供了多个可展开/折叠的面板。Accordion经常用作页面的导航菜单。我们先通过制作一个导航菜单来认识一下Accordion。
accordion示例
图中左侧便是通过accordion组件构建的导航菜单，右侧是用panel构建的内容显示页面。点击左侧不同的菜单，右侧panel将会加载对应的页面，显示不同内容。
我们通过代码来研究一下accordion组件用法。示例代码主要包含两个页面，分别为accordionDemo.php和cby.php，前者包含导航菜单和内容显示页框架，后者是具体的内容页面。
accordionDemo.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<title>accordionDemo</title>
<style>
a {
text-decoration:none;
font-size: 13px;
color:black
}
.nav-left {
float:left;
width:200px;
height:400px;
margin-right: 20px;
}
.nav-item {
padding: 10px;
height: 328px;
border: none;
}
.content {
border-radius: 5px;
}
.contianer {
width:100%;
}
</style>
<script>
function openPage(page) {
$("#content_panel").panel("refresh",page);
}
</script>
</head>
<body>
<div class="container">
<!-- 左侧导航由accordion构建的导航菜单 -->
<div id="nav_menu" class="easyui-accordion nav-left">
<div title="灵长类" class="nav-item">
<table>
<tr>
<td></td>
<td>
<a href="javascript:void(0);" onclick="openPage('cby.php')">长臂猿</a>
</td>
</tr>
<tr>
<td></td>
<td><a href="#">猩猩</a></td></tr>
<tr>
<td></td>
<td><a href="#">卷尾猴</a></td>
</tr>
</table>
</div>
<div title="龟类" class="nav-item">
<table>
<tr>
<td></td>
<td><a href="#">草龟</a></td>
</tr>
<tr>
<td></td>
<td><a href="#">巴西龟</a></td>
</tr>
<tr>
<td></td>
<td><a href="#">金钱龟</a></td>
</tr>
</table>
</div>
</div>
<!-- 右侧由Panel构建的内容显示页面 -->
<div id="content_panel" class="easyui-panel content" data-options="width:500,height:400">
</div>
</div>
</body>
</html>
<br />
cby.php
<html>
<head>
<meta charset="UTF-8">
<title>长臂猿</title>
<style>
.logo {
margin: 10px;
width:80px;
height:120px;
float:left;
}
</style>
</head>
<body>
<div class="contianer">
<p style="margin:20px">
长臂猿（学名：Hylobatidae）：是灵长目一科动物的通称，有4属16种。因臂特别长而得名。
…………
</p>
</div>
</body>
</html>
accordion.php构建了id为nav_menu的accordion组件，在nav_menu内部，每个子<div>就是一个子面板，代码中共构造了“灵长类”和“龟类”两个子面板。每个子面板中又有一个<table>，用来构建带图标的菜单链接。点击代码中的菜单链接，将调用openPage方法，openPage方法使用panel组件中的refresh方法，将对应的内容页（cby.php）加载到panel中显示（关于panel组件我们将另外专门说明）。
接下去介绍已给accordion的属性。由于accordion组件依赖于panel，因此这个组件有两个概念上的属性，其一是“容器(container)属性”，其二是“面板(panel)属性”。容器是指外围整体的框架，也就是整个accordion本身，包含了各个面板。面板则是指在容器中的各功能块，如“灵长类”或“龟类”等。
从代码中也能看出容器和面板的逻辑关系，id为nav_menu的div元素便是容器，它包含了灵长类、龟类两个面板，每个面板都是一个div元素。还有三个超链接，这三个超链接将分别显示在三个面板中。
容器属性
| 属性名称 | 属性值类型 | 属性默认值 | 描述 |
|---|---|---|---|
| width | 数值 | auto | 容器宽度。 |
| height | 数值 | auto | 容器高度。 |
| border | 布尔值 | true | 是否显示容器边框。 |
| fit | 布尔值 | false | 容器是否填充它的父组件。 |
| animate | 布尔值 | true | 是否在折叠或者展开时显示动画效果。 |
| multiple | 布尔值 | false | 是否允许同时展开多个面板。<br />1.3.5及以上版本支持。 |
| selected | 数值 | 0 | 初始化时选中的面板索引，索引从0开始。<br />1.3.5及以上版本支持。 |
容器属性非常简单，无需过多讲述。
accordion面板属性继承自panel组件，下述只是accordion独有的属性。
扩展的panel属性
| 属性名称 | 属性值类型 | 属性默认值 | 描述 |
|---|---|---|---|
| selected | 布尔值 | false | 面板是否为展开状态。 |
| collapsible | 布尔值 | true | 是否允许面板显示折叠按钮。 |
accordion组件方法
| 方法名称 | 参数 | 描述 |
|---|---|---|
| options | 无 | 返回所有属性。 |
| panels | 无 | 返回所有面板。 |
| resize | 无 | 重置组件大小。 |
| getSelected | 无 | 返回第一个选中的面板。 |
| getSelections | 无 | 返回所有选中的面板。1.3.5及以上版本支持。 |
| getPanel | which | 返回指定的面板。参数which既可以是面板的标题（字符串），<br />也可以是面板的索引（数字）。 |
| getPanelIndex | panel | 返回指定面板的索引，参数panel是面板对象。<br />1.3及以上版本支持。 |
| select | which | 选中指定的面板。参数参考”getPanel”方法。 |
| unselect | which | 取消选中指定的面板。参数参考”getPanel”方法。<br />1.3.5及以上版本支持。 |
| add | options | 新增面板。参数options是包含了面板各数据的json。 |
| remove | which | 删除指定的面板。参数参考“getPanel”方法。 |
有些比较简单的方法就不再多说。
getSelected返回第一个选中的面板，而getSelections返回了所有选中的面板。
<script>
var p1 = $('#nav_menu').accordion('getSelected');
p1.panel('collapse');
var p2 = $('nav_menu').accordion('getSelections');
for(var i=0;i<p2.length;i++) {
p2[i].panel('collapse');
}
</script>
p1是通过“getSelected” 方法返回选中的面板，我们通过“collapse”方法将这个面板折叠；p2则是通过“getSelections”方法返回的一组选中面板，使用循环将这些面板全部折叠。
<script>
/* 根据索引号获取对应面板*/
var p = $('#nav_menu').accordion('getPanel', 1);
/* 根据标题获取对应面板*/
p = $('#nav_menu').accordion('getPanel', '系统设置');
var index = $('#nav_menu').accordion('getPanelIndex', p2);
alert(index)
</script>
上例代码展示了“getPanel”和“getPanelIndex”两种方法的用法。getPanel参数which既可以是索引号，也可以是字符串形式的标题。
再来看一下如何增加一个面板。
<script>
var options = {
title:'我是新来的面板',
content:'新来面板的内容',
selected:false
}
$("#nav_menu").accordion("add", options);
</script>
新增一个面板时需要定义相关的面板参数，这些参数以JSON形式供“add”方法调用。
options中的各属性可以参见“panel”组件的属性，需要说明一下，如果“selected”属性为true（默认为true），新增的面板将处于选中状态。
accordion组件事件
| 事件名称 | 参数 | 描述 |
|---|---|---|
| onSelect | title,index | 面板选中时触发。参数title为面板的标题，index为面板索引。 |
| onUnselect | title,index | 面板取消选中时触发。参数同上。1.3.5及以上版本支持。 |
| onAdd | title,index | 新增面板时触发。参数同上。 |
| onBeforeRemove | title,index | 删除面板前触发，如果返回false，则不删除。参数同上。 |
| onRemove | title,index | 删除面板后触发。参数同上。 |
事件都比较容易理解，简单举一个例子，说明事件的用法：
<button onclick="delAccordion();">删除accordion</button>
<script>
$("#nav_menu").accordion({
onBeforeRemove:function(title, index) {
var r = confirm("确认删除"+title+"(索引号:"+index+")吗？");
return r;
}
});
function delAccordion() {
$("#nav_menu").accordion("remove", 1);
}
</script>
上例代码使用了onBeforeRemove事件，它在“删除面板事件”发生前被触发。用户确认删除后，索引号为1的面板被删除。
网友评论