jQuery的数据属性
jQuery Mobile的使用HTML5 data-*属性来创建一个"touch-friendly"和有吸引力的外观为移动设备。
对于下面的参考列表， bold value指定默认值。
按键
不推荐使用1.4版本。 使用CSS类来代替。超链接与data-role="button" 。 按钮元素和工具栏和输入栏链接是自动样式按钮，无需data-role="button" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 指定按钮是否应该具有圆角或不 |
| data-icon | Icons Reference | 指定按钮的图标。 默认是没有图标 |
| data-iconpos | left | right | top | bottom | notext | 指定图标的位置 |
| data-iconshadow | true | false | 指定按钮图标是否应该有阴影或不 |
| data-inline | true | false | 指定按钮是否应为内联与否 |
| data-mini | true | false | 指定按钮是否应该是小的或常规尺寸的 |
| data-shadow | true | false | 指定按钮是否应该有阴影或不 |
| data-theme | letter (a-z) | 指定按钮的主题颜色 |
将多个按钮，请使用带容器data-role="controlgroup"连同属性data-type="horizontal|vertical"应否组按钮水平或垂直指定。
复选框
与标签和输入的双type="checkbox" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 指定复选框是否应为小型或规模 |
| data-role | none | 防止jQuery Mobile的样式复选框，按钮 |
| data-theme | letter (a-z) | 指定复选框的主题色 |
将多个复选框，使用data-role="controlgroup"连同data-type="horizontal|vertical" ，以指定组是否水平或垂直的复选框。
可折叠
头元素后跟任何HTML标记在一个容器内data-role="collapsible" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-collapsed | true | false | 指定的内容是否应该被关闭或膨胀 |
| data-collapsed-cue-text | sometext | 指定一些文本，为屏幕阅读软件的用户提供声音反馈。 默认为“点击崩溃的内容。” |
| data-collapsed-icon | Icons Reference | 指定可折叠按钮的图标。 默认值是“加” |
| data-content-theme | letter (a-z) | 指定可折叠内容的主题色。 也将圆角添加到可折叠内容 |
| data-expanded-cue-text | sometext | 指定一些文本，为屏幕阅读软件的用户提供声音反馈。 默认为“点击展开内容”。 |
| data-expanded-icon | Icons Reference | 指定当内容已展开可折叠按钮的图标。 默认值是"minus" |
| data-iconpos | left | right | top | bottom | 指定图标的位置 |
| data-inset | true | false | 指定是否可折叠按钮应带圆角和一些保证金或不样式 |
| data-mini | true | false | 指定可折叠按钮是否应为小型或规模 |
| data-theme | letter (a-z) | 指定可折叠按钮的主题颜色 |
可折叠套装
用一个容器内可折叠内容块data-role="collapsibleset"
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-collapsed-icon | Icons Reference | 指定可折叠按钮的图标。 默认值是“加” |
| data-content-theme | letter (a-z) | 指定可折叠内容的主题色 |
| data-expanded-icon | Icons Reference | 指定当内容已展开可折叠按钮的图标。 默认值是“减” |
| data-iconpos | left | right | top | bottom | notext | 指定图标的位置 |
| data-inset | true | false | 指定是否collapsibles应与圆角和一些保证金或不样式 |
| data-mini | true | false | 指定可折叠按钮是否应为小型或规模 |
| data-theme | letter (a-z) | 指定可折叠集的主题色 |
内容
弃用1.4版本，并将在1.5集装箱与删除 data-role="content" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-theme | letter (a-z) | 指定内容的主题色 |
控制组
一个<div>或<fieldset>集装箱data-role="controlgroup" 组单一类型（基于链接的按钮，单选按钮，复选框，选择元素）的多个按钮风格的输入。 对于分组的形式复选框和单选按钮，在<fieldset>容器内部推荐一个<div>与"ui-fieldcontain"级，以提高标签的造型。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-exclude-invisible | true | false | 指定是否在圆角的分配排除看不见的孩子 |
| data-mini | true | false | 指定组是否应为小型或规模 |
| data-theme | letter (a-z) | 指定controlgroup的主题色 |
| data-type | horizontal | vertical | 指定是否应该将该组水平或垂直显示 |
对话
与容器data-dialog="true" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-close-btn | left | right | none | 指定关闭按钮的位置 |
| data-close-btn-text | sometext | 指定关闭按钮文本 |
| data-corners | true | false | 指定对话框是否应该圆角或不 |
| data-dom-cache | true | false | 指定是否清除jQuery的DOM缓存或不是单个页面（如果设置为true，你需要照顾好自己和彻底的测试管理DOM上的所有移动设备） |
| data-overlay-theme | letter (a-z) | 指定对话框页面的叠加（背景）颜色 |
| data-theme | letter (a-z) | 指定对话框页面的主题颜色 |
| data-title | sometext | 指定标题的对话页面 |
增强
与容器data-enhance="false"或data-ajax="false"
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-enhance | true | false | 如果设置为"true" ，（默认值）jQuery Mobile的自动风格的页面，使其适合移动设备。 如果设置为“假”，该框架将不会在样式页面 |
| data-ajax | true | false | 指定是否通过AJAX或无法加载页面 |
注： data-enhance="false"必须配合使用$.mobile.ignoreContentEnabled=true"自动停止jQuery Mobile的样式页面。
内部的任何链接或表单元素data-ajax="false"集装箱将通过框架的导航功能时，可以忽略$.mobile.ignoreContentEnabled设置为true。
集装箱场
弃用在1.4版本，并且将在1.5被移除。 使用class="ui-fieldcontain instead" 。与容器data-role="fieldcontain"围绕标签/表单元素对包裹。
固定工具栏
与容器data-role="header"或data-role="footer"的共同data-position="fixed"属性。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-disable-page-zoom | true | false | 指定用户是否能够扩大/缩小页面或不 |
| data-fullscreen | true | false | 指定工具栏来始终被定位在顶部和/或底部 |
| data-tap-toggle | true | false | 指定用户是否能够切换上水龙头/或点击工具栏不可见性 |
| data-transition | slide | fade | none | 指定当点击/点击出现的过渡效果 |
| data-update-page-padding | true | false | 同时指定网页顶部和底部的填充在调整大小，过渡和更新"updatelayout"事件（jQuery Mobile的更新总是在填充"pageshow"事件） |
| data-visible-on-page-show | true | false | 指定当显示父页面工具栏可视性 |
翻转拨动开关
一个<input type="checkbox">与数据角色"flipswitch"
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 指定交换机是否应该是小的或常规尺寸的 |
| data-on-text | sometext | 指定“的”翻转开关上的文本（默认为"On" ） |
| data-off-text | sometext | 指定翻转开关“关”文本（默认为"Off" ） |
页脚
与容器data-role="footer" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 指定一个唯一的ID。 需要持续页脚 |
| data-position | inline | fixed | 指定页脚是否应与页面内容是inline或仍位于底部 |
| data-fullscreen | true | false | 指定是否页脚应始终被放置在底部，并通过网页内容（略透视）或不 |
| data-theme | letter (a-z) | 指定页脚的主题色 |
注意：要启用全屏位置，使用data-position="fixed" ，然后添加data-fullscreen属性的元素。
头
与容器data-role="header" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 指定一个唯一的ID。 需要持续的头 |
| data-position | inline | fixed | 指定标题是否应与网页内容是内联或保持定位在顶部 |
| data-fullscreen | true | false | 指定标头是否应始终被放置在顶部和在页面内容（略透视）或不 |
| data-theme | letter (a-z) | 指定标题的主题色 |
注意：要启用全屏位置，使用data-position="fixed" ，然后添加data-fullscreen属性的元素。
输入
与输入type="text|search|etc."或textarea elements 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-clear-btn | true | false | 指定输入是否应该有一个"clear"按钮 |
| data-clear-btn-text | text | 指定“清除”按钮的文本。 默认值是"clear text" |
| data-mini | true | false | 指定输入是否应该是小的或常规尺寸的 |
| data-role | none | 防止jQuery Mobile的样式输入/文字区域，按钮 |
| data-theme | letter (a-z) | 指定输入字段的主题色 |
链接
所有链接。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-ajax | true | false | 指定是否加载通过AJAX用于改善用户体验和转换页面。 如果设置为false，jQuery Mobile的会做一个正常的页面请求。 |
| data-direction | reverse | 反向过渡动画（仅适用于网页或对话框） |
| data-dom-cache | true | false | 指定是否清除jQuery的DOM缓存或不是单个页面（如果设置为true，你需要照顾好自己和彻底的测试管理DOM上的所有移动设备） |
| data-prefetch | true | false | 指定是否当用户访问这些页面预取到DOM，让他们可用 |
| data-rel | back | dialog | external | popup | 指定链接的行为方式的选择。 后退 - 移动早在历史上的一个步骤。 对话框 - 打开一个链接作为一个对话框，在历史上没有跟踪。 外部 - 链接到其他域。 弹出窗口 - 打开一个弹出窗口。 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 指定如何转型从一个页面到下一个。 看到我们的jQuery Mobile的过渡章。 |
| data-position-to | origin | jQuery selector | window | 指定的弹出框的位置。 原产地 - 默认。 在位置打开该链接弹出。 jQuery选择 - 定位在指定的元素弹出。 窗口 - 定位窗口屏幕中央弹出。 |
名单
一个<ol>或<ul>与data-role="listview" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-autodividers | true | false | 指定是否自动将列表中的项目或不 |
| data-count-theme | letter (a-z) | 指定计数泡沫的主题色 |
| data-divider-theme | letter (a-z) | 指定列表分频器的主题色 |
| data-filter | true | false | 指定是否添加一个搜索框列表或不 |
| data-filter-placeholder | sometext | 不推荐使用1.4版本。 使用HTML占位符代替属性，指定搜索框内的文字。 默认值是“过滤器项目......” |
| data-filter-theme | letter (a-z) | 指定搜索过滤器的主题色 |
| data-icon | Icons Reference | 指定列表的图标 |
| data-inset | true | false | 指定是否清单应以圆角和一些保证金或不样式 |
| data-split-icon | Icons Reference | 指定拆分按钮的图标。 默认为“箭-R” |
| data-split-theme | letter (a-z) | 指定拆分按钮的主题颜色 |
| data-theme | letter (a-z) | 指定列表的主题色 |
列表项目
一个<li>内的<ol>或<ul>与data-role="listview" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-filtertext | sometext | 指定要搜索的文本过滤元件时。 那么该文本将被过滤掉，而不是实际列表项的文本 |
| data-icon | Icons Reference | 指定列表项目的图标 |
| data-role | list-divider | 指定列表项的分隔 |
| data-theme | letter (a-z) | 指定列表项的主题色 |
注：数据图标属性上的链接列表项唯一的工作。
导航栏
<li>的容器中的元素与data-role="navbar" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-icon | Icons Reference | 指定列表项目的图标 |
| data-iconpos | left | right | top | bottom | notext | 指定图标的位置 |
Navbars继承父容器的主题样本。 这是不可能的数据主题属性设置为导航栏。 数据-theme属性可以单独设置为导航栏里面的每一个环节。
页
与容器data-role="page" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-dom-cache | true | false | 指定是否清除jQuery的DOM缓存或不是单个页面（如果设置为true，你需要照顾好自己和彻底的测试管理DOM上的所有移动设备） |
| data-overlay-theme | letter (a-z) | 指定对话框页面的叠加（背景）颜色 |
| data-theme | letter (a-z) | 指定页面的主题颜色 |
| data-title | sometext | 指定页面标题 |
| data-url | url | 用于更新的URL，而不是用来请求页面的URL值 |
弹出
与容器data-role="popup" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 指定弹出是否应该圆角或不 |
| data-dismissible | true | false | 指定是否弹出应通过点击弹出之外，或无法关闭 |
| data-history | true | false | 指定打开时弹出是否应该创建一个浏览器历史记录的项目。 如果设置为false，那么将不会创建历史项，然后将无法通过浏览器的“后退”按钮可关闭 |
| data-overlay-theme | letter (a-z) | 指定弹出框的叠加（背景）的颜色。 默认为透明背景（无）。 |
| data-shadow | true | false | 指定弹出框是否应该有阴影或不 |
| data-theme | letter (a-z) | 指定弹出框的主题颜色。 默认继承， "none"设置弹出窗口透明 |
| data-tolerance | 30, 15, 30, 15 | 指定从窗口的边缘的距离（ top, right, bottom, left ） |
有固定data-rel="popup" ：
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-position-to | origin | jQuery selector | window | 指定的弹出框的位置。 原产地 - 默认。 在位置打开该链接弹出。 jQuery选择 - 定位在指定的元素弹出。 窗口 - 定位窗口屏幕中央弹出。 |
| data-rel | popup | 对于打开弹出框 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 指定如何转型从一个页面到下一个。 看到我们的jQuery Mobile的过渡章。 |
单选按钮
与标签和输入的双type="radio" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 指定按钮是否应该是小的或常规尺寸的 |
| data-role | none | 防止jQuery Mobile的样式radiobuttons增强的按钮 |
| data-theme | letter (a-z) | 指定单选按钮的主题颜色 |
到组多个无线电按钮，使用data-role="controlgroup"连同data-type="horizontal|vertical"水平或垂直指定是否组中的按钮。
选择
所有<select>元素。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-icon | Icons Reference | 指定选择元素的图标。 默认为"arrow-d" |
| data-iconpos | left | right | top | bottom | notext | 指定图标的位置 |
| data-inline | true | false | 指定选择元素是否应为内联与否 |
| data-mini | true | false | 指定是否选择应该是小型或规模 |
| data-native-menu | true | false | 如果设置为false，它使用jQuery的自己的自定义选择菜单（如果你想选择菜单来显示所有移动设备相同的建议） |
| data-overlay-theme | letter (a-z) | 指定jQuery的自定义选择菜单的主题颜色（与一起使用data-native-menu="false" ） |
| data-placeholder | true | false | 可以是一个上设置<option>的非本地选择元素 |
| data-role | none | 防止jQuery Mobile的样式选择元素按钮 |
| data-theme | letter (a-z) | 指定选择元素的主题色 |
将多个选择元素，使用data-role="controlgroup"连同data-type="horizontal|vertical"水平或垂直指定是否组的元素。
滑块
与输入type="range" 。
| 数据属性 | 值 | 描述 |
|---|---|---|
| data-highlight | true | false | 指定滑块轨道是否应当强调或不 |
| data-mini | true | false | 指定滑块是否应该是小的或常规尺寸的 |
| data-role | none | 防止jQuery Mobile的样式滑块控件按钮 |
| data-theme | letter (a-z) | 指定滑块控件的主题颜色（输入，处理和跟踪） |
| data-track-theme | letter (a-z) | 指定滑块轨道的主题色 |