jQuery UI API - 折叠面板部件（Accordion Widget）

支持多个类型：

• Boolean：设置 active 为 false 将折叠所有的面板。这要求 collapsible 选项必须为 true。
• Integer：激活打开的面板索引，以零为基础。负值则表示从最后一个面板后退选择面板。

代码实例：

初始化带有指定 active 选项的 accordion：

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

在初始化后，获取或设置 active 选项：

// getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// setter
$( ".selector" ).accordion( "option", "active", 2 );	

支持多个类型：

• Boolean：false 值将禁用动画。
• Number：easing 默认的持续时间，以毫秒计。
• String：默认的持续时间要使用的 easing 名称。
• Object：easing 和 duration 属性的动画设置。
• 上面任意的选项都可以包含 down 属性。
• 当被激活的面板有一个比当前激活面板较低的指数时，发生 "Down" 动画。

代码实例：

初始化带有指定 animate 选项的 accordion：

$( ".selector" ).accordion({ animate: "bounceslide" });	

在初始化后，获取或设置 animate 选项：

// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );	

代码实例：

初始化带有指定 collapsible 选项的 accordion：

$( ".selector" ).accordion({ collapsible: true });	

在初始化后，获取或设置 collapsible 选项：

// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// setter
$( ".selector" ).accordion( "option", "collapsible", true );	

代码实例：

初始化带有指定 disabled 选项的 accordion：

$( ".selector" ).accordion({ disabled: true });	

在初始化后，获取或设置 disabled 选项：

// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// setter
$( ".selector" ).accordion( "option", "disabled", true );	

代码实例：

初始化带有指定 event 选项的 accordion：

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

在初始化后，获取或设置 event 选项：

// getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );	

代码实例：

初始化带有指定 header 选项的 accordion：

$( ".selector" ).accordion({ header: "h3" });	

在初始化后，获取或设置 header 选项：

// getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// setter
$( ".selector" ).accordion( "option", "header", "h3" );	

• "auto"：所有的面板将会被设置为最高的面板的高度。
• "fill"：基于 accordion 的父元素的高度，扩展到可用的高度。
• "content"：每个面板的高度取决于它的内容。

代码实例：

初始化带有指定 heightStyle 选项的 accordion：

$( ".selector" ).accordion({ heightStyle: "fill" });	

在初始化后，获取或设置 heightStyle 选项：

// getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );	

• header （string，默认值："ui-icon-triangle-1-e"）
• activeHeader （string，默认值："ui-icon-triangle-1-s"）

代码实例：

初始化带有指定 icons 选项的 accordion：

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

在初始化后，获取或设置 icons 选项：

// getter
var icons = $( ".selector" ).accordion( "option", "icons" );
 
// setter
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );	

• 该方法不接受任何参数。

代码实例：

调用 destroy 方法：

$( ".selector" ).accordion( "destroy" );	

• 该方法不接受任何参数。

代码实例：

调用 disable 方法：

$( ".selector" ).accordion( "disable" );	

• 该方法不接受任何参数。

代码实例：

调用 enable 方法：

$( ".selector" ).accordion( "enable" );	

• optionName
  类型：String
  描述：要获取的选项的名称。

代码实例：

调用该方法：

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );	

• 该方法不接受任何参数。

代码实例：

调用该方法：

var options = $( ".selector" ).accordion( "option" );	

• optionName
  类型：String
  描述：要设置的选项的名称。
• value
  类型：Object
  描述：要为选项设置的值。

代码实例：

调用该方法：

$( ".selector" ).accordion( "option", "disabled", true );	

• options
  类型：Object
  描述：要设置的 option-value 对。

代码实例：

调用该方法：

$( ".selector" ).accordion( "option", { disabled: true } );	

• 该方法不接受任何参数。

代码实例：

调用 refresh 方法：

$( ".selector" ).accordion( "refresh" );	

• 该方法不接受任何参数。

代码实例：

调用 widget 方法：

var widget = $( ".selector" ).accordion( "widget" );	

注意：由于 activate 事件只有在面板激活时才能触发，当创建 accordion 部件时，最初的面板不会触发该事件。如果您需要一个用于部件创建的钩，请使用 create 事件。

• event
  类型：Event
• ui
  类型：Object
  • newHeader
    类型：jQuery
    描述：刚被激活的标题。
  • oldHeader
    类型：jQuery
    描述：刚被取消激活的标题。
  • newPanel
    类型：jQuery
    描述：刚被激活的面板。
  • oldPanel
    类型：jQuery
    描述：刚被取消激活的面板。

代码实例：

初始化带有指定 activate 回调的 accordion：

$( ".selector" ).accordion({
  activate: function( event, ui ) {}
});	

绑定一个事件监听器到 accordionactivate 事件：

$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );	

• event
  类型：Event
• ui
  类型：Object
  • newHeader
    类型：jQuery
    描述：将被激活的标题。
  • oldHeader
    类型：jQuery
    描述：将被取消激活的标题。
  • newPanel
    类型：jQuery
    描述：将被激活的面板。
  • oldPanel
    类型：jQuery
    描述：将被取消激活的面板。

代码实例：

初始化带有指定 beforeActivate 回调的 accordion：

$( ".selector" ).accordion({
  beforeActivate: function( event, ui ) {}
});	

绑定一个事件监听器到 accordionbeforeactivate 事件：

$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );	

• event
  类型：Event
• ui
  类型：Object
  • header
    类型：jQuery
    描述：激活的标题。
  • panel
    类型：jQuery
    描述：激活的面板。

代码实例：

初始化带有指定 create 回调的 accordion：

$( ".selector" ).accordion({
  create: function( event, ui ) {}
});	

绑定一个事件监听器到 accordioncreate 事件：

$( ".selector" ).on( "accordioncreate", function( event, ui ) {} );