jQuery Mobile - Data 数据属性

button 按钮

它使用 ui-btn 类指定一个包含文本或图像等内容的可点击按钮。它在 1.4 版中已弃用。 使用 ui-btn 属性而不是使用 data-role = "button" 属性。

下表列出了与数据属性一起使用的按钮元素。

序号 数据属性 & 描述
1

data-corners

它定义按钮是否应包含圆角。

true | false
2

data-icon

它定义了按钮的图标。

默认是没有图标
3

data-iconpos

它定义了图标的位置。

left | right | top | bottom
4

data-iconshadow

它定义按钮的图标是否应该包含阴影。

true | false
5

data-inline

它定义了按钮是否应该是内联的。

true | false
6

data-mini

它定义了按钮应该以较小尺寸还是常规尺寸显示。

true | false
7

data-shadow

它定义了按钮是否应该包含阴影。

true | false
8

data-theme

它显示按钮的主题颜色。

letter (a-z)

checkbox 复选框

下表列出了与 type = "checkbox" 一起使用的复选框元素。

序号 数据属性 & 说明
1

data-mini

它定义复选框应该以较小尺寸还是常规尺寸显示。

true | false
2

data-role

它停止将复选框样式设置为按钮。

none
3

data-theme

它显示复选框的主题颜色。

letter (a-z)

collapsible 可折叠

下表列出了与 data-role = "collapsible" 属性一起使用的可折叠元素。

序号 数据属性 & 说明
1

data-collapsed

它指示内容是应该关闭还是展开。

true | false
2

data-collapsed-cue-text

它为使用屏幕阅读器软件的用户显示反馈。

默认是折叠内容
3

data-collapsed-icon

它定义了可折叠按钮的图标。

默认图标为"加号"
4

data-content-theme

它显示可折叠内容的主题颜色。

letter (a-z)
5

data-expanded-cue-text

它为使用屏幕阅读器软件的用户显示反馈。

默认是展开内容
6

data-expanded-icon

当您展开内容时,它会显示可折叠按钮。

默认图标是"减号"
7

data-iconpos

它定义了图标的位置。

left | right | top | bottom
8

data-inset

它定义可折叠按钮是否应显示圆角和边距。

true | false
9

data-mini

它定义了可折叠按钮应该以较小尺寸还是常规尺寸显示。

true | false
10

data-theme

它显示可折叠按钮的主题颜色。

letter (a-z)

collapsibleset 可折叠集

下表列出了与 data-role = "collapsibleset" 属性一起使用的可折叠集元素。

序号 数据属性 & 说明
1

data-collapsed-icon

它定义了可折叠按钮的图标。

默认图标是“加号”
2

data-content-theme

它显示可折叠内容的主题颜色。

letter (a-z)
3

data-expanded-icon

当您展开内容时,它会显示可折叠按钮。

默认图标为"减号"
4

data-iconpos

它定义了图标的位置。

left | right | top | bottom
5

data-inset

它定义可折叠按钮是否应显示圆角和边距。

true | false
6

data-mini

它定义了可折叠按钮应该以较小尺寸还是常规尺寸显示。

true | false
7

data-theme

它显示可折叠按钮的主题颜色。

letter (a-z)

controlgroup 控制组

下表列出了与 data-role = "controlgroup" 属性一起使用的控制组元素 −

序号 数据属性 & 说明
1

data-exclude-invisible

它定义了在分配圆角时是否排除不可见的子项。

true | false
2

data-mini

它定义组应该以较小尺寸还是常规尺寸显示。

true | false
3

data-theme

它显示控制组的主题颜色。

letter (a-z)
4

data-type

它指示组应该以水平格式还是垂直格式显示。

horizontal | vertical

dialog 对话框

下表列出了与 data-dialog="true" 属性一起使用的对话框元素。

序号 数据属性 & 说明
1

data-close-btn

它定义了关闭按钮的位置。

left | right | none
2

data-close-btn-text

它定义关闭按钮的文本。

text
3

data-corners

它定义对话框是否应显示圆角。

true | false
4

data-dom-cache

它指示是否必须为单个页面清除 DOM 缓存。

true | false
5

data-overlay-theme

