可折叠组件集

在jQuery Mobile中 一个accordion组件由一系列单个的可折叠组件分组成集而创建的。

标记

可折叠组件集以和同样标记的有着标题头和后面跟着可折叠内容的 individual collapsibles开头。通过给可折叠组件添加一个带有data-role="collapsible-set"属性的父包裹区块来展示视觉上分组的效果,这样就像一个accordion组件,因此一次只能有一个部分可以被展开。

Section 1

I'm the collapsible content for section 1

Section 2

I'm the collapsible content for section 2

Section 3

I'm the collapsible content for section 3

内置 vs. 全宽

对于全宽的无拐角造型的可折叠组件,向其集合添加一个data-inset="false"属性,这会使可折叠组件集看起来更像是一个可展开的 listview

Animals

  • Cats
  • Dogs
  • Lizards
  • Snakes

Cars

  • Acura
  • Audi
  • BMW
  • Cadillac

Planets

  • Earth
  • Jupiter
  • Mars
  • Mercury

小尺寸

在狭小的空间里对于一个比较紧凑的版本来说是非常有用的,可以给可折叠组件集添加data-mini="true"属性。

I'm a mini collapsible

This is good for tight spaces.

I'm another mini

Here's some collapsible content.

Last one

Final bit of collapsible content.

图标

无论是在collapsible-set层或者任何其单独的可折叠组件上,默认的可折叠组件标题头图标都可以通过设置data-collapsed-icon和data-expanded-icon属性来替换。

Icon set on the set

Specify the open and close icons on the set to apply it to all the collapsibles within.

Icon set on the set

This collapsible also gets the icon from the set.

Icon set on this collapsible

The icons here are applied to this collapsible specifically, thus overriding the set icons.

图标位置

无论是在collapsible-set层或者任何其单独的可折叠组件上,默认的可折叠组件标题头图标位置都可以通过设置data-iconpos属性来改变。

Right

Inherits icon positioning from data-iconpos="right" attribute on set.

Left

Set via data-iconpos="left" attribute on the collapsible

Bottom

Set via data-iconpos="bottom" attribute on the collapsible

Top

Set via data-iconpos="top" attribute on the collapsible

四角

通过添加data-corners="false"这个属性可以得到一个内置的没有圆角的可折叠组件集。

Section 1

Collapsible content

Section 2

Collapsible content

Section 3

Collapsible content

主题

通过给可折叠组件集添加data-theme这个属性来设置每个可折叠组件的标题头在其集合中的颜色。通过添加data-content-theme这个属性来指定可折叠组件内容的颜色。

Heading

Content

Heading

Content

为了让一个分组中个别的区块有不同的样式,可以给指定的可折叠组件设置data-theme和data-content-theme属性

Heading

Content

Heading

Content

Heading

Content