jQuery Mobile数据属性

Jquery mobile框架使用html5的 data- 属性来使初始化标记和配置组件。这些属性全部都是可选的，并且支持手动调用插件。为了避免命名上的和与其他也使用html5的 data- 属性插件与框架的冲突,可以使用全局设置来自定义命名空间。

按钮

通过 data-role="button" 来标记按钮。基于链接的按钮和表单的button元素会被自动渲染，无需data-role属性。

data-corners true | false

data-iconpos left | right | top | bottom | notext

data-iconshadow true | false

data-inline true | false

data-shadow true | false

data-theme swatch letter (a-z)

多个按钮按钮的情况下，可以给这些按钮的容器添加data-role="controlgroup"属性，使这些按钮成为垂直的按钮组。给按钮添加data-type="horizontal" 属性可以使按钮水平并排排列。

复选框

通过type="checkbox"标记的input元素会自动增强，无需data-role属性。

data-role none (防止自动增强)

data-theme a-z

可折叠区域

一个标题元素和一个用data-role="collapsible"属标记的容器。

data-collapsed true | false

data-content-theme a-z

data-theme a-z

手风琴组

一个标题元素和一个用data-role="collapsible-set"属标记的容器。

data-content-theme

data-theme

对话框

用data-role="page"属性标记的容器或者通过data-rel="dialog"标记的链接所指向的容器

data-close-btn-text string(对话框关闭按钮的文字)

data-dom-cache true | false

data-id 字符串 (页面的ID)

data-fullscreen true | false (used in conjunction with fixed toolbars)

data-overlay-theme a-z

data-theme a-z

data-title string(此页面显示的时候的标题)

页面内容

用data-role="content"属性标记的容器

data-theme a-z

filed container

data-role filedcontain

开关

用data-role="slider"属性标记的列表菜单，只能有两个option.

data-role 无 (防止自动增强l)

data-theme

data-track-theme

footer

用data-role="footer"属性标记的容器

data-id 字符串 (unique id, useful in persistent footers)

data-position fixed

data-theme a-z

Header

用data-role="header"属性标记的容器

data-add-back-btn true | false (只会在header自动添加后退按钮)

data-back-btn-text 字符串

data-back-btn-theme

data-position fixed

data-theme

data-title

链接

链接,包括用data-role="button"属性标记的链接，和表单中的

data-ajax true | false

data-direction reverse (翻转页面转场效果)

data-dom-cache true | false

data-prefetch true | false

data-rel back (后退到上一个历史的记录的页面)
dialog (打开对话框，不记录进历史记录中)
external (for linking to another domain)

列表

用data-role="listview"属性标记的ol或ul

data-count-theme

data-dividertheme

data-filter true | false

data-filter-placeholder

data-filter-theme

data-inset true | false

data-theme

列表项

data-role list-divider

data-theme

页面

用data-role="page"属性标记的容器

data-close-btn-text

data-dom-cache

data-id

data-fullscreen

data-overlay-theme

data-theme

data-title

单选按钮

用data-role="header"属性标记的容器

data-role none (防止自动增强)

data-theme

列表菜单

select的列表菜单会被自动增强，无需data-role属性。

data-iconpos

data-inline

data-native-menu true | false

data-overlay-theme

data-placeholder true | false - 加到option上

data-role

data-theme

划杆

type="range"属性标记的input元素会被自动增强，无需data-role属性

data-role

data-theme

data-track-theme

文本框和文本域

type="text|number|search|等."类型的文本框或者文本域会自动增强，无需data-role属性

data-role

data-theme

来源：oschina

链接：https://my.oschina.net/u/180300/blog/126263

标签

a-z

arrow

容器