Accordion Widget

Categories: Widgets

Accordion Widgetversion added: 1.0

Description: 使一对标题和内容面板转换成折叠面板（Accordion）。

QuickNavExamples

Options

Methods

Events

你的accordion容器需要按照一个元素成组的满足拥有配对的头部和内容面板的格式要求：

1
2
3
4
5
6
 
<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

Accordions （折叠面板）支持任意的标记，但每个内容面板必须始终是 其相关联头部之后的下一个兄弟节点。请参阅有关如何使用自定义标记结构的header选项。

面板可以通过设置 active选项来激活。

键盘交互(Keyboard interaction)

当焦点在标题（header）上时，下面的键盘命令可用：

  • UP/LEFT - 移动焦点到上一个标题（header）。如果在第一个标题（header）上，则移动焦点到最后一个标题（header）上。
  • DOWN/RIGHT - 移动焦点到下一个标题（header）。如果在最后一个标题（header）上，则移动焦点到第一个标题（header）上。
  • HOME - 移动焦点到第一个标题（header）上。
  • END - 移动焦点到最后一个标题（header）上。
  • SPACE/ENTER - 激活与获得焦点的标题（header）相关的面板（panel）。

当焦点在面板（panel）中时，下面的键盘命令可用：

  • CTRL+UP: 移动焦点到相关的标题（header）。

主题(Theming)

折叠面板部件（Accordion Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用折叠面板指定的样式，则可以使用下面的 CSS class 名称： ui-accordion：折叠面板的外层容器。 ui-accordion-header：折叠面板的标题。如果标题包含 icons，则标题会另外有个 ui-accordion-icons class。 ui-accordion-content：折叠面板的内容面板。

折叠面板部件（Accordion Widget）使用 jQuery UI CSS framework 框架 来定义它的外观和感观的样式。如果需要使用折叠面板指定的样式，则可以使用下面的 CSS class 名称：

  • ui-accordion: 折叠面板的外层容器。
    • ui-accordion-header: 折叠面板的标题。如果标题包含 icons，则标题会另外有个 ui-accordion-icons class。
    • ui-accordion-content: 折叠面板的内容面板。

依赖

其他注意事项:

  • 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。

选项

activeType: Boolean or Integer

Default: 0
当前打开哪一个面板。
支持多个类型：
  • Boolean:设置 active 为 false 将折叠所有的面板。这要求 collapsible 选项必须为 true。
  • Integer: 激活打开的面板索引，以零为基础。负值则表示从最后一个面板后退选择面板。
Code examples:

初始化带有指定 active选项的 Accordion（折叠面板）：

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

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

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

animateType: Boolean or Number or String or Object

Default: {}
是否使用动画改变面板，且如何使用动画改变面板。
支持多个类型：
  • Boolean:false 值将禁用动画。
  • Number: 默认 easing 动画的持续时间，以毫秒为单位。
  • String: 默认的持续时间要使用的 easing 动画形式 名称。
  • Object: easing 和 duration 属性的动画设置。
    • 上面任意的选项都可以包含 down 属性。
    • 当被激活的面板有一个比当前激活面板较低的指数时，发生 "Down" 动画。
Code examples:

初始化带有指定 animate选项的 Accordion（折叠面板）：

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

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

1
2
3
4
5
 
// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );

collapsibleType: Boolean

Default: false
所有部分是否都可以马上关闭。允许折叠激活的部分。
Code examples:

初始化带有指定 collapsible选项的 Accordion（折叠面板）：

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

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

1
2
3
4
5
 
// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// setter
$( ".selector" ).accordion( "option", "collapsible", true );

disabledType: Boolean

Default: false
如果设置为 true，则禁用该 Accordion（折叠面板）。
Code examples:

初始化带有指定 disabled选项的 Accordion（折叠面板）：

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

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

1
2
3
4
5
 
// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// setter
$( ".selector" ).accordion( "option", "disabled", true );

eventType: String

Default: "click"
Accordion（折叠面板） 头部会作出反应的事件，用以激活相关的面板。可以指定多个事件，用空格隔开。
Code examples:

初始化带有指定 event选项的 Accordion（折叠面板）：

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

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

1
2
3
4
5
 
// getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );

headerType: Selector

Default: "> li > :first-child,> :not(li):even"

标题元素的选择器，通过主要 accordion 元素上的 .find() 进行应用。内容面板必须是紧跟在与其相关的标题后的同级元素。