它定义对话框页面的覆盖颜色。

letter (a-z)
6

data-theme

它定义了对话框页面的主题颜色。

letter (a-z)
7

data-title

它定义对话框页面的标题。

text

enhance 增强

下表列出了与 data-enhance="false" 或 data-ajax = "false" 属性一起使用的增强元素。

序号 数据属性 & 说明
1

data-enhance

您可以通过将此属性设置为"true"来设置页面样式。 如果设置为"false",则无法设置页面样式。

true | false
2

data-ajax

它指示页面是否必须从 Ajax 加载。

true | false

固定工具栏

下表列出了与 data-position = "fixed" 属性一起使用的工具栏元素。

序号 数据属性 & 说明
1

data-disable-page-zoom

它定义了用户是否能够缩放/缩放页面。

true | false
2

data-fullscreen

它定义工具栏必须位于顶部和/或底部。

true | false
3

data-tap-toggle

它指示用户是否可以在点击时切换工具栏可见性。

true | false
4

data-transition

当您点击或单击该元素时,它会显示过渡效果。

slide | fade | none
5

data-update-page-padding

它通过使用调整大小、转换和更新布局事件来更新页面的填充。

true | false
6

data-visible-on-page-show

它定义了显示父页面时的工具栏可见性。

true | false

flipswitch 翻转切换开关

下表列出了与 data-role = "flipswitch" 属性一起使用的翻转切换元素 −

序号 数据属性 & 说明
1

data-mini

它定义了开关是以较小尺寸还是常规尺寸显示。

true | false
2

data-on-text

它定义了翻转开关上的"on"文本。

默认为 "on"
3

data-off-text

它定义了翻转开关上的"off"文本。

默认为 "off"

footer 页脚

下表列出了与 data-role="footer" 属性一起使用的页脚元素 −

序号 数据属性 & 说明
1

data-id

它定义了唯一 ID。

text
2

data-position

它定义了页脚是应该位于底部还是与页面内容内嵌。

inline | fixed
3

data-fullscreen

它定义页脚是否应位于底部和页面内容之上。

true | false
4

data-theme

它定义了页脚的主题颜色。

letter (a-z)

header 标题

下表列出了与 data-role = "header" 属性一起使用的标头元素。

序号 数据属性 & 说明
1

data-id

它定义了唯一的 ID。

text
2

data-position

它定义页眉是应该位于底部还是与页面内容内嵌。

inline | fixed
3

data-fullscreen

它定义页眉是否应位于底部和页面内容之上。

true | false
4

data-theme

它定义了页眉的主题颜色。

letter (a-z)

input 输入

下表列出了与 type = "text|search|etc" 属性一起使用的输入元素。

序号 数据属性 & 说明
1

data-clear-btn

它定义了输入元素是否应该包含清除按钮。

true | false
2

data-clear-btn-text

它定义了清除按钮的文本。

text
3

data-mini

它定义输入应以较小尺寸还是常规尺寸显示。

true | false
4

data-role

它停止将输入或文本区域样式化为按钮。

none
5

data-theme

它定义了输入元素的主题颜色。

letter (a-z)

link 链接

下表列出了与 jQuery Mobile 一起使用的链接元素。

序号 数据属性 & 说明
1

data-ajax

它指示页面是否必须通过 Ajax 加载。

true | false
2

data-direction

用于反向过渡。

reverse
3

data-dom-cache

它指示是否必须为页面清除 jQuery DOM 缓存。

true | false
4

data-prefetch

它用于将页面预取到 DOM 中。

true | false
5

data-rel

它指定链接的行为。

back | dialog | external | popup
6

data-transition

它定义了从一页到另一页的过渡。

fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
7

data-position-to

它定义弹出框的位置。

origin | jQuery selector | window

List 列表

下表显示了与 data-role = "listview" 属性一起使用的列表元素。

序号 数据属性 & 说明
1

data-autodividers

它会自动划分列表。

true | false
2

data-count-theme

它定义了计数元素的主题颜色。

letter (a-z)
3

data-divider-theme

它定义列表分隔线的主题颜色。

letter (a-z)
4

data-filter

它用于过滤搜索框中的列表值。

