数据属性速查 Data- attribute reference(点击标题可进入详细介绍页面)
Jquery mobile框架使用html5的 data- 属性来使初始化标记和配置组件。这些属性全部都是可选的,并且支持手动调用插件。为了避免命名上的和与其他也使用html5的 data- 属性插件与框架的冲突,可以使用全局设置来自定义命名空间。
通过 data-role="button" 来标记按钮。基于链接的按钮和表单的button元素会被自动渲染,无需data-role属性。
data-corners | true | false |
---|---|
data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
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 | 主题样式 (a-z) - Sets all collapsibles in set |
---|---|
data-theme | 主题样式r (a-z) - Sets all collapsibles in set |
用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) |
---|
用data-role="fieldcontain"属性标记的容器
用data-role="slider"属性标记的列表菜单,只能有两个option.
data-role | 无 (防止自动增强l) |
---|---|
data-theme | 主题样式 (a-z) - 给表单元素添加主题样式 |
data-track-theme | 主题样式 (a-z) - 给表单元素添加主题样式 |
用data-role="footer"属性标记的容器
data-id | 字符串 (unique id, useful in persistent footers) |
---|---|
data-position | fixed |
data-theme | 主题样式(a-z) |
用data-role="header"属性标记的容器
data-add-back-btn | true | false (只会在header自动添加后退按钮) |
---|---|
data-back-btn-text | 字符串 |
data-back-btn-theme | 主题样式 (a-z) |
data-position | fixed |
data-theme | 主题样式 (a-z) |
data-title | 字符串 (title used when page is shown) |
链接,包括用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-transition | slide | slideup | slidedown | pop | fade | flip |
用data-role="listview"属性标记的ol或ul
data-count-theme | 主题样式(a-z) |
---|---|
data-dividertheme | 主题样式(a-z) |
data-filter | true | false |
data-filter-placeholder | string |
data-filter-theme | 主题样式(a-z) |
data-inset | true | false |
data-split-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
data-theme | 主题样式(a-z) |
列表中的li
data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
---|---|
data-role | list-divider |
data-theme | 主题样式(a-z) - can also be set on individual LIs |
用data-role="page"属性标记的容器
data-close-btn-text | string (对话框的关闭按钮的文字) |
---|---|
data-dom-cache | true | false |
data-id | string (页面的唯一id) |
data-fullscreen | true | false (used in conjunction with fixed toolbars) |
data-overlay-theme | 主题样式 (a-z) - overlay theme when the page is opened in a dialog |
data-theme | 主题样式 (a-z) |
data-title | string (页面显示的时候的标题) |
用data-role="header"属性标记的容器
data-role | none (防止自动增强) |
---|---|
data-theme | 主题样式 (a-z) - Added to the form element |
select的列表菜单会被自动增强,无需data-role属性。
data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
---|---|
data-iconpos | left | right | top | bottom | notext |
data-inline | true | false |
data-native-menu | true | false |
data-overlay-theme | 主题样式 (a-z) - 蒙版的主题样式 |
data-placeholder | true | false - 加到option上 |
data-role | none (防止自动增强) |
data-theme | 主题样式(a-z) - 加到表单元素上 |
type="range"属性标记的input元素会被自动增强,无需data-role属性
data-role | none (防止自动更新) |
---|---|
data-theme | 主题样式 (a-z) - 加到表单元素上 |
data-track-theme | 主题样式 (a-z) - 加到表单元素上 |
type="text|number|search|等."类型的文本框或者文本域会自动增强,无需data-role属性
data-role | none (防止自动更新l) |
---|---|
data-theme | 主题样式(a-z) - 加到表单元素上 |