jqueryMobile初始化组件

http://hi.baidu.com/html5css3/item/80abde1703b3fef1746a844a

数据属性速查 Data- attribute reference(点击标题可进入详细介绍页面)Jquery mobile框架使用html5的 data- 属性来使初始化标记和配置组件。这些属性全部都是可选的,并且支持手动调用插件。为了避免命名上的和与其他也使用html5的 data- 属性插件与框架的冲突,可以使用全局设置来自定义命名空间。

按钮

通过  data-role="button"  来标记按钮。基于链接的按钮和表单的button元素会被自动渲染, 无需data-role属性。 data-corners true  | falsedata-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | searchdata-iconpos left  | right | top | bottom | notextdata-iconshadow true  | falsedata-inlinetrue |  false data-shadow true  | falsedata-themeswatch letter (a-z)
多个按钮按钮的情况下,可以给这些按钮的容器添加 data-role="controlgroup" 属性,使这些按钮成为垂直的按钮组。给按钮添加 data-type="horizontal"  属性可以使按钮水平并排排列。

复选框

通过 type="checkbox" 标记的input元素会自动增强, 无需data-role属性。 data-rolenone (防止自动增强)data-theme主题样式(a-z) - 添加到表单元素上

可折叠区域

一个标题元素和一个用 data-role="collapsible" 属标记的容器。data-collapsed true  | falsedata-content-theme主题样式 (a-z)data-theme主题样式 (a-z)

手风琴组

一个标题元素和一个用 data-role="collapsible-set" 属标记的容器。data-content-theme主题样式 (a-z) - Sets all collapsibles in setdata-theme主题样式r (a-z) - Sets all collapsibles in set

对话框

data-role="page" 属性标记的容器或者通过 data-rel="dialog" 标记的链接所指向的容器data-close-btn-textstring (对话框的关闭按钮的文字)data-dom-cachetrue |  false data-id字符串 (页面的ID)data-fullscreentrue | false (used in conjunction with fixed toolbars)data-overlay-theme主题样式 (a-z) - 页面弹出对话框的时候蒙版的主题data-theme主题样式 (a-z)data-titlestring (此页面显示的时候的标题)

页面内容

data-role="content" 属性标记的容器data-theme主题样式 (a-z)

Field container

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

开关

data-role="slider" 属性标记的列表菜单,只能有两个option.data-role无 (防止自动增强l)data-theme主题样式 (a-z) - 给表单元素添加主题样式data-track-theme主题样式 (a-z) - 给表单元素添加主题样式

footer

data-role="footer" 属性标记的容器data-id字符串 (unique id, useful in persistent footers)data-positionfixeddata-theme主题样式(a-z)

Header

data-role="header" 属性标记的容器data-add-back-btntrue |  false  (只会在header自动添加后退按钮)data-back-btn-text字符串data-back-btn-theme主题样式 (a-z)data-positionfixeddata-theme主题样式 (a-z)data-title字符串 (title used when page is shown)


你可能感兴趣的:(jquerymobile)