jQuery Mobile Data 属性

对话框

带有data-role="dialog"的容器或带有data-rel="dialog"的链接。

增强

带有data-enhance="false"或data-ajax="false"的容器。

注意：data-enhance="false" 必须与 $.mobile.ignoreContentEnabled=true" 一同使用来阻止 jQuery Mobile 自动渲染页面。

当 $.mobile.ignoreContentEnabled 设置为 true 时，data-ajax="false" 容器内的任何链接或表单元素将会被框架的导航功能忽略。

域容器

1.4 版本后已废弃，在 1.5 版本后不再支持，将使用 class="ui-fieldcontain 替代"。包裹在 label/form 元素对，并带有data-role="fieldcontain"的容器。

固定工具栏

带有data-role="header"或data-role="footer"，并带有data-position="fixed"属性的容器。

翻转拨动开关

一个带有data-role="slider"的 元素和两个 元素。

Data-属性	值	描述
data-mini	true |false	规定开关是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 把拨动开关渲染成按钮样式
data-theme	字母(a-z)	规定拨动开关的主题颜色
data-track-theme	字母(a-z)	规定轨道的主题颜色

---

尾部栏

带有data-role="footer"的容器。

Data-属性	值	描述
data-id	sometext	规定唯一 ID。对于持续的尾部栏是必需的
data-position	inline| fixed	规定尾部栏是与页面内容内联还是保持固定在底部
data-fullscreen	true |false	规定尾部栏是固定在底部还是覆盖在页面内容上（查看范围更大）
data-theme	字母(a-z)	规定尾部栏的主题颜色。默认是 "a"

注意：如需启用全屏定位，请使用 data-position="fixed"，然后添加 data-fullscreen 属性到元素上。

---

头部栏

带有data-role="header"的容器。

Data-属性	值	描述
data-id	sometext	规定唯一 ID。对于持续的头部栏是必需的
data-position	inline| fixed	规定头部栏是与页面内容内联还是保持固定在顶部
data-fullscreen	true |false	规定头部栏是固定在顶部还是覆盖在页面内容上（查看范围更大）
data-theme	字母(a-z)	规定头部栏的主题颜色。默认是 "a"

注意：如需启用全屏定位，请使用 data-position="fixed"，然后添加 data-fullscreen 属性到元素上。

---

链接

所有的链接，包含那些带有 data-role="button" 的链接和表单提交按钮。

Data-属性	值	描述
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	规定链接行为的选项。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	规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。

---

列表

带有data-role="listview"的

或
。

Data-属性	值	描述
data-autodividers	true |false	规定是否自动划分列表项
data-count-theme	字母(a-z)	规定计数气泡的主题颜色。
data-divider-theme	字母(a-z)	规定列表分隔的主题颜色。
data-filter	true |false	规定是否在列表中添加搜索框
data-filter-placeholder	sometext	1.4 版本后废弃。使用 HTML placeholder 属性替代。规定搜索框内的文本。默认是 "Filter items..."
data-filter-theme	字母(a-z)	规定搜索过滤的主题颜色。
data-icon	图标参考手册	规定列表的图标
data-inset	true |false	规定列表是否渲染成圆角且带外边距
data-split-icon	图标参考手册	规定分割按钮的图表。默认是 "arrow-r"
data-split-theme	字母(a-z)	规定分割按钮的主题颜色。
data-theme	字母(a-z)	规定列表的主题颜色




---

列表项

带有data-role="listview"的

或
内的
• 。

  Data-属性	值	描述
  data-filtertext	sometext	规定当过滤元素时要搜索的文本。该文本将会被过滤，而不是实际的列表项文本
  data-icon	图标参考手册	规定列表项图标
  data-role	list-divider	规定列表项的分隔
  data-theme	字母(a-z)	规定列表项的主题颜色

  注意：data-icon 属性只作用于带有链接的列表项。

---

导航栏

带有data-role="navbar"容器内部的

• 元素。

  Data-属性	值	描述
  data-icon	图标参考手册	规定列表项的图标
  data-iconpos	left | right |top| bottom | notext	规定图标的位置

  
  

  	导航栏从他们的父容器中继承了主题样本。为导航栏设置 data-theme 属性是不可能的。可以为导航栏中的每个链接单独设置 data-theme 属性。

  
  

---

页面

带有data-role="page"的容器。

Data-属性	值	描述
data-add-back-btn	true |false	自动添加后退按钮，仅限头部栏
data-back-btn-text	sometext	规定后退按钮的一些文本
data-back-btn-theme	字母(a-z)	规定后退按钮的主题颜色
data-close-btn-text	字母(a-z)	规定对话框上关闭按钮的一些文本
data-dom-cache	true |false	规定是否清除各个页面的 jQuery DOM 缓存（如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试）
data-overlay-theme	字母(a-z)	规定对话框页面的蒙版（背景）颜色
data-theme	字母(a-z)	规定页面的主题颜色。
data-title	sometext	规定页面标题
data-url	url	更新 URL 的值，而不是用于请求页面的 URL




---

弹窗

带有data-role="popup"的容器。

Data-属性	值	描述
data-corners	true| false	规定弹窗是否圆角
data-overlay-theme	字母(a-z)	规定弹出框的蒙版（背景）颜色。默认是透明背景（无）
data-shadow	true| false	规定弹出框是否有阴影
data-theme	字母(a-z)	规定弹出框的主题颜色。默认是继承的，"none" 设置弹窗为透明的
data-tolerance	30, 15, 30, 15	规定窗口边缘（上 top、右 right、下 bottom、左 left）的距离

带有data-rel="popup"的锚：

Data-属性	值	描述
data-position-to	origin| jQuery selector | window	>规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。
data-rel	popup	用于打开弹出框
data-transition	fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn |none	规定一个页面切换到下一个页面的效果。请查看我们的jQuery Mobile 页面切换章节。




---

单选按钮

带有type="radio"的成双成对的 label 和 input。它们会被自动渲染程按钮样式，data-role 不是必需的。

Data-属性	值	描述
data-mini	true |false	规定按钮是小尺寸还是常规尺寸
data-role	none	防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮，使元素以 HTML 原生的状态显示
data-theme	字母(a-z)	规定单选按钮的主题颜色




	如需组合多个单选按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合单选按钮。




---

选择

所有的

元素。这些会被自动渲染成按钮样式，date-role 是不必需的。

	如需组合多个 select 元素，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合 select 元素。

滑动块

带有type="range"的输入框。这些会被自动渲染成按钮样式，date-role 是不必需的。

文本输入框 & 文本输入域

带有type="text|search|etc."的 input 或textarea 元素。这些会被自动渲染成按钮样式，date-role 是不必需的。