折叠组标记 Collapsible set markup
折叠组的标记和单个的折叠区域的标记的开头是一样的。将若干可折叠区域用一个容器包裹,再给此容器增加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 set content for section B.</p> </div> <div data-role="collapsible"> <h3>Section 2</h3> <p>I'm the collapsible set content for section B.</p> </div> </div>
如上所示:默认情况下,可折叠容器是展开的,可以通过通过点击头部收缩。给折叠的容器添加data-collapsed="true"的属性,可以设为默认收缩
给折叠组主题样式 Theming collapsible content
普通的data-theme属性可以加在手风琴组上来设定主题样式。如果想让手风琴组的标题单独设计主题样式,可以添加data-content-theme属性。
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
给每个折叠部件主题样式 Theming individual sections
如果想给组内的每个部件不同的主题样式,可以给每个部件单独添加data-theme 和data-content-theme 。