jquery UI Accordion

 Accordion 部件. 语义要求:

你的accordion容器需要按照一个元素成组的满足拥有配对的头部和内容面板的格式要求. 默认的头部是锚点, 假设结构如下:

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

如果使用了其他的元素来做头部, 应使用适当的选择来作为标题, 例如. 头部: 'h3'. 内容元素必须紧接着它的头部元素.

如果您有连接到accordion内容的元素,并使用它来作为头部, 应添加一个样式使他们成为标题, 例如. 头部: 'a.header'.

程序通过激活(编号)来改变访问的内容.
注: 如果你想一次打开多个内容节, 请不要使用accordion

accordion不允许在同一时间打开多个内容节, 做到这一点需要很大的努力. 如果你正在寻找一个允许一次打开多个内容的部件,请不要使用accordion. 通常可以写几行jQuery,就像这样:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
    $(this).next().toggle();
    return false;
  }).next().hide();
});

参数

active
类型:
Selector, Element, jQuery, Boolean, Number
默认值:
first child

选择一个可访问项. 设置为false在开始时不显示任何一项. 需要 «collapsible: true».
代码示例
使用指定的active参数初始化一个accordion.

$('.selector').accordion({ active: 2 });

在初始化后设置或者获取active参数.

//获取
var active = $('.selector').accordion('option', 'active');
//设置
$('.selector').accordion('option', 'active', 2);

animated
类型:
Boolean, String
默认值:
false

选择你喜欢的动画, 或者关闭动画效果(设置为false). 除了默认的之外, 'bounceslide' 和 'easeslide' 也被支持 (都需要依赖一些简单的插件).
代码示例
使用指定的animated参数初始化一个accordion.

$('.selector').accordion({ animated: 'easeslide' });

在初始化后设置或者获取animated参数.

//获取
var animated = $('.selector').accordion('option', 'animated');
//设置
$('.selector').accordion('option', 'animated', 'easeslide');

autoHeight
类型:
Boolean
默认值:
true

如果设置了该参数,高度最高的内容区域会被作为所有区域的高度,以提供更加一直的展开动画.
代码示例
使用指定的autoHeight参数初始化一个accordion.

$('.selector').accordion({ autoHeight: false });

在初始化后设置或者获取autoHeight参数.

//获取
var autoHeight = $('.selector').accordion('option', 'autoHeight');
//设置
$('.selector').accordion('option', 'autoHeight', false);

clearStyle
类型:
Boolean
默认值:
false

设置此参数, 可以在动画结束后清除height和overflow样式. 如果accordions的工作依赖于动态内容. 请不要和此参数共同使用.
代码示例
使用指定的clearStyle参数初始化一个accordion.

$('.selector').accordion({ clearStyle: true });

在初始化后设置或者获取clearStyle参数.

//获取
var clearStyle = $('.selector').accordion('option', 'clearStyle');
//设置
$('.selector').accordion('option', 'clearStyle', true);

collapsible
类型:
Boolean
默认值:
false

所有的章节是否可以一次关闭. 允许在触发事件时关闭打开的章节 (默认是点击操作).
代码示例
使用指定的collapsible参数初始化一个accordion.
$('.selector').accordion({ collapsible: true });
在初始化后设置或者获取collapsible参数.

//获取
var collapsible = $('.selector').accordion('option', 'collapsible');
//设置
$('.selector').accordion('option', 'collapsible', true);

event
类型:
String
默认值:
'click'

使用哪个事件触发展开操作.
代码示例
使用指定的event参数初始化一个accordion.

$('.selector').accordion({ event: 'mouseover' });

在初始化后设置或者获取event参数.

//获取
var event = $('.selector').accordion('option', 'event');
//设置
$('.selector').accordion('option', 'event', 'mouseover');

fillSpace
类型:
Boolean
默认值:
false

设置此参数, 可以使accordion与父容器的高度一致. 将覆盖autoheight参数.
代码示例
使用指定的fillSpace参数初始化一个accordion.

$('.selector').accordion({ fillSpace: true });

在初始化后设置或者获取fillSpace参数.

//获取
var fillSpace = $('.selector').accordion('option', 'fillSpace');
//设置
$('.selector').accordion('option', 'fillSpace', true);
header
类型:
Selector, jQuery
默认值:
'> li > :first-child,> :not(li):even'

