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 |
序号 | 数据属性 & 说明 | 值 |
---|---|---|
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 |
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-mini 它定义了开关是以较小尺寸还是常规尺寸显示。 |
true | false |
2 | data-on-text 它定义了翻转开关上的"on"文本。 |
默认为 "on" |
3 | data-off-text 它定义了翻转开关上的"off"文本。 |
默认为 "off" |
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-id 它定义了唯一 ID。 |
text |
2 | data-position 它定义了页脚是应该位于底部还是与页面内容内嵌。 |
inline | fixed |
3 | data-fullscreen 它定义页脚是否应位于底部和页面内容之上。 |
true | false |
4 | data-theme 它定义了页脚的主题颜色。 |
letter (a-z) |
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-id 它定义了唯一的 ID。 |
text |
2 | data-position 它定义页眉是应该位于底部还是与页面内容内嵌。 |
inline | fixed |
3 | data-fullscreen 它定义页眉是否应位于底部和页面内容之上。 |
true | false |
4 | data-theme 它定义了页眉的主题颜色。 |
letter (a-z) |
序号 | 数据属性 & 说明 | 值 |
---|---|---|
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) |
序号 | 数据属性 & 说明 | 值 |
---|---|---|
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 |
序号 | 数据属性 & 说明 | 值 |
---|---|---|
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) |