jQuery Mobile数据属性
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
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-transition slide | slideup | slidedown | pop | fade | flip
列表
用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-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
列表项
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
页面
用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-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
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