jQuery Mobile Data 属性

jQuery Data 属性

jQuery Mobile 使用 HTML5 data-* 属性为移动设备创建“对触摸友好的”美观的外观。

在下面的参考列表中,粗体值规定默认值。

Button

带有 data-role="button" 的超链接。工具栏中的按钮元素和链接以及输入字段会被自动设置按钮的样式,无需 data-role="button"。

Data 属性 描述
data-corners true | false 规定按钮是否有圆角。
data-icon Icons Reference 规定按钮的图标。默认是没有图标。
data-iconpos left | right | top | bottom | notext 规定图标的位置。
data-iconshadow true | false 规定按钮图标是否有阴影。
data-inline true | false 规定按钮是否是行内的。
data-mini true | false 规定按钮是小型的还是常规尺寸的。
data-shadow true | false 规定按钮是否有阴影。
data-theme letter (a-z) 规定按钮的主题颜色。

提示:如需组合多个按钮,请使用带有 data-role="controlgroup" 以及 data-type="horizontal|vertical" 属性的容器,来规定水平还是垂直组合按钮。

Checkbox

label 和 type="checkbox" 的 input 是成对的。会被自动设置为按钮的样式,无需 data-role。

Data 属性 描述
data-mini true | false 规定复选框是小型的还是常规尺寸的。
data-role none 防止 jQuery Mobile 将复选框设置为按钮的样式。
data-theme letter (a-z) 规定复选框的主题颜色。

提示:如需组合多个复选框,请使用 data-role="controlgroup" 以及 data-type="horizontal|vertical",来规定水平还是垂直组合复选框。

Collapsible

标题元素,其后是位于带有 data-role="collapsible" 属性的容器中的任意 HTML 标记。

Data 属性 描述
data-collapsed true | false 规定内容是否应该关闭或展开。
data-collapsed-icon Icons Reference 规定可折叠按钮的图标。默认是 "plus"。
data-content-theme letter (a-z) 规定可折叠内容的主题颜色。同时会向可折叠内容添加圆角。
data-expanded-icon Icons Reference 规定内容被展开时的可折叠按钮的图标。默认是“减号”。
data-iconpos left | right | top | bottom 规定图标的位置。
data-inset true | false 规定可折叠按钮是否拥有圆角和外边距的样式。
data-mini true | false 规定可折叠按钮是小型的还是常规尺寸的。
data-theme letter (a-z) 规定可折叠按钮的主题颜色。

Collapsible Set

带有 data-role="collapsible-set" 属性的容器中的可折叠内容块。

Data 属性 描述
data-collapsed-icon Icons Reference 规定可折叠按钮的图标。默认是“加号”。
data-content-theme letter (a-z) 规定可折叠内容的主题颜色。
data-expanded-icon Icons Reference 规定内容被展开时的可折叠按钮的图标。默认是“减号”。
data-iconpos left | right | top | bottom | notext 规定图标的位置。
data-inset true | false 规定 collapsibles 是否拥有圆角和外边距的样式。
data-mini true | false 规定可折叠按钮是小型的还是常规尺寸的。
data-theme letter (a-z) 规定可折叠集合的主题颜色。

Content

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

Data 属性 描述
data-theme letter (a-z) 规定内容的主题颜色。默认是 "c"。

Controlgroup

带有 data-role="controlgroup" 属性的 <div> or <fieldset> 容器。组合多个按钮样式的单一类型 input(基于链接的按钮、单选按钮、复选框、选择菜单)。

Data 属性 描述
data-mini true | false 规定组合是小型的还是常规尺寸的。
data-type horizontal | vertical 规定组合水平还是垂直显示。

Dialog

data-role="dialog" 的容器或者 data-rel="dialog" 的链接。

