雷林鹏分享：jQuery Mobile Data 属性

　　jQuery Mobile Data 属性

　　jQuery Data 属性

　　jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。

　　在下面的参考列表中，粗体显示的值为默认值。

　　按钮

　　带有 data-role="button" 的超链接。button 元素、工具栏中的链接以及 input 字段都会自动渲染成按钮样式，不需要添加 data-role="button"。

　　Data-属性值描述

　　data-cornerstrue | false规定按钮是否圆角

　　data-iconIcons 参考手册规定按钮的图表。默认没有图标。

　　data-iconposleft | right | top | bottom | notext规定图标的位置

　　data-iconshadowtrue | false规定按钮图标是否有阴影

　　data-inlinetrue | false规定按钮是否内联

　　data-minitrue | false规定按钮是小尺寸还是常规尺寸

　　data-shadowtrue | false规定按钮是否有阴影

　　data-themeletter (a-z)规定按钮的主题颜色

如需组合多个按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合按钮。

　　复选框

　　带有 type="checkbox" 的成双成对的 label 和 input。它们会被自动渲染程按钮样式，data-role 不是必需的。

　　Data-属性值描述

　　data-minitrue | false规定复选框是小尺寸还是常规尺寸

　　data-rolenone防止 jQuery Mobile 把复选框渲染成按钮样式

　　data-themeletter (a-z)规定复选框的主题颜色

如需组合多个复选框，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合复选框。

　　可折叠块

　　在带有 data-role="collapsible" 的容器内部的后跟任意 HTML 标记的标题元素。

　　Data-属性值描述

　　data-collapsedtrue | false规定内容是折叠还是展开

　　data-collapsed-iconIcons 参考手册规定可折叠按钮的图标。默认是 "plus"

　　data-content-themeletter (a-z)规定可折叠内容的主题颜色。是否为可折叠内容添加圆角

　　data-expanded-iconIcons 参考手册规定当内容展开时可折叠按钮的图标。默认是 "minus"

　　data-iconposleft | right | top | bottom规定图标的位置

　　data-insettrue | false规定可折叠按钮是否渲染成圆角且带外边距

　　data-minitrue | false规定可折叠按钮是小尺寸还是常规尺寸

　　data-themeletter (a-z)规定可折叠按钮的主题颜色

　　可折叠集合

　　在带有 data-role="collapsible-set" 的容器内部的可折叠内容块。

　　Data-属性值描述

　　data-collapsed-iconIcons 参考手册规定可折叠按钮的图标。默认是 "plus"

　　data-content-themeletter (a-z)规定可折叠按钮的主题颜色

　　data-expanded-iconIcons 参考手册规定当内容展开时可折叠按钮的图标。默认是 "minus"

　　data-iconposleft | right | top | bottom | notext规定图标的位置

　　data-insettrue | false规定可折叠块是否渲染成圆角且带外边距

　　data-minitrue | false规定可折叠按钮是小尺寸还是常规尺寸

　　data-themeletter (a-z)规定可折叠集合的主题颜色

　　内容

　　带有 data-role="content" 的容器。

　　Data-属性值描述

　　data-themeletter (a-z)规定内容的主题颜色。默认是 "c"

　　控件组

　　带有 data-role="controlgroup" 的

或

容器。 组合单个类型(基于链接的按钮、单选按钮、复选框、select 元素)的多个按钮样式的 input。对于组合表单复选框和单选按钮，推荐在带有 data-role="fieldcontain" 的

内使用

容器来改进标签样式。

　　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-themeletter (a-z)规定对话框页面的蒙版(背景)颜色

　　data-themeletter (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" 容器内的任何链接或表单元素将会被框架的导航功能忽略。

　　域容器

　　包围在 label/表单元素对周围的带有 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" 的元素和两个 元素。　　Data-属性值描述　　data-minitrue | false规定开关是小尺寸还是常规尺寸　　data-rolenone防止 jQuery Mobile 把拨动开关渲染成按钮样式　　data-themeletter (a-z)规定拨动开关的主题颜色　　data-track-themeletter (a-z)规定轨道的主题颜色　　尾部栏　　带有 data-role="footer" 的容器。　　Data-属性值描述　　data-idsometext规定唯一 ID。对于持续的尾部栏是必需的　　data-positioninline | fixed规定尾部栏是与页面内容内联还是保持固定在底部　　data-fullscreentrue | false规定尾部栏是固定在底部还是覆盖在页面内容上(查看范围更大) 　　data-themeletter (a-z)规定尾部栏的主题颜色。默认是 "a" 　　注意：如需启用全屏定位，请使用 data-position="fixed"，然后添加 data-fullscreen 属性到元素上。　　头部栏　　带有 data-role="header" 的容器。　　Data-属性值描述　　data-idsometext规定唯一 ID。对于持续的头部栏是必需的　　data-positioninline | fixed规定头部栏是与页面内容内联还是保持固定在顶部　　data-fullscreentrue | false规定头部栏是固定在顶部还是覆盖在页面内容上(查看范围更大) 　　data-themeletter (a-z)规定头部栏的主题颜色。默认是 "a" 　　注意：如需启用全屏定位，请使用 data-position="fixed"，然后添加 data-fullscreen 属性到元素上。　　链接　　所有的链接，包含那些带有 data-role="button" 的链接和表单提交按钮。　　Data-属性值描述　　data-ajaxtrue | false规定是否通过 ajax 加载页面来提高用户体验和交互。如果设置为 false，jQuery Mobile 将会执行一个正常的页面请求。　　data-directionreverse反向转换动画(仅用于页面和对话框) 　　data-dom-cachetrue | false规定是否清除各个页面的 jQuery DOM 缓存(如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试) 　　data-prefetchtrue | false规定是否预先读取页面到 DOM 中，以便当用户访问它们时可用　　data-relback | dialog | external | popup规定链接行为的选项。Back - 回退到历史记录中的前一个页面。Dialog - 以对话框形式打开链接，不保存到历史记录中。External - 用于链接到另一个域。Popup - 打开一个弹出窗口。　　data-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none规定一个页面切换到下一个页面的效果。请查看我们的 jQuery Mobile 页面切换章节。　　data-position-toorigin | jQuery selector | window规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。　　列表　　带有 data-role="listview" 的 或 。　　Data-属性值描述　　data-autodividerstrue | false规定是否自动划分列表项　　data-count-themeletter (a-z)规定计数气泡的主题颜色。默认是 "c" 　　data-divider-themeletter (a-z)规定列表分隔的主题颜色。默认是 "b" 　　data-filtertrue | false规定是否在列表中添加搜索框　　data-filter-placeholdersometext规定搜索框内的文本。默认是 "Filter items..." 　　data-filter-themeletter (a-z)规定搜索过滤的主题颜色。默认是 "c" 　　data-iconIcons 参考手册规定列表的图标　　data-insettrue | false规定列表是否渲染成圆角且带外边距　　data-split-iconIcons 参考手册规定分割按钮的图表。默认是 "arrow-r" 　　data-split-themeletter (a-z)规定分割按钮的主题颜色。默认是 "b" 　　data-themeletter (a-z)规定列表的主题颜色　　列表项　　带有 data-role="listview" 的 或 内的 。　　Data-属性值描述　　data-filtertextsometext规定当过滤元素时要搜索的文本。该文本将会被过滤，而不是实际的列表项文本　　data-iconIcons 参考手册规定列表项图标　　data-rolelist-divider规定列表项的分隔　　data-themeletter (a-z)规定列表项的主题颜色　　注意：data-icon 属性只作用于带有链接的列表项。　　导航栏　　带有 data-role="navbar" 容器内部的 元素。　　Data-属性值描述　　data-iconIcons 参考手册规定列表项的图标　　data-iconposleft | right | top | bottom | notext规定图标的位置 导航栏从他们的父容器中继承了主题样本。为导航栏设置 data-theme 属性是不可能的。可以为导航栏中的每个链接单独设置 data-theme 属性。　　页面　　带有 data-role="page" 的容器。　　Data-属性值描述　　data-add-back-btntrue | false自动添加后退按钮，仅限头部栏　　data-back-btn-textsometext规定后退按钮的一些文本　　data-back-btn-themeletter (a-z)规定后退按钮的主题颜色　　data-close-btn-textletter (a-z)规定对话框上关闭按钮的一些文本　　data-dom-cachetrue | false规定是否清除各个页面的 jQuery DOM 缓存(如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试) 　　data-overlay-themeletter (a-z)规定对话框页面的蒙版(背景)颜色　　data-themeletter (a-z)规定页面的主题颜色。默认是 "c" 　　data-titlesometext规定页面标题　　data-urlurl更新 URL 的值，而不是用于请求页面的 URL 　　弹窗　　带有 data-role="popup" 的容器。　　Data-属性值描述　　data-cornerstrue | false规定弹窗是否圆角　　data-overlay-themeletter (a-z)规定弹出框的蒙版(背景)颜色。默认是透明背景(无) 　　data-shadowtrue | false规定弹出框是否有阴影　　data-themeletter (a-z)规定弹出框的主题颜色。默认是继承的，"none" 设置弹窗为透明的　　data-tolerance30, 15, 30, 15规定窗口边缘(上 top、右 right、下 bottom、左 left)的距离　　带有 data-rel="popup" 的锚：　　Data-属性值描述　　data-position-toorigin | jQuery selector | window>规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。　　data-relpopup用于打开弹出框　　data-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none规定一个页面切换到下一个页面的效果。请查看我们的 jQuery Mobile 页面切换章节。　　单选按钮　　带有 type="radio" 的成双成对的 label 和 input。它们会被自动渲染程按钮样式，data-role 不是必需的。　　Data-属性值描述　　data-minitrue | false规定按钮是小尺寸还是常规尺寸　　data-rolenone防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮，使元素以 HTML 原生的状态显示　　data-themeletter (a-z)规定单选按钮的主题颜色 如需组合多个单选按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合单选按钮。　　选择　　所有的 元素。这些会被自动渲染成按钮样式，date-role 是不必需的。

　　Data-属性值描述

　　data-iconIcons 参考手册规定 select 元素的图标。默认是 "arrow-d"

　　data-iconposleft | right | top | bottom | notext规定图标的位置

　　data-inlinetrue | false规定 select 元素是否内联

　　data-minitrue | false规定 select 元素是小尺寸还是常规尺寸

　　data-native-menutrue | false当设置为 false 时，它使用 jQuery 自带的自定义的选择菜单(如果您想要让选择菜单在所有的移动设备上都显示相同，则推荐这么使用)

　　data-overlay-themeletter (a-z)规定 jQuery 自带的自定义的选择菜单的主题颜色(与 data-native-menu="false" 一起使用)

　　data-placeholdertrue | false可在一个非原生的选择菜单的元素上设置

　　data-rolenone防止 jQuery Mobile 把 select 元素渲染成按钮样式

　　data-themeletter (a-z)规定 select 元素的主题颜色

如需组合多个 select 元素，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合 select 元素。

　　滑动块

　　带有 type="range" 的输入框。这些会被自动渲染成按钮样式，date-role 是不必需的。

　　Data-属性值描述

　　data-highlighttrue | false规定滑动轨道是否高亮突出显示

　　data-minitrue | false规定滑动块是小尺寸还是常规尺寸

　　data-rolenone防止 jQuery Mobile 渲染滑动块控件为按钮样式

　　data-themeletter (a-z)规定滑动块控件(输入框、手柄和轨道)的主题颜色

　　data-track-themeletter (a-z)规定滑动块轨道的主题颜色

　　文本输入框 & 文本输入域

　　带有 type="text|search|etc." 的 input 或 textarea 元素。这些会被自动渲染成按钮样式，date-role 是不必需的。

　　Data-属性值描述

　　data-minitrue | false规定输入框是小尺寸还是常规尺寸

　　data-rolenone防止 jQuery Mobile 把输入框/输入域渲染成按钮样式

　　data-themeletter (a-z)规定输入字段的主题颜色

　　本文转载自：w3cschool(编辑：雷林鹏 来源：网络 侵删)