外观
Skip to content
jQuery Mobile: Collapsibleset Widget
一、基本信息
描述：创建一组可折叠块内容。
1.1、Sets of collapsibles
如果你将一堆可折叠组件包裹于一个带data-role="collapsible-set"的div容器内，那么jQuery Mobile框架会在视觉上将他们聚合起来，并且在这些视觉上聚合在一起的可折叠组件中，你展开其中一个可折叠组件时，其他的可折叠组件会被折叠，就像手风琴效果一般。 默认情况下，可折叠组件的可折叠区是处于折叠状态的。若想让某个可折叠区在一开始显示时就处于展开状态，可以改可折叠区的头部加上 data-collapsed="false"。
html
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>
I'm the collapsibleset content for section 1. My content is initially
visible.
</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsibleset content for section 2.</p>
</div>
</div>1.2、非内嵌collapsibleset组件
通过在data-role="collapsible-set"容器上应用data-inset="false"可以获取全宽无角可折叠组件。
1.3、迷你collapsibleset组件
通过在data-role="collapsible-set"容器上应用data-mini="true"可获得迷你版collapsibleset组件。
1.4、自定义图标
通过在data-role="collapsible-set"容器上应用data-collapsed-icon和data-expanded-icon可以自定义所有可折叠组件在折叠和展开状态下需要显示的图标，当然你也可以针对个别可折叠组件对组件本身另外设定data-collapsed-icon和data-expanded-icon。
1.5、定义图标的位置
通过在data-role="collapsible-set"容器上应用data-iconpos可定义图标的位置。也可以仅在单个collapse组件上应用data-iconpos，只不过这样只会对这单个collapse组件产生效果。
1.6、设定可折叠内容的主题
html
<div data-role="collapsible-set" data-theme="b" data-content-theme="a"></div>1.7、设定collapsibleset组件中单个可折叠区的主题
在单个可折叠区上应用data-theme和data-content-theme。
1.8、提供预渲染标记
html
<div data-role="collapsibleset" class="ui-collapsible-set" data-corners="false">
<div data-role="collapsible">
<h2>Child collapsible</h2>
<p>This is the collapsible content.</p>
</div>
<div
data-role="collapsible"
data-enhanced="true"
class="ui-collapsible ui-collapsible-inset ui-corner-all"
data-collapsed="false"
data-corners="true"
>
<h2 class="ui-collapsible-heading">
<a
href="#"
class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-minus"
>
Pre-rendered child collapsible
<span class="ui-collapsible-heading-status"
>click to collapse contents</span
>
</a>
</h2>
<div class="ui-collapsible-content" aria-hidden="false">
<p>This is the collapsible content.</p>
</div>
</div>
</div>二、选项
2.1、collapsedIcon
字符串型，默认值为"plus"。
2.2、corners
2.3、defaults
2.4、disabled
2.5、enhanced
2.6、expandedIcon
2.7、iconpos
2.8、initSelector
2.9、inset
2.10、mini
三、方法
destroy()、disable()、enable()、option( optionName )、option()、option( optionName, value )、option( options )、refresh()
四、事件
create( event, ui )
五、DEMO
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>collapsibleset demo</title>
<link
rel="stylesheet"
href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
/>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header"><h1>jQuery Mobile Example</h1></div>
<div role="main" class="ui-content">
<div data-role="collapsibleset">
<div data-role="collapsible" data-collapsed="false">
<h3>Section A</h3>
<p>I'm the collapsibleset content for section A.</p>
</div>
<div data-role="collapsible">
<h3>Section B</h3>
<p>I'm the collapsibleset content for section B.</p>
</div>
</div>
</div>
</div>
</body>
</html>以上，滕运锋，2016年1月1日于上海。