这里的例子使用 ​​jQuery UI 1.8.6​

示例效果可以看 ​​jQuery 网站中的例子​​。

手风琴效果将多个内容组织到多个逻辑组中,通过选择组的标题可以展开或者收缩组中的内容,使用效果很像 Tab,作为备选,还可以通过将鼠标放置到标题上来展开或者收缩。

使用这个组件需要引用 jQuery 脚本库,core, widget, accordion 脚本库。

<script src="scripts/jquery-1.6.2.js"></script>
<script src="scripts/jquery.ui.core.js"></script>
<script src="scripts/jquery.ui.widget.js"></script>
<script src="scripts/jquery.ui.accordion.js"></script>

当然,还需要使用一些样式,这里使用默认的 jquery 样式。

<link rel="stylesheet" href="/themes/base/jquery.ui.all.css">

默认情况下,需要使用一个容器将手风琴的内容包装起来。每一个逻辑组使用一个 h3 元素作为标题,这个元素的后面紧跟着组的内容,内容使用 div 元素。

<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div>
<h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>

最后,在 jQuery 的 ready 事件中初始化手风琴。

<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>

效果如下所示

jQuery UI - Accordion 手风琴组件的使用_初始化

在初始化的时候,还可以设置手风琴的属性。

active, 用来指定/获取默认激活的逻辑组,默认为 0。

可以设置为 boolean 类型,如果设置为 false, 那么,默认没有打开逻辑组。

也可以为 number 类型,默认为 0。指定默认打开的逻辑组。

animated, 默认的动画效果,默认为 slide。

autoHeight, 如果设置为真,那么,每个组的高度都回被设置为最高的组的高度。默认为 true. 否则,以各组实际的高度为准。

collapsible, 是否所有的逻辑组都可以收缩,默认为 false.

event, 展开/收缩使用的事件,默认为 click, 还可以使用 mouseover,当鼠标覆盖在标题上的时候进行收缩和展开。

fillSpace, 是否填充父元素,默认为 false. 设置后将会覆盖 autoHeight 的设置。

header, 默认的父元素为 h3, 如果不是的话,可以配置这个选择器。

icons,标题上使用的图标,默认为:

{ 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }