jQuery Mobile Data 属性

jQuery Mobile Data 属性jQuery Data 属性jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。在下面的参考列表中，粗体显示的值为默认值。按钮在1.4 版本以后已废弃。使用CSS 类 替代。带有 data-role="button" 的超链接。button 元素、工具栏中的链接以及 input 字段都会自动渲染成按钮样式，不需要添加 data-role="button"。Data-属性值描述data-cornerstrue | false规定按钮是否圆角data-icon图标参考手册规定按钮的图标。默认没有图标。data-iconposleft | right | top | bottom | notext规定图标的位置data-iconshadowtrue | false规定按钮图标是否有阴影data-inlinetrue | false规定按钮是否内联data-minitrue | false规定按钮是小尺寸还是常规尺寸data-shadowtrue | false规定按钮是否有阴影data-theme字母 (a-z)规定按钮的主题颜色如需组合多个按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合按钮。复选框带有 type="checkbox" 的成双成对的 label 和 input。它们会被自动渲染成按钮样式，data-role 不是必需的。Data-属性值描述data-minitrue | false规定复选框是小尺寸还是常规尺寸data-rolenone防止 jQuery Mobile 把复选框渲染成按钮样式data-theme字母 (a-z)规定复选框的主题颜色如需组合多个复选框，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合复选框。可折叠块在带有 data-role="collapsible" 的容器内部的后跟任意 HTML 标记的标题元素。Data-属性值描述data-collapsedtrue | false规定内容是折叠还是展开data-collapsed-icon图标参考手册规定可折叠按钮的图标。默认是 "plus"data-content-theme字母 (a-z)规定可折叠内容的主题颜色。是否为可折叠内容添加圆角data-expanded-icon图标参考手册规定当内容展开时可折叠按钮的图标。默认是 "minus"data-iconposleft | right | top | bottom规定图标的位置data-insettrue | false规定可折叠按钮是否渲染成圆角且带外边距data-minitrue | false规定可折叠按钮是小尺寸还是常规尺寸data-theme字母 (a-z)规定可折叠按钮的主题颜色可折叠集合在带有 data-role="collapsible-set" 的容器内部的可折叠内容块。Data-属性值描述data-collapsed-icon图标参考手册规定可折叠按钮的图标。默认是 "plus"data-content-theme字母 (a-z)规定可折叠按钮的主题颜色data-expanded-icon图标参考手册规定当内容展开时可折叠按钮的图标。默认是 "minus"data-iconposleft | right | top | bottom | notext规定图标的位置data-insettrue | false规定可折叠块是否渲染成圆角且带外边距data-minitrue | false规定可折叠按钮是小尺寸还是常规尺寸data-theme字母 (a-z)规定可折叠集合的主题颜色内容在 1.4 版本已废弃, 1.5 版本后不再支持。 使用 data-role="content" 的容器。Data-属性值描述data-theme字母 (a-z)规定内容的主题颜色。控件组带有 data-role="controlgroup" 的 <div> 或 <fieldset> 容器。组合单个类型（基于链接的按钮、单选按钮、复选框、select 元素）的多个按钮样式的 input。对于组合表单复选框和单选按钮，推荐在带有 data-role="fieldcontain" 的 <div> 内使用 <fieldset> 容器来改进标签样式。Data-属性值描述data-minitrue | false规定控件组是小尺寸还是常规尺寸data-typehorizontal | vertical规定控件组是水平显示还是垂直显示对话框带有 data-role="dialog" 的容器或带有 data-rel="dialog" 的链接。Data-属性值描述data-close-btn-textsometext规定对话框关闭按钮的文本data-dom-cachetrue | false规定是否清除各个页面的 jQuery DOM 缓存（如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试）data-overlay-theme字母 (a-z)规定对话框页面的蒙版（背景）颜色data-theme字母 (a-z)规定对话框页面的主题颜色data-titlesometext规定对话框页面的标题增强带有 data-enhance="false" 或 data-ajax="false" 的容器。Data-属性值描述data-enhancetrue | false如果设置为 "true"（默认），jQuery Mobile 会自动渲染页面，使其更适合于移动设备。如果设置为 "false"，框架将不会渲染页面data-ajaxtrue | false规定是否通过 ajax 加载页面注意：data-enhance="false" 必须与 $.mobile.ignoreContentEnabled=true" 一同使用来阻止 jQuery Mobile 自动渲染页面。当 $.mobile.ignoreContentEnabled 设置为 true 时，data-ajax="false" 容器内的任何链接或表单元素将会被框架的导航功能忽略。域容器 1.4 版本后已废弃，在 1.5 版本后不再支持，将使用 class="ui-fieldcontain 替代"。 包裹在 label/form 元素对，并带有 data-role="fieldcontain" 的容器。固定工具栏带有 data-role="header" 或 data-role="footer"，并带有 data-position="fixed" 属性的容器。Data-属性值描述data-disable-page-zoomtrue | false规定用户是否能缩放页面data-fullscreentrue | false规定工具栏是否一直固定在顶部或底部data-tap-toggletrue | false规定用户是否能够通过点击改变工具栏的可见性data-transitionslide | fade | none规定当点击发生时的切换效果data-update-page-paddingtrue | false规定页面顶部和底部的内边距是否在 resize、transition 和 "updatelayout" 事件发生时更新（jQuery Mobile 在 "pageshow" 事件发生时总是更新内边距）data-visible-on-page-showtrue | false规定当父页面显示时工具栏的可见性翻转拨动开关一个带有 data-role="slider" 的 <select> 元素和两个 <option> 元素。Data-属性值描述data-minitrue | false规定开关是小尺寸还是常规尺寸data-rolenone防止 jQuery Mobile 把拨动开关渲染成按钮样式data-theme字母 (a-z)规定拨动开关的主题颜色data-track-theme字母 (a-z)规定轨道的主题颜色尾部栏带有 data-role="footer" 的容器。Data-属性值描述data-idsometext规定唯一 ID。对于持续的尾部栏是必需的data-positioninline | fixed规定尾部栏是与页面内容内联还是保持固定在底部data-fullscreentrue | false规定尾部栏是固定