true | false
5

data-filter-placeholder

它在搜索框中定义了一些文本。

text
6

data-filter-theme

它定义了搜索过滤器的主题颜色。

letter (a-z)
7

data-icon

它提供列表的图标。

Default is no icon
8

data-inset

它定义列表是否应显示圆角和边距。

true | false
9

data-split-icon

它定义了拆分按钮的图标。

默认图标是 "arrow-r"
10

data-split-theme

它定义了拆分按钮的主题颜色。

letter (a-z)
11

data-theme

它定义列表的主题颜色。

letter (a-z)

List Item 列表项

下表显示了与 data-role = "listview" 属性一起使用的列表项元素。

序号 数据属性 & 说明
1

data-filtertext

它用于使用搜索框中的文本过滤列表值。

text
2

data-icon

它提供列表项的图标。

默认是没有图标
3

data-role

它定义了列表项的分隔符。

list-divider
4

data-theme

它定义列表项的主题颜色。

letter (a-z)

navbar 导航栏

下表列出了与 data-role = "navbar" 属性一起使用的导航栏元素。

序号 数据属性 & 说明
1

data-icon

它提供列表项的图标。

默认是没有图标
2

data-iconpos

它定义图标的位置。

left | right | top | bottom | notext

page 页面

下表列出了与 data-role = "page" 属性一起使用的页面元素。

序号 数据属性 & 说明
1

data-dom-cache

它指示是否必须为单个页面清除 DOM 缓存。

true | false
2

data-overlay-theme

它定义对话框页面的覆盖颜色。

letter (a-z)
3

data-theme

它定义页面的主题颜色。

letter (a-z)
4

data-title

它提供页面的标题。

默认是没有图标
5

data-url

用于更新 URL。

url

popup 弹窗

下表列出了与 data-role = "popup" 属性一起使用的弹出元素。

序号 数据属性 & 说明
1

data-corners

它定义弹出窗口是否应显示圆角和边距。

true | false
2

data-dismissible

它定义是否应该通过单击外部来关闭弹出窗口。

true | false
3

data-history

它定义弹出窗口是否应在打开时显示项目的历史记录。

true | false
4

data-overlay-theme

它定义了弹出框的覆盖颜色。

letter (a-z)
5

data-shadow

它显示弹出框的阴影。

true | false
6

data-theme

它定义弹出框的主题颜色。

letter (a-z)
7

data-tolerance

它定义了窗口的边缘。

30, 15, 30, 15

radio 单选按钮

下表列出了与 type = "radio" 属性一起使用的单选按钮元素。

序号 数据属性 & 说明
1

data-mini

它定义了按钮应该以较小尺寸还是常规尺寸显示。

true | false
2

data-role

它停止将单选按钮样式设置为增强按钮。

none
3

data-theme

它定义单选按钮的主题颜色。

letter (a-z)

Select 选择

下表列出了用于 jQuery Mobile 的选择元素。

序号 数据属性 & 说明
1

data-icon

它为选择元素提供图标。

Default is "arrow-d"
2

data-iconpos

它定义了图标的位置。

left | right | top | bottom
3

data-inline

它定义了按钮是否应该是内联的。

true | false
4

data-mini

它定义了 select 应该以较小尺寸还是常规尺寸显示。

true | false
5

data-native-menu

当它被设置为 false 时,它使用自定义菜单。

true | false
6

data-overlay-theme

它定义了自定义选择菜单的覆盖颜色。

letter (a-z)
7

data-placeholder

用于设置非原生select的option元素。

true | false
8

data-role

它停止将选择元素的样式设置为按钮。

none
9

data-theme

它显示所选元素的主题颜色。

letter (a-z)

Slider 滑块

下表列出了与 type = "range" 属性一起使用的滑块元素。

序号 数据属性 & 说明
1

data-highlight

它突出显示滑块。

true | false
2

data-mini

它定义滑块是以较小尺寸还是以常规尺寸显示。

true | false
3

data-role

它停止将滑块控件样式设置为按钮。

none
4

data-theme

它显示滑块控件的主题颜色。

letter (a-z)
5

data-track-theme

它显示滑块轨道的主题颜色。

letter (a-z)