目录
一、基本信息
描述:创建一组可折叠块内容。
1.1、Sets of collapsibles
如果你将一堆可折叠组件包裹于一个带data-role=”collapsible–set”的div容器内,那么jQuery Mobile框架会在视觉上将他们聚合起来,并且在这些视觉上聚合在一起的可折叠组件中,你展开其中一个可折叠组件时,其他的可折叠组件会被折叠,就像手风琴效果一般。
默认情况下,可折叠组件的可折叠区是处于折叠状态的。若想让某个可折叠区在一开始显示时就处于展开状态,可以改可折叠区的头部加上data-collapsed=”false”。
<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、设定可折叠内容的主题
<div data-role=”collapsible-set” data-theme=”b” data-content-theme=”a”>
1.7、设定collapsibleset组件中单个可折叠区的主题
在单个可折叠区上应用data-theme和data-content-theme。
1.8、提供预渲染标记
<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
<!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日于上海。