Code examples:

初始化带有指定 header选项的 Accordion（折叠面板）：

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

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

1
2
3
4
5
 
// getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// setter
$( ".selector" ).accordion( "option", "header", "h3" );

heightStyleType: String

Default: "auto"

控制 Accordion（折叠面板） 和每个面板的高度。可能的值：

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

初始化带有指定 heightStyle选项的 Accordion（折叠面板）：

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

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

1
2
3
4
5
 
// getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );

iconsType: Object

Default: { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }

标题要使用的图标，与 jQuery UI CSS 框架提供的图标（Icons） 匹配。设置为 false 则不显示图标。

  • header (string, 默认值： "ui-icon-triangle-1-e")
  • activeHeader (string, 默认值： "ui-icon-triangle-1-s")
Code examples:

初始化带有指定 icons选项的 Accordion（折叠面板）：

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

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

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

Methods

destroy()Returns: jQuery (plugin only)

完全移除 accordion 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。
Code examples:

调用 destroy 方法：

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

disable()Returns: jQuery (plugin only)

禁用 accordion。
  • 该方法不接受任何参数。
Code examples:

调用 disable 方法：

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

enable()Returns: jQuery (plugin only)

启用 accordion。
  • 该方法不接受任何参数。
Code examples:

调用 enable 方法：

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

option( optionName )Returns: Object

获取当前与指定的 optionName 关联的值。
  • optionName
    Type: String
    要获取值的选项的名称。
Code examples:

调用该方法：

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

option()Returns: PlainObject

获取一个包含键/值对的对象，键/值对表示当前 accordion 选项哈希。
  • 该方法不接受任何参数。
Code examples:

调用该方法：

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

option( optionName, value )Returns: jQuery (plugin only)

设置与指定的 optionName 关联的 accordion 选项的值。
  • optionName
    Type: String
    要设置的选项的名称。
  • value
    Type: Object
    要为选项设置的值。
Code examples:

调用该方法：

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

option( options )Returns: jQuery (plugin only)

为 accordion 设置一个或多个选项。
  • options
    Type: Object
    要设置的 option-value 对。
Code examples:

调用该方法：

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

refresh()Returns: jQuery (plugin only)

处理任何在 DOM 中直接添加或移除的标题和面板，并重新计算 accordion 的高度。结果取决于内容和 heightStyle 选项。
  • 该方法不接受任何参数。
Code examples:

调用 refresh 方法：

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

widget()Returns: jQuery

返回一个包含 accordion 的 jQuery 对象。
  • 该方法不接受任何参数。
Code examples:

调用 widget 方法：

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

Events

activate( event, ui )Type: accordionactivate

面板被激活后触发（在动画完成之后）。如果 accordion 之前是折叠的，则 ui.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠，则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象。

注意： 由于 activate 事件只有在面板激活时才能触发，当创建 accordion 部件时，最初的面板不会触发该事件。如果您需要一个用于部件创建的钩，请使用 create 事件。
  • event
    Type: Event
  • ui
    Type: Object
    • newHeader
      Type: jQuery
      刚被激活的标题。
    • oldHeader
      Type: jQuery
      刚被取消激活的标题。
    • newPanel
      Type: jQuery
      刚被激活的面板。
    • oldPanel
      Type: jQuery
      刚被取消激活的面板。
Code examples:

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

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

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

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

beforeActivate( event, ui )Type: accordionbeforeactivate

面板被激活前直接触发。可以取消以防止面板被激活。如果 accordion 当前是折叠的，则 ui.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠，则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象。
  • event
    Type: Event
  • ui
    Type: Object
    • newHeader
      Type: jQuery
      将被激活的标题。
    • oldHeader
      Type: jQuery
      将被取消激活的标题。
    • newPanel
      Type: jQuery
      将被激活的面板。
    • oldPanel
      Type: jQuery
      将被取消激活的面板。
Code examples:

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

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

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

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

create( event, ui )Type: accordioncreate

当创建 accordion 时触发。如果 accordion 是折叠的，ui.header 和 ui.panel 将是空的 jQuery 对象。
Code examples:

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

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

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

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

Example:

一个简单的 jQuery UI 折叠面板（Accordion）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
    Nam mi. Proin viverra leo ut odio.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>
 
<script>
$( "#accordion" ).accordion();
</script>
 
</body>
</html>

Demo: