折叠面板部件（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 ) {} );