Data 属性 描述
data-close-btn-text sometext 规定仅用于对话框的关闭按钮的文本。
data-dom-cache true | false 规定是否为个别页面清除 jQuery DOM 缓存(如果设置 true,则需要注意对 DOM 的管理,并全面测试所有移动设备)。
data-overlay-theme letter (a-z) 规定对话页面的叠加(背景)色。
data-theme letter (a-z) 规定对话页的主题颜色。
data-title sometext 规定对话页的标题。

Enhancement

带有 data-enhance="false" 或 data-ajax="false" 属性的容器。

Data 属性 描述
data-enhance true | false 如果设置为 "true",, (default) jQuery Mobile 会自动为页面添加样式,使其更适合移动设备。如果设置为 "false",则框架不会设置页面的样式。
data-ajax true | false 规定是否通过 AJAX 来加载页面。

注释:data-enhance="false" 比如结合 $.mobile.ignoreContentEnabled=true" 使用,以阻止 jQuery Mobile 自动添加页面样式。

当 $.mobile.ignoreContentEnabled 设置为 true 时,data-ajax="false" 的容器中的任何链接或表单元素,将被框架的导航功能忽略。

Fieldcontainer

包装 label/form 元素对的 data-role="fieldcontain" 的容器。

Fixed Toolbar

带有 data-role="header" 或 data-role="footer" 属性以及 data-position="fixed" 属性的容器。

Data 属性 描述
data-disable-page-zoom true | false 规定用户是否有能力缩放页面。
data-fullscreen true | false 规定工具栏始终位于顶部以及/或者底部。
data-tap-toggle true | false 规定用户是否有能力通过点击/敲击来切换工具栏的可见性。
data-transition slide | fade | none 规定当敲击/点击发生时的过渡效果。
data-update-page-padding true | false 规定当发生 resize、transition 以及 "updatelayout" 事件时更新页面上下内边距(jQuery Mobile 总是在 "pageshow" 事件发生时更新内边距)
data-visible-on-page-show true | false 规定在显示父页面时的工具栏可见性。

Flip Toggle Switch

带有 data-role="slider" 属性的一个 <select> 元素以及两个 <option> 元素。

Data 属性 描述
data-mini true | false 规定开关是小型的还是常规尺寸的。
data-role none 防止 jQuery Mobile 将切换开关设置为按钮样式。
data-theme letter (a-z) 规定切换开关的主题颜色。
data-track-theme letter (a-z) 规定轨道的主题颜色。

Footer

带有 data-role="footer" 属性的容器。

Data 属性 描述
data-id sometext 规定唯一 ID。对于 persistent footers 是必需的。
data-position inline | fixed 规定页脚与页面内容是行内关系,还是保留在底部。
data-fullscreen true | false 规定页面是否始终位于底部并覆盖页面内容 (slightly see-through)。
data-theme letter (a-z) 规定页脚的主题颜色。默认是 "a"。

注释:如需启用 fullscreen 定位,请使用 data-position="fixed",然后为该元素添加 data-fullscreen 属性。

Header

data-role="header" 的容器。

Data 属性 描述
data-id sometext 规定唯一 ID。对于 persistent headers 是必需的。
data-position inline | fixed 规定页眉与页面内容是行内关系,还是保留在顶部。
data-fullscreen true | false 规定页面是否始终位于顶部并覆盖页面内容 (slightly see-through)。
data-theme letter (a-z) 规定页眉的主题颜色。默认是 "a"。

注释:如需启用 fullscreen 定位,请使用 data-position="fixed",然后为该元素添加 data-fullscreen 属性。

Link

所有链接,包括 data-role="button" 的链接以及表单提交按钮。

