描述:把一对标题和内容面板转换成折叠面板。
版本新增: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)上时,下面的键盘命令可用:
当焦点在面板(panel)中时,下面的键盘命令可用:
折叠面板部件(Accordion Widget)使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用折叠面板指定的样式,则可以使用下面的 CSS class 名称:
ui-accordion
:折叠面板的外层容器。ui-accordion-header
:折叠面板的标题。如果标题包含 icons
,则标题会另外有个 ui-accordion-icons
class。ui-accordion-content
:折叠面板的内容面板。animate
选项一起使用时)选项 | 方法 | 事件 |
---|---|---|
activeanimatecollapsibledisabledeventheaderheightStyleicons | destroydisableenableoptionrefreshwidget | activatebeforeActivatecreate |
类型:Boolean 或 Integer
描述:当前打开哪一个面板。
支持多个类型:
active
为 false
将折叠所有的面板。这要求 collapsible
选项必须为 true
。代码实例:
初始化带有指定 active
选项的 accordion:
$( ".selector" ).accordion({ active: 2 });
在初始化后,获取或设置 active
选项:
// getter
var active = $( ".selector" ).accordion( "option", "active" );
// setter
$( ".selector" ).accordion( "option", "active", 2 );
默认值:0
类型:Boolean 或 Number 或 String 或 Object
描述:是否使用动画改变面板,且如何使用动画改变面板。
支持多个类型:
false
值将禁用动画。Object:easing
和 duration
属性的动画设置。
上面任意的选项都可以包含 down
属性。
代码实例:
初始化带有指定 animate
选项的 accordion:
$( ".selector" ).accordion({ animate: "bounceslide" });
在初始化后,获取或设置 animate
选项:
// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );
默认值:{}
类型:Boolean
描述:所有部分是否都可以马上关闭。允许折叠激活的部分。
代码实例:
初始化带有指定 collapsible
选项的 accordion:
$( ".selector" ).accordion({ collapsible: true });
在初始化后,获取或设置 collapsible
选项:
// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
// setter
$( ".selector" ).accordion( "option", "collapsible", true );
默认值:false
类型:Boolean
描述:如果设置为 true
,则禁用该 accordion。
代码实例:
初始化带有指定 disabled
选项的 accordion:
$( ".selector" ).accordion({ disabled: true });
在初始化后,获取或设置 disabled
选项:
// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
// setter
$( ".selector" ).accordion( "option", "disabled", true );
默认值:false
类型:String
描述:accordion 头部会作出反应的事件,用以激活相关的面板。可以指定多个事件,用空格间隔。
代码实例:
初始化带有指定 event
选项的 accordion:
$( ".selector" ).accordion({ event: "mouseover" });
在初始化后,获取或设置 event
选项:
// getter
var event = $( ".selector" ).accordion( "option", "event" );
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );
默认值:"click"
类型: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"
类型: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"
类型:Object
描述:标题要使用的图标,与 jQuery UI CSS 框架提供的图标(Icons) 匹配。设置为 false
则不显示图标。
代码实例:
初始化带有指定 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" }
类型:jQuery (plugin only)
描述:完全移除 accordion 功能。这会把元素返回到它的预初始化状态。
代码实例:
调用 destroy 方法:
$( ".selector" ).accordion( "destroy" );
类型:jQuery (plugin only)
描述:禁用 accordion。
代码实例:
调用 disable 方法:
$( ".selector" ).accordion( "disable" );
类型:jQuery (plugin only)
描述:启用 accordion。
代码实例:
调用 enable 方法:
$( ".selector" ).accordion( "enable" );
类型:Object
描述:获取当前与指定的 optionName
关联的值。
代码实例:
调用该方法:
var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
类型:PlainObject
描述:获取一个包含键/值对的对象,键/值对表示当前 accordion 选项哈希。
代码实例:
调用该方法:
var options = $( ".selector" ).accordion( "option" );
类型:jQuery (plugin only)
描述:设置与指定的 optionName
关联的 accordion 选项的值。
代码实例:
调用该方法:
$( ".selector" ).accordion( "option", "disabled", true );
类型:jQuery (plugin only)
描述:为 accordion 设置一个或多个选项。
代码实例:
调用该方法:
$( ".selector" ).accordion( "option", { disabled: true } );
类型:jQuery (plugin only)
描述:处理任何在 DOM 中直接添加或移除的标题和面板,并重新计算 accordion 的高度。结果取决于内容和 [heightStyle](#option-heightStyle )
选项。
代码实例:
调用 refresh 方法:
$( ".selector" ).accordion( "refresh" );
类型:jQuery
描述:返回一个包含 accordion 的 jQuery
对象。
代码实例:
调用 widget 方法:
var widget = $( ".selector" ).accordion( "widget" );
类型:accordionactivate
描述:面板被激活后触发(在动画完成之后)。如果 accordion 之前是折叠的,则 ui.oldHeader
和 ui.oldPanel
将是空的 jQuery 对象。如果 accordion 正在折叠,则 ui.newHeader
和 ui.newPanel
将是空的 jQuery 对象。
注意:由于 activate
事件只有在面板激活时才能触发,当创建 accordion 部件时,最初的面板不会触发该事件。如果您需要一个用于部件创建的钩,请使用 create
事件。
代码实例:
初始化带有指定 activate 回调的 accordion:
$( ".selector" ).accordion({
activate: function( event, ui ) {}
});
绑定一个事件监听器到 accordionactivate 事件:
$( ".selector" ).on( "accordionactivate", function( 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 ) {} );
类型: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>