折叠组 data-role=collapsible-set

折叠组的标记和单个的折叠区域的标记的开头是一样的。将若干可折叠区域用一个容器包裹,再给此容器增加data-role="collapsible-set" 属性,框架会自动将这些可折叠的部件组合成为一个视觉上成组的部件,使他们看上去像手风琴,并且在同一个时间只会有一个容器是展开的。

默认情况下,手风琴中所有的部件都是收缩起来的。如果想设置某个部件是打开的,可以给这个部件的标题容器添加data-collapsed="false"属性。

<div data-role="collapsible-set">
	<div data-role="collapsible" data-collapsed="false">
		<h3>Section 1</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
	</div>
	<div data-role="collapsible">
		<h3>Section 2</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
	</div>
	<div data-role="collapsible">
		<h3>Section 3</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
	</div>
	<div data-role="collapsible">
		<h3>Section 4</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
	</div>
	<div data-role="collapsible">
		<h3>Section 5</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
	</div>
</div>

  

全屏宽度无角造型 data-inset="false"

默认情况下,折叠区域两头有圆角等。若要让他们全屏宽度无角造型,给容器添加 data-inset="false" 属性。

<div data-role="collapsible-set" data-inset="false">
	<div data-role="collapsible">
		<h3>I'm a header</h3>
		<p>I'm the collapsible content.</p>
	</div>
	<div data-role="collapsible">
		<h3>I'm a header</h3>
		<p>I'm the collapsible content.</p>
	</div>
	<div data-role="collapsible">
		<h3>I'm a header</h3>
		<p>I'm the collapsible content.</p>
	</div>
</div>

  

迷你版 data-mini="true"

一个更紧凑的版本,在工具栏和紧空间是有用的,添加 data-mini="true" 属性即可

 
<div data-role="page" style="max-height:210px; min-height:210px;">
	<div data-role="content" > 
		<div data-role="collapsible-set" data-theme="c" data-mini="true">
			<div data-role="collapsible">
				<h3>Section 1</h3>
				<p>Collapsible content</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 2</h3>
				<p>Collapsible content</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 3</h3>
				<p>Collapsible content</p>
			</div>
		</div>
	</div>
</div>
</body>

  

自定义图标 data-collapsed-icon和data-expanded-icon

头部标题的默认图标是能自定义的。使用data-collapsed-icon和data-expanded-icon属性,在collapsible-set容器内添加,或者每个单独的容器内添加,这两个属性来实现自定义。

<div data-role="page" style="max-height:240px; min-height:240px;">
	<div data-role="content" > 
		<div data-role="collapsible-set" data-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
			<div data-role="collapsible">
				<h3>Section 1</h3>
				<p>Collapsible content</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 2</h3>
				<p>Collapsible content</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 3</h3>
				<p>Collapsible content</p>
			</div>
		</div>
	</div>
</div>

  

图标定位 data-iconpos

图标默认是在左侧,但是可以自定义的。在collapsible-set容器或者每个单独的容器内添加data-iconpos属性来定位。取值:left、right、top、bottom、none、notext。

<div data-role="page" style="max-height:310px; min-height:310px;">
	<div data-role="content" > 
		<div data-role="collapsible-set" data-theme="c" data-iconpos="right">
			<div data-role="collapsible">
				<h3>Section 1</h3>
				<p>Inherits icon positioning from data-iconpos="right" attribute on parent.</p>
			</div>
			<div data-role="collapsible" data-iconpos="left">
				<h3>Section 2</h3>
				<p>data-iconpos="left"</p>
			</div>
			<div data-role="collapsible" data-iconpos="bottom">
				<h3>Section 3</h3>
				<p>data-iconpos="bottom"</p>
			</div>
			<div data-role="collapsible" data-iconpos="top">
				<h3>Section 4</h3>
				<p>data-iconpos="top"</p>
			</div>
		</div>
	</div>
</div>

  

主题样式 data-theme和data-content-theme

设置折叠主题的颜色、背景颜色和边框,给collapsible-set容器或者每个可折叠容器,添加data-theme、data-content-theme属性。

<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
			<div data-role="collapsible">
				<h3>Section 1</h3>
				<p>Collapsible content</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 2</h3>
				<p>Collapsible content</p>
			</div>
			<div data-role="collapsible">
				<h3>Section 3</h3>
				<p>Collapsible content</p>
			</div>
</div>



  

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 235px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 235px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head> 
<body> 
<div data-role="page" style="max-height:240px; min-height:240px;">
	<div data-role="content" > 
		<div data-role="collapsible-set" data-content-theme="c">
			<div data-role="collapsible" data-theme="b" data-content-theme="b">
				<h3>Section header, swatch B</h3>
				<p>Collapsible content, swatch "b"</p>
			</div>
			<div data-role="collapsible" data-theme="a" data-content-theme="a">
				<h3>Section header, swatch A</h3>
				<p>Collapsible content, swatch "a"</p>
			</div>
			<div data-role="collapsible" data-theme="e" data-content-theme="d">
				<h3>Section header, swatch E</h3>
				<p>Collapsible content, swatch "d"</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>