jQuery UI API – 折叠面板部件(Accordion Widget)
最后更新于:2022-03-26 23:50:25
jQuery UI API – 折叠面板部件(Accordion Widget)
所属类别
用法
描述:把一对标题和内容面板转换成折叠面板。
版本新增: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 | Boolean 或 Integer | 当前打开哪一个面板。
支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).accordion({ active: 2 }); 在初始化后,获取或设置 // getter var active = $( ".selector" ).accordion( "option", "active" ); // setter $( ".selector" ).accordion( "option", "active", 2 ); |
0 |
animate | Boolean 或 Number 或 String 或 Object | 是否使用动画改变面板,且如何使用动画改变面板。
支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).accordion({ animate: "bounceslide" }); 在初始化后,获取或设置 // getter var animate = $( ".selector" ).accordion( "option", "animate" ); // setter $( ".selector" ).accordion( "option", "animate", "bounceslide" ); |
{} |
collapsible | Boolean | 所有部分是否都可以马上关闭。允许折叠激活的部分。
代码实例: 初始化带有指定 $( ".selector" ).accordion({ collapsible: true }); 在初始化后,获取或设置 // getter var collapsible = $( ".selector" ).accordion( "option", "collapsible" ); // setter $( ".selector" ).accordion( "option", "collapsible", true ); |
false |
disabled | Boolean | 如果设置为 true ,则禁用该 accordion。
代码实例: 初始化带有指定 $( ".selector" ).accordion({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).accordion( "option", "disabled" ); // setter $( ".selector" ).accordion( "option", "disabled", true ); |
false |
event | String | accordion 头部会作出反应的事件,用以激活相关的面板。可以指定多个事件,用空格间隔。
代码实例: 初始化带有指定 $( ".selector" ).accordion({ event: "mouseover" }); 在初始化后,获取或设置 // getter var event = $( ".selector" ).accordion( "option", "event" ); // setter $( ".selector" ).accordion( "option", "event", "mouseover" ); |
“click” |
header | Selector | 标题元素的选择器,通过主要 accordion 元素上的 .find() 进行应用。内容面板必须是紧跟在与其相关的标题后的同级元素。
代码实例: 初始化带有指定 $( ".selector" ).accordion({ header: "h3" }); 在初始化后,获取或设置 // getter var header = $( ".selector" ).accordion( "option", "header" ); // setter $( ".selector" ).accordion( "option", "header", "h3" ); |
“> li > :first-child,> :not(li):even” |
heightStyle | String | 控制 accordion 和每个面板的高度。可能的值:
代码实例: 初始化带有指定 $( ".selector" ).accordion({ heightStyle: "fill" }); 在初始化后,获取或设置 // getter var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" ); // setter $( ".selector" ).accordion( "option", "heightStyle", "fill" ); |
“auto” |
icons | Object | 标题要使用的图标,与 jQuery UI CSS 框架提供的图标(Icons) 匹配。设置为 false 则不显示图标。
代码实例: 初始化带有指定 $( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }); 在初始化后,获取或设置 // 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 关联的值。
代码实例: 调用该方法: var isDisabled = $( ".selector" ).accordion( "option", "disabled" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 accordion 选项哈希。
代码实例: 调用该方法: var options = $( ".selector" ).accordion( "option" ); |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 accordion 选项的值。
代码实例: 调用该方法: $( ".selector" ).accordion( "option", "disabled", true ); |
option( options ) | jQuery (plugin only) | 为 accordion 设置一个或多个选项。
代码实例: 调用该方法: $( ".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.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠,则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象。
注意:由于
代码实例: 初始化带有指定 activate 回调的 accordion: $( ".selector" ).accordion({ activate: function( event, ui ) {} }); 绑定一个事件监听器到 accordionactivate 事件: $( ".selector" ).on( "accordionactivate", function( event, ui ) {} ); |
beforeActivate( event, ui ) | accordionbeforeactivate | 面板被激活前直接触发。可以取消以防止面板被激活。如果 accordion 当前是折叠的,则 ui.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠,则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象。
代码实例: 初始化带有指定 beforeActivate 回调的 accordion: $( ".selector" ).accordion({ beforeActivate: function( event, ui ) {} }); 绑定一个事件监听器到 accordionbeforeactivate 事件: $( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} ); |
create( event, ui ) | accordioncreate | 当创建 accordion 时触发。如果 accordion 是折叠的,ui.header 和 ui.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>