Data 属性 描述
data-ajax true | false 规定是否通过 AJAX 来加载页面,以改进用户体验和过渡。如果设置为 false,则 jQuery Mobile 将进行普通的页面请求。
data-direction reverse 反转过渡动画(仅用于页面或对话)
data-dom-cache true | false 规定是否清除个别页面的 jQuery DOM 缓存(如果设置为 true,则您需要注意对 DOM 的管理,并全面测试所有移动设备)。
data-prefetch true | false 规定是否把页面预取到 DOM 中,以使其在用户访问时可用。
data-rel back | dialog | external | popup 规定有关链接如何行为的选项。 Back - 在历史记录中向后移动一步。 Dialog - 将页面作为对话来打开,不在历史中记录。 External - 链接到另一域。 opens - 打开弹出窗口。
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。
data-position-to origin | jQuery selector | window 规定弹出框的位置。 Origin - 默认。在打开它的链接上弹出。 jQuery selector - 在指定元素上弹出。 Window - 在窗口屏幕中间弹出。

List

带有 data-role="listview" 属性的 <ol> 或 <ul>。

Data 属性 描述
data-autodividers true | false 规定是否自动分隔列表项。
data-count-theme letter (a-z) 规定计数泡沫的主题颜色。默认是 "c"。
data-divider-theme letter (a-z) 规定列表分隔符的主题颜色。默认是 "b"。
data-filter true | false 规定是否在列表中添加搜索框。
data-filter-placeholder sometext 规定搜索框中的文本。默认是 "Filter items..."。
data-filter-theme letter (a-z) 规定搜索过滤程序的主题颜色。默认是 "c"。
data-icon Icons Reference 规定列表的图标。
data-inset true | false 规定是否为列表添加圆角和外边距样式。
data-split-icon Icons Reference 规定划分按钮的图标。默认是 "arrow-r"。
data-split-theme letter (a-z) 规定划分按钮的主题颜色。默认是 "b"。
data-theme letter (a-z) 规定列表的主题颜色。

List item

带有 data-role="listview" 属性的 <ol> 或 <ul> 中的 <li>。

Data 属性 描述
data-filtertext sometext 规定在过滤元素时搜索的文本。该文本而不是实际的列表项文本将会被搜索。
data-icon Icons Reference 规定列表项的图标。
data-role list-divider 规定列表项的分隔符。
data-theme letter (a-z) 规定列表项的主题颜色。

注释:data-icon 属性仅适用于含有链接的列表项。

Navbar

带有 data-role="navbar" 属性的容器内部的 <li> 元素。

Data 属性 描述
data-icon Icons Reference 规定列表项的图标。
data-iconpos left | right | top | bottom | notext 规定图标的位置。

提示:导航栏从其父容器继承 theme-swatch。向导航栏设置 data-theme 属性是不可行的。可以单独向 navbar 中的每个链接设置 data-theme 属性。

Page

带有 data-role="page" 属性的容器。

Data 属性 描述
data-add-back-btn true | false 自动添加后退按钮,仅用于页眉。
data-back-btn-text sometext 规定后退按钮的文本。
data-back-btn-theme letter (a-z) 规定后退按钮的主题颜色。
data-close-btn-text letter (a-z) 规定对话上的关闭按钮的文本。
data-dom-cache true | false 规定是否清除个别页面的 jQuery DOM 缓存(如果设置为 true,则您需要注意对 DOM 的管理,并全面测试所有移动设备)。
data-overlay-theme letter (a-z) 规定对话页面的叠加(背景)色。
data-theme letter (a-z) 规定页面的主题颜色。默认是 "c"。
data-title sometext 规定页面的标题。
data-url url 该值用于更新 URL,而不是用于请求页面。

Popup

带有 data-role="popup" 属性的容器。

Data 属性 描述
data-corners true | false 规定弹出框是否有圆角。
data-overlay-theme letter (a-z) 规定弹出框的叠加(背景)色。默认是透明背景(none)。
data-shadow true | false 规定弹出框是否有阴影。
data-theme letter (a-z) 规定弹出框的主题颜色。默认是继承,"none" 设置为透明。
data-tolerance 30, 15, 30, 15 规定距离窗口边缘 (top, right, bottom, left) 的距离。

带有 data-rel="popup" 属性的锚:

Data 属性 描述
data-position-to origin | jQuery selector | window 规定弹出框的位置。 Origin - 默认。弹出框位于打开它的链接上。 jQuery selector - 弹出框位于指定元素上。 Window - 弹出框位于窗口屏幕中央。
data-rel popup 用于打开的弹出框。
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。

