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

posted @ 2014-05-16 16:15  阳光小屋  阅读(278)  评论(0编辑  收藏  举报