非常教程

jQuery UI 教程教程

jQuery UI API – 折叠面板部件(Accordion Widget)

jQuery UI API – 折叠面板部件(Accordion Widget)

jQuery UI API - 折叠面板部件(Accordion Widget)

所属类别

小部件(Widgets)

用法

描述:把一对标题和内容面板转换成折叠面板。

版本新增:1.0

折叠面板容器的标记需要一对标题和内容面板。

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

折叠面板支持任意标记,但是每个内容面板必须是与其相关的头部面板的下一个同级。请查看 header 选项了解如何使用自定义的标记结构。

面板可以通过设置 active 选项以编程的方式激活。

键盘交互

当焦点在标题(header)上时,下面的键盘命令可用:

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

当焦点在面板(panel)中时,下面的键盘命令可用:

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

主题化

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

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

依赖

  • UI 核心(UI Core)
  • 部件库(Widget Factory)
  • 特效核心(Effects Core)(可选的;当与 animate 选项一起使用时)

附加说明

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

快速导航

选项 方法 事件
active
animate
collapsible
disabled
event
header
heightStyle
icons
destroy
disable
enable
option
refresh
widget
activate
beforeActivate
create

选项 类型 描述 默认值
active Boolean 或 Integer 当前打开哪一个面板。

支持多个类型:

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

代码实例:

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

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

在初始化后,获取或设置 active 选项:

// getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// setter
$( ".selector" ).accordion( "option", "active", 2 );
    
0
animate Boolean 或 Number 或 String 或 Object 是否使用动画改变面板,且如何使用动画改变面板。

支持多个类型:

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

代码实例:

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

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

在初始化后,获取或设置 animate 选项:

// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );
    
{}
collapsible Boolean 所有部分是否都可以马上关闭。允许折叠激活的部分。

代码实例:

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

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

在初始化后,获取或设置 collapsible 选项:

// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// setter
$( ".selector" ).accordion( "option", "collapsible", true );
    
false
disabled Boolean 如果设置为 true,则禁用该 accordion。

代码实例:

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

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

在初始化后,获取或设置 disabled 选项:

// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// setter
$( ".selector" ).accordion( "option", "disabled", true );
    
false
event String accordion 头部会作出反应的事件,用以激活相关的面板。可以指定多个事件,用空格间隔。

代码实例:

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

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

在初始化后,获取或设置 event 选项:

// getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );
    
"click"
header Selector 标题元素的选择器,通过主要 accordion 元素上的 .find() 进行应用。内容面板必须是紧跟在与其相关的标题后的同级元素。

代码实例:

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

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

在初始化后,获取或设置 header 选项:

// getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// setter
$( ".selector" ).accordion( "option", "header", "h3" );
    
"> li > :first-child,> :not(li):even"
heightStyle String 控制 accordion 和每个面板的高度。可能的值:
  • "auto":所有的面板将会被设置为最高的面板的高度。
  • "fill":基于 accordion 的父元素的高度,扩展到可用的高度。
  • "content":每个面板的高度取决于它的内容。

代码实例:

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

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

在初始化后,获取或设置 heightStyle 选项:

// getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );
    
"auto"
icons Object 标题要使用的图标,与 jQuery UI CSS 框架提供的图标(Icons) 匹配。设置为 false 则不显示图标。
  • 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" } );
    
{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }

方法 返回 描述
destroy() jQuery (plugin only) 完全移除 accordion 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。

代码实例:

调用 destroy 方法:

$( ".selector" ).accordion( "destroy" );
    
disable() jQuery (plugin only) 禁用 accordion。
  • 该方法不接受任何参数。

代码实例:

调用 disable 方法:

$( ".selector" ).accordion( "disable" );
    
enable() jQuery (plugin only) 启用 accordion。
  • 该方法不接受任何参数。

代码实例:

调用 enable 方法:

$( ".selector" ).accordion( "enable" );
    
option( optionName ) Object 获取当前与指定的 optionName 关联的值。
  • optionName
    类型:String
    描述:要获取的选项的名称。

代码实例:

调用该方法:

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
    
