- jQuery Mobile 教程
- jQuery Mobile - 首页
- jQuery Mobile - 概述
- jQuery Mobile - 设置
- jQuery Mobile - 页面
- jQuery Mobile - 图标
- jQuery Mobile - 转场动画
- jQuery Mobile - 布局
- jQuery Mobile - 小部件
- jQuery Mobile - 事件
- jQuery Mobile - 表单
- jQuery Mobile - 主题
- jQuery Mobile - CSS 类
- jQuery Mobile - 数据属性
- jQuery Mobile 有用资源
- jQuery Mobile - 面试问题
- jQuery Mobile - 快速指南
- jQuery Mobile - 有用资源
- jQuery Mobile - 讨论
jQuery Mobile - 数据属性
按钮
它指定一个可点击的按钮,使用类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 它显示按钮的主题颜色。 |
字母 (a-z) |
复选框
下表列出了与type = "checkbox"一起使用的复选框元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-mini 它定义复选框应显示较小尺寸还是常规尺寸。 |
true | false |
2 | data-role 它停止将复选框样式设置为按钮。 |
none |
3 | data-theme 它显示复选框的主题颜色。 |
字母 (a-z) |
可折叠面板
下表列出了与data-role = "collapsible"属性一起使用的可折叠面板元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-collapsed 它指示内容是否应关闭或展开。 |
true | false |
2 | data-collapsed-cue-text 它为使用屏幕阅读器软件的用户显示反馈。 |
默认值为折叠内容 |
3 | data-collapsed-icon 它定义可折叠按钮的图标。 |
默认图标为“plus” |
4 | data-content-theme 它显示可折叠内容的主题颜色。 |
字母 (a-z) |
5 | data-expanded-cue-text 它为使用屏幕阅读器软件的用户显示反馈。 |
默认值为展开内容 |
6 | data-expanded-icon 展开内容时,它显示可折叠按钮。 |
默认图标为“minus” |
7 | data-iconpos 它定义图标的位置。 |
left | right | top | bottom |
8 | data-inset 它定义可折叠按钮是否应显示圆角和边距。 |
true | false |
9 | data-mini 它定义可折叠按钮应显示较小尺寸还是常规尺寸。 |
true | false |
10 | data-theme 它显示可折叠按钮的主题颜色。 |
字母 (a-z) |
可折叠面板组
下表列出了与data-role = "collapsibleset"属性一起使用的可折叠面板组元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-collapsed-icon 它定义可折叠按钮的图标。 |
默认图标为“plus” |
2 | data-content-theme 它显示可折叠内容的主题颜色。 |
字母 (a-z) |
3 | data-expanded-icon 展开内容时,它显示可折叠按钮。 |
默认图标为“minus” |
4 | data-iconpos 它定义图标的位置。 |
left | right | top | bottom |
5 | data-inset 它定义可折叠按钮是否应显示圆角和边距。 |
true | false |
6 | data-mini 它定义可折叠按钮应显示较小尺寸还是常规尺寸。 |
true | false |
7 | data-theme 它显示可折叠按钮的主题颜色。 |
字母 (a-z) |
控件组
下表列出了与data-role = "controlgroup"属性一起使用的控件组元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-exclude-invisible 它定义是否在分配圆角时排除不可见的子元素。 |
true | false |
2 | data-mini 它定义组应显示较小尺寸还是常规尺寸。 |
true | false |
3 | data-theme 它显示控件组的主题颜色。 |
字母 (a-z) |
4 | data-type 它指示组应以水平还是垂直格式显示。 |
horizontal | vertical |
对话框
下表列出了与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 它定义对话框页面的叠加颜色。 |
字母 (a-z) |
6 | data-theme 它定义对话框页面的主题颜色。 |
字母 (a-z) |
7 | data-title 它定义对话框页面的标题。 |
text |
增强
下表列出了与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 |
翻转开关
下表列出了与data-role = "flipswitch"属性一起使用的翻转开关元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-mini 它定义开关应显示较小尺寸还是常规尺寸。 |
true | false |
2 | data-on-text 它定义翻转开关上的“on”文本。 |
默认值为“on” |
3 | data-off-text 它定义翻转开关上的“off”文本。 |
默认值为“off” |
页脚
下表列出了与data-role="footer"属性一起使用的页脚元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-id 它定义唯一的ID。 |
text |
2 | data-position 它定义页脚是否应位于底部或与页面内容内联。 |
inline | fixed |
3 | data-fullscreen 它定义页脚是否应位于底部并在页面内容之上。 |
true | false |
4 | data-theme 它定义页脚的主题颜色。 |
字母 (a-z) |
页眉
下表列出了与data-role = "header"属性一起使用的页眉元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-id 它定义唯一的ID。 |
text |
2 | data-position 它定义页眉是否应位于底部或与页面内容内联。 |
inline | fixed |
3 | data-fullscreen 它定义页眉是否应位于底部并在页面内容之上。 |
true | false |
4 | data-theme 它定义页眉的主题颜色。 |
字母 (a-z) |
输入
下表列出了与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 它定义输入元素的主题颜色。 |
字母 (a-z) |
链接
下表列出了与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 选择器 | window |
列表
下表显示了与data-role = "listview"属性一起使用的列表元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-autodividers 它自动划分列表。 |
true | false |
2 | data-count-theme 它定义计数元素的主题颜色。 |
字母 (a-z) |
3 | data-divider-theme 它定义列表分隔符的主题颜色。 |
字母 (a-z) |
4 | data-filter 它用于在搜索框中过滤列表值。 |
true | false |
5 | data-filter-placeholder 它在搜索框内定义一些文本。 |
text |
6 | data-filter-theme 它定义搜索过滤器的主题颜色。 |
字母 (a-z) |
7 | data-icon 它为列表提供图标。 |
默认情况下没有图标 |
8 | data-inset 它定义列表是否应显示圆角和边距。 |
true | false |
9 | data-split-icon 它定义拆分按钮的图标。 |
默认图标为“arrow-r” |
10 | data-split-theme 它定义拆分按钮的主题颜色。 |
字母 (a-z) |
11 | data-theme 它定义列表的主题颜色。 |
字母 (a-z) |
列表项
下表显示了与data-role = "listview"属性一起使用的列表项元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-filtertext 它用于使用搜索框中的文本过滤列表值。 |
text |
2 | data-icon 它为列表项提供图标。 |
默认情况下没有图标 |
3 | data-role 它定义列表项的分隔符。 |
list-divider |
4 | data-theme 它定义列表项的主题颜色。 |
字母 (a-z) |
导航栏
下表列出了与data-role = "navbar"属性一起使用的导航栏元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-icon 它为列表项提供图标。 |
默认情况下没有图标 |
2 | data-iconpos 它定义图标的位置。 |
left | right | top | bottom | notext |
页面
下表列出了与data-role = "page"属性一起使用的页面元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-dom-cache 它指示是否必须清除各个页面的DOM缓存。 |
true | false |
2 | data-overlay-theme 它定义对话框页面的叠加颜色。 |
字母 (a-z) |
3 | data-theme 它定义页面的主题颜色。 |
字母 (a-z) |
4 | data-title 它为页面提供标题。 |
默认情况下没有图标 |
5 | data-url 它用于更新URL。 |
url |
弹出窗口
下表列出了与data-role = "popup"属性一起使用的弹出窗口元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-corners 它定义弹出窗口是否应显示圆角和边距。 |
true | false |
2 | data-dismissible 它定义是否可以通过点击外部关闭弹出窗口。 |
true | false |
3 | data-history 它定义打开时弹出窗口是否应显示项目的历史记录。 |
true | false |
4 | data-overlay-theme 它定义弹出框的叠加颜色。 |
字母 (a-z) |
5 | data-shadow 它显示弹出框的阴影。 |
true | false |
6 | data-theme 它定义弹出框的主题颜色。 |
字母 (a-z) |
7 | data-tolerance 它定义窗口的边缘。 |
30, 15, 30, 15 |
单选按钮
下表列出了与type = "radio"属性一起使用的单选按钮元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-mini 它定义按钮应显示较小尺寸还是常规尺寸。 |
true | false |
2 | data-role 它停止将单选按钮样式设置为增强的按钮。 |
none |
3 | data-theme 它定义单选按钮的主题颜色。 |
字母 (a-z) |
选择
下表列出了与jQuery Mobile一起使用的选择元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-icon 它提供选择元素的图标。 |
默认为 "arrow-d" |
2 | data-iconpos 它定义图标的位置。 |
left | right | top | bottom |
3 | data-inline 它定义按钮是否应内联显示。 |
true | false |
4 | data-mini 它定义选择元素是显示较小尺寸还是常规尺寸。 |
true | false |
5 | data-native-menu 当它设置为 false 时,它使用自定义菜单。 |
true | false |
6 | data-overlay-theme 它定义自定义选择菜单的覆盖层颜色。 |
字母 (a-z) |
7 | data-placeholder 它用于设置非原生选择元素的选项元素。 |
true | false |
8 | data-role 它阻止将选择元素样式化为按钮。 |
none |
9 | data-theme 它显示选择元素的主题颜色。 |
字母 (a-z) |
滑块
下表列出了带有type = "range" 属性的滑块元素。
序号 | 数据属性 & 说明 | 值 |
---|---|---|
1 | data-highlight 它高亮显示滑块。 |
true | false |
2 | data-mini 它定义滑块是显示较小尺寸还是常规尺寸。 |
true | false |
3 | data-role 它阻止将滑块控件样式化为按钮。 |
none |
4 | data-theme 它显示滑块控件的主题颜色。 |
字母 (a-z) |
5 | data-track-theme 它显示滑块轨道的主题颜色。 |
字母 (a-z) |