可折叠组件

可折叠组件是当你点击时可以展开或折叠内容的一种简单组件,它在移动端很有用,可以呈现一种紧凑的内容展示

基本的可折叠组件

要创建一个可折叠的区块,先创建一个容器,然后给容器添加data-role="collapsible"属性。容器内直接的标题(h1-h6)子结点,Jquery Mobile会将之表现为可点击的按钮,并在左侧添加一个“+"按钮,表示是可以展开的。 在头部后面你可以添加任何想要折叠的html标记。当点击标题时框架会自动把这些标记包裹在一个容器里用以折叠或显示

Heading

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

主题

添加data-theme属性来为可折叠组件设置一个主题,给包裹的区块添加data-content-theme属性来指定一个主题样本字母

Heading

I'm the collapsible content with a themed content block set to "b".

可折叠组件的内容默认会继承一个主题,通过设置data-content-theme属性为false可以去掉其主题

Heading

I'm the collapsible content without a theme.

已展开

通过给包裹的区块添加data-collapsed="false"属性可以让页面加载后展开内容

Heading

小尺寸

在工具栏里和狭小的空间对于一个更加紧凑的版本来说是有用的,可以给元素添加data-mini="true"属性来创建一个小尺寸的版本。

Heading

图标

可以通过使用data-collapsed-icon和data-expanded-icon属性来覆盖可折叠组件标题默认的图标。例子如下:data-collapsed-icon="carat-d"和data-expanded-icon="carat-u"

Heading

  • Read-only list item 1
  • Read-only list item 2
  • Read-only list item 3

图标的位置

可以通过使用data-iconpos属性来覆盖可折叠组件标题默认的图标位置。例子如下,data-iconpos="right"。

I'm a header

data-iconpos="right"

说明

对于表单, 可以为可折叠组件设置fieldset和legend标签

Legend

非内置的可折叠组件

默认情况下可折叠组件都有一种内置的形状,可以通过给元素添加data-inset="false"属性来让他们呈现出全宽无拐角造型

Heading

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

单个独立的可折叠组件集

下面是一系列单个的可折叠组件集的例子。 和可折叠组件集的不同之处在于它一次可以打开多个可折叠行。

Pets

Farm animals

Wild Animals

为了避免“双重”的边框,框架会移除紧跟在另一个可折叠组件的那个组件的上边框。在这里,我们将展示如何使用自定义的CSS否定这一点。

预渲染的标记

您可以给任何的可折叠组件添加预渲染标记来节省启动时间。下面的例子说明你为预渲染的可折叠组件必须提供的标记。

Heading
click to expand contents