option() PlainObject 获取一个包含键/值对的对象,键/值对表示当前 accordion 选项哈希。
  • 该方法不接受任何参数。

代码实例:

调用该方法:

var options = $( ".selector" ).accordion( "option" );
    
option( optionName, value ) jQuery (plugin only) 设置与指定的 optionName 关联的 accordion 选项的值。
  • optionName
    类型:String
    描述:要设置的选项的名称。
  • value
    类型:Object
    描述:要为选项设置的值。

代码实例:

调用该方法:

$( ".selector" ).accordion( "option", "disabled", true );
    
option( options ) jQuery (plugin only) 为 accordion 设置一个或多个选项。
  • options
    类型:Object
    描述:要设置的 option-value 对。

代码实例:

调用该方法:

$( ".selector" ).accordion( "option", { disabled: true } );
    
refresh() jQuery (plugin only) 处理任何在 DOM 中直接添加或移除的标题和面板,并重新计算 accordion 的高度。结果取决于内容和 heightStyle 选项。
  • 该方法不接受任何参数。

代码实例:

调用 refresh 方法:

$( ".selector" ).accordion( "refresh" );
    
widget() jQuery 返回一个包含 accordion 的 jQuery 对象。
  • 该方法不接受任何参数。

代码实例:

调用 widget 方法:

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

事件 类型 描述
activate( event, ui ) accordionactivate 面板被激活后触发(在动画完成之后)。如果 accordion 之前是折叠的,则 ui.oldHeaderui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠,则 ui.newHeaderui.newPanel 将是空的 jQuery 对象。

注意:由于 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 ) {} );
    
beforeActivate( event, ui ) accordionbeforeactivate 面板被激活前直接触发。可以取消以防止面板被激活。如果 accordion 当前是折叠的,则 ui.oldHeaderui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠,则 ui.newHeaderui.newPanel 将是空的 jQuery 对象。
  • 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 ) {} );
    
create( event, ui ) accordioncreate 当创建 accordion 时触发。如果 accordion 是折叠的,ui.headerui.panel 将是空的 jQuery 对象。
  • event
    类型:Event
  • ui
    类型:Object
    • header
      类型:jQuery
      描述:激活的标题。
    • panel
      类型:jQuery
      描述:激活的面板。

代码实例:

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

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

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

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

实例

一个简单的 jQuery UI 折叠面板(Accordion)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>折叠面板部件(Accordion Widget)演示</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>部分 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>部分 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>部分 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>

jQuery UI API – 折叠面板部件(Accordion Widget)
jQuery UI 教程

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题,可用于创建高度交互的 Web 应用程序。

jQuery UI 教程目录

