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)
广告