jQuery UI - Accordion 手风琴组件的使用

这里的例子使用 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>

效果如下所示

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

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' }