1.jQuery UI 简介
2.jQuery UI 教程
3.jQuery UI CSS 框架 API
4.jQuery UI 主题
5.jQuery UI 工作原理
6.jQuery UI 如何使用部件库
7.jQuery UI 为什么使用部件库
8.jQuery UI 小部件方法调用
9.jQuery UI 通过部件库扩展小部件
10.jQuery UI 部件库
11.jQuery UI 设计主题
12.jQuery UI API 类别 – UI 核心
13.jQuery UI API 类别 – 主题
14.jQuery UI API 类别 – 选择器
15.jQuery UI API 类别 – 方法
16.jQuery UI API 类别 – 方法重载
17.jQuery UI API 类别 – 交互
18.jQuery UI API 类别 – 特效核心
19.jQuery UI API 类别 – 特效
20.jQuery UI API 文档
21.jQuery UI API – 颜色动画(Color Animation)
22.jQuery UI API – 剪辑特效(Clip Effect)
23.jQuery UI API – 反弹特效(Bounce Effect)
24.jQuery UI API – 百叶窗特效(Blind Effect)
25.jQuery UI API – .addClass()
26.jQuery UI 实例
27.jQuery UI API 类别 – 小部件
28.jQuery UI API 类别 – 实用工具
29.jQuery UI API – 跳动特效(Pulsate Effect)
30.jQuery UI API – 膨胀特效(Puff Effect)
31.jQuery UI API – 突出特效(Highlight Effect)
32.jQuery UI API – .hide()
33.jQuery UI API – 折叠特效(Fold Effect)
34.jQuery UI API – 淡入淡出特效(Fade Effect)
35.jQuery UI API – 爆炸特效(Explode Effect)
36.jQuery UI API – .effect()
37.jQuery UI API – Easings
38.jQuery UI API – 降落特效(Drop Effect)
39.jQuery UI API – 转移特效(Transfer Effect)
40.jQuery UI API – .toggleClass()
41.jQuery UI API – .toggle()
42.jQuery UI API – .switchClass()
43.jQuery UI API – 滑动特效(Slide Effect)
44.jQuery UI API – 尺寸特效(Size Effect)
45.jQuery UI API – .show()
46.jQuery UI API – 震动特效(Shake Effect)
47.jQuery UI API – 缩放特效(Scale Effect)
48.jQuery UI API – .removeClass()
49.jQuery UI API – 可放置小部件(Droppable Widget)
50.jQuery UI API – 可拖拽小部件(Draggable Widget)
51.jQuery UI API – .enableSelection()
52.jQuery UI API – .disableSelection()
53.jQuery UI API – .position()
54.jQuery UI API – .focus()
55.jQuery UI API – 可排序小部件(Sortable Widget)
56.jQuery UI API – 可选择小部件(Selectable Widget)
57.jQuery UI API – 可调整尺寸小部件(Resizable Widget)
58.jQuery UI API – 鼠标交互(Mouse Interaction)
59.jQuery UI API – 堆叠元素(Stacking Elements)
60.jQuery UI API – 图标(Icons)
61.jQuery UI API – CSS 框架(CSS Framework)
62.jQuery UI API – :tabbable Selector
63.jQuery UI API – :focusable Selector
64.jQuery UI API – :data() Selector
65.jQuery UI API – .zIndex()
66.jQuery UI API – .uniqueId()
67.jQuery UI API – .scrollParent()
68.jQuery UI API – .removeUniqueId()
69.jQuery UI API – 插件桥(Widget Plugin Bridge)
70.jQuery UI API – 部件库(Widget Factory)
71.jQuery UI API – jQuery.ui.keyCode
72.jQuery UI API – 滑块部件(Slider Widget)
73.jQuery UI API – 进度条部件(Progressbar Widget)
74.jQuery UI API – 菜单部件(Menu Widget)
75.jQuery UI API – 对话框部件(Dialog Widget)
76.jQuery UI API – 日期选择器部件(Datepicker Widget)
77.jQuery UI API – 按钮部件(Button Widget)
78.jQuery UI API – 自动完成部件(Autocomplete Widget)
79.jQuery UI API – 折叠面板部件(Accordion Widget)
80.jQuery UI API – 工具提示框部件(Tooltip Widget)
81.jQuery UI API – 标签页部件(Tabs Widget)
82.jQuery UI API – 旋转器部件(Spinner Widget)
83.jQuery UI 实例 – 缩放(Resizable)
84.jQuery UI 实例 – 放置(Droppable)
85.jQuery UI 实例 – 拖动(Draggable)
86.jQuery UI 实例 – 滑块(Slider)
87.jQuery UI 实例 – 进度条(Progressbar)
88.jQuery UI 实例 – 菜单(Menu)
89.jQuery UI 实例 – 对话框(Dialog)
90.jQuery UI 实例 – 日期选择器(Datepicker)
91.jQuery UI 实例 – 按钮(Button)
92.jQuery UI 实例 – 自动完成(Autocomplete)
93.jQuery UI 实例 – 折叠面板(Accordion)
94.jQuery UI 实例 – 排序(Sortable)
95.jQuery UI 实例 – 选择(Selectable)
96.jQuery UI 实例 – 切换 Class(Toggle Class)
97.jQuery UI 实例 – 移除 Class(Remove Class)
98.jQuery UI 实例 – 添加 Class(Add Class)
99.jQuery UI 实例 – 切换(Toggle)
100.jQuery UI 实例 – 隐藏(Hide)