jQuery Mobile - Listview

Listview 用于显示项目列表。 data-role = "listview" 属性包含在容器中以在垂直可滚动列表中显示列表。

下表详细说明了列表视图的类型。

序号 类型 & 说明
1 Read-only, unordered

包括 data-role = "listview" 属性来创建一个简单的无序列表。

2 Read-only, ordered

通过在其中包含 data-role = "listview" 属性来创建有序列表(ol)。

3 Linked

在列表中定义超链接后,它的样式将被设置为按钮。

4 Inset

通过包含属性 data-inset = "true" 来应用插图外观。

5 Filter

可以通过添加 data-filter = "true" 属性来过滤该列表。

6 Filter reveal

添加 data-filter-reveal = "true" 属性以隐藏列表项。

7 List dividers

data-role = "list-divider" 属性添加到任何列表项以划分为一组列表项。

8 Autodividers

data-autodividers =" true" 属性包含在任何列表视图中自动生成分隔线。

9 Count bubbles

ui-li-count 元素中定义的类将有助于在右侧的列表项中包含一个计数指示器。

10 Icons: Standard

添加属性 data-icon 为特定列表项设置图标。

11 Icons: 16x16

在图像元素中包含 ui-li-icon 类以在列表项中添加 16 X 16 像素的图像。

12 Thumbnails

在列表项中,缩略图包含在左侧。

13 Split buttons

li 中包含第二个链接以创建拆分列表项。

14 Formatted content

使用标题和段落标签以适当的层次结构格式添加内容。

15 Theme

添加了 data-theme 属性以包含列表视图或特定列表项的主题。

16 Forms

在列表视图中,可以插入表单元素以进行组演示。

17 Collapsible listview

data-role = "collapsible" 属性包装在容器中,使列表视图可折叠。

18 Grouped collapsible with listviews

可以使用属性 data-role = "collapsibleset" 在可折叠集中创建分组列表视图。

19 Full width collapsible listview

添加了 data-inset = "false" 属性以制作全宽可折叠集。

❮ jQuery Mobile - 小部件