Radio Button

label 与 type="radio" 的 input 对。会被自动设置为按钮样式,无需 data-role。

Data 属性 描述
data-mini true | false 规定按钮是否小型的或者是常规尺寸的。
data-role none 放置 jQuery Mobile 将单选按钮设置为 enhanced buttons 的样式。
data-theme letter (a-z) 规定单选按钮的主题颜色。

提示:如需组合多个单选按钮,请使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 来规定水平还是垂直地组合按钮。

Select

所有 <select> 元素。会被自动设置按钮的样式,无需 date-role。

Data 属性 描述
data-icon Icons Reference 规定 select 元素的图标。默认是 "arrow-d"。
data-iconpos left | right | top | bottom | notext 规定图标的位置。
data-inline true | false 规定 select 元素是否是行内。
data-mini true | false 规定 select 元素是小型的还是常规尺寸的。
data-native-menu true | false 如果设置为 false,则使用 jQuery 自己的自定义选择菜单(如果您希望选择菜单在所有移动设备上拥有一致的外观,则推荐使用)。
data-overlay-theme letter (a-z) 规定 jQuery 自定义选择菜单的主题颜色(与 data-native-menu="false" 一起使用)。
data-placeholder true | false 可以在非原生 select 的 <option> 元素上设置。
data-role none 放置 jQuery Mobile 将 select 元素设置为按钮样式。
data-theme letter (a-z) 规定 select 元素的主题颜色。

提示:如需组合多个 select 元素,请使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 来规定把该元素水平还是垂直地进行组合。

Slider

type="range" 的 input 元素。会被自动设置为按钮样式,无需 data-role。

Data 属性 描述
data-highlight true | false 规定是否突出显示滑块轨道。
data-mini true | false 规定滑块是小型的还是常规尺寸的。
data-role none 放置 jQuery Mobile 将滑块设置按钮的样式。
data-theme letter (a-z) 规定滑块控件(input、handle 和 track)的主题颜色。
data-track-theme letter (a-z) 规定滑块轨道的主题颜色。

Text input & Textarea

type="text|search|etc." 的 input 元素或 textarea 元素。会被自动设置样式,无需 data-role。

Data 属性 描述
data-mini true | false 规定是否 input 元素是小型的还是常规尺寸的。
data-role none 放置 jQuery Mobile 将 input/textarea 设置问按钮的样式。
data-theme letter (a-z) 规定输入字段的主题颜色。
友情链接:sat枪手  gre答案  托福答案  sat答案  雅思枪手  gre答案  sat答案  托业答案  act代考  托福替考  托福代考  gmat代考  托业代考  雅思替考  act枪手  sat替考  托业替考  托福答案  托福枪手  托业代考  act代考  托福代考  gre枪手  托业替考  托业代考  雅思答案  托业答案  sat代考  托福枪手  sat代考  雅思枪手  雅思枪手  托业答案  雅思枪手  雅思替考  托业替考  cae代考  雅思答案  托福代考  act枪手  托业替考  托福答案  sat代考  act答案  gre代考  cae代考  托福答案  雅思答案  sat替考  sat替考  托福代考  gre代考  雅思替考  托福替考  pte替考  pte替考  托福自拍照代考  sat代考  托业代考  gmat代考  雅思自拍照代考  托福代考  sat替考  托福代考  托福替考  gre代考  雅思代考  act枪手  托福代考  雅思替考  sat代考  雅思面授  托福枪手  pte替考  雅思面授  雅思替考  gmat代考  cae代考  gre答案  gre代考  act枪手  cae代考  sat枪手  pte替考  托福替考  托业代考  cae代考  sat枪手  托福替考  托业替考  托业答案  托福自拍照代考  雅思替考  雅思枪手  gre枪手  sat代考  Pte自拍照代考  雅思代考  雅思答案  act答案