头部元素的Selector.
代码示例
使用指定的header参数初始化一个accordion.
$('.selector').accordion({ header: 'h3' });
在初始化后设置或者获取header参数.
//获取

var header = $('.selector').accordion('option', 'header');

//设置

$('.selector').accordion('option', 'header', 'h3');

icons
类型:
Object
默认值:

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

头部使用的Icons图标. 可以为'header'和'headerSelected'指定Icons, 我们推荐用jQuery UI ThemeRoller来使用jQuery UI CSS Framework
代码示例
使用指定的icons参数初始化一个accordion.

$('.selector').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });

在初始化后设置或者获取icons参数.
//获取

var icons = $('.selector').accordion('option', 'icons');

//设置

$('.selector').accordion('option', 'icons', { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' });

navigation
类型:
Boolean
默认值:
false

设置此参数, 可以寻找锚点相匹配的location.href并且访问它. 良好的基于链接的状态存储. 使用navigationFilter参数使你自定义的选择生效.
代码示例
使用指定的navigation参数初始化一个accordion.

$('.selector').accordion({ navigation: true });

在初始化后设置或者获取navigation参数.
//获取

var navigation = $('.selector').accordion('option', 'navigation');

//设置

$('.selector').accordion('option', 'navigation', true);

navigationFilter
类型:
Function
默认值:

使用你自己的选择器,使与之匹配的默认location.href被覆盖.
代码示例
使用指定的navigationFilter参数初始化一个accordion.

$('.selector').accordion({ navigationFilter: function(){ ... } });

在初始化后设置或者获取navigationFilter参数.
//获取

var navigationFilter = $('.selector').accordion('option', 'navigationFilter');

//设置

$('.selector').accordion('option', 'navigationFilter', function(){ ... });

事件
change
类型:
accordionchange

此事件在accordion切换时触发. 如果accordion有动画, 此事件将在动画结束后触发; 否则, 立刻触发.

$('.ui-accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery object, activated header
ui.oldHeader // jQuery object, previous header
ui.newContent // jQuery object, activated content
ui.oldContent // jQuery object, previous content
});

代码示例
提供一个回调函数对change事件进行操作.

$('.selector').accordion({
change: function(event, ui) { ... }
});

使用accordionchange类型来绑定change事件.

$('.selector').bind('accordionchange', function(event, ui) {
...
});

方法
destroy
方法签名:

.accordion( 'destroy' )

完全移除accordion功能. 这将使元素返回到之前的初始化状态.

disable
方法签名:

.accordion( 'disable' )

关闭 accordion.
enable
方法签名:

.accordion( 'enable' )

打开 accordion.
option
方法签名:

.accordion( 'option' , optionName , [value] )

获取或者设置accordion参数. 如果没有提供参数值则是获取.
activate
方法签名:

.accordion( 'activate', index )

激活Accordion内容中的一部分. index可以是选择器匹配的元素,也可以是由0开始到所有匹配的header的编号. 设置为 -1 则关闭所有 (仅当collapsible参数设置为:true).
主题

jQuery UI Accordion插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.

如果有更深层次的个性化需要，有特定类别的工具ui.accordion.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。
jQuery UI CSS Framework classes示例

< div role ="tablist" class ="ui-accordion ui-widget ui-helper-reset" id ="accordion" >
< div class ="ui-accordion-group ui-accordion-selected" >
< h3 tabindex ="0" class ="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" > < span class ="ui-icon ui-icon-triangle-1-s" > span> < a tabindex ="-1" href ="#" >Section 1 a> h3>
< div style ="height: 113px;" class ="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom" > < div class ="ui-accordion-content" >
< p >Content for section one p>
div> div>
div>
...
div>
div>

Note: 注：这是一个示例accordion插件所产生的标记,而不是你应该使用的标记.创建一个accordion唯一需要的标记是

< div >
< h3 > < a href ="#" >Section 1 a> h3>
< div >
< p >Section 1 content p>
div>
< h3 > < a href ="#" >Section 2 a> h3>
< div >
< p >Section 2 content p>
div>
< h3 > < a href ="#" >Section 3 a> h3>
< div >
< p >Section 3 content p>
div>
div>.