首页
会员中心
到顶部
到尾部
  • 当前位置：首页 > 移动开发 > jQuery Mobile 教程
jQuery Mobile 教程

jQuery Mobile Data 属性

时间：2020/11/2 13:13:07  作者：  来源：  查看：0  评论：0
内容摘要：jQuery Mobile Data 属性jQuery Mobile 实例jQuery Mobile 事件jQuery Data 属性jQuery Mobile 使用 HTML5 data-* 属性为移动设备创建“对触摸友好的”美观的外观。在下面的参考列表中，粗体值规定默认值。B...

jQuery Mobile Data 属性

jQuery Data 属性

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

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

Button

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

Data 属性值描述
data-cornerstrue | false规定按钮是否有圆角。
data-iconIcons Reference规定按钮的图标。默认是没有图标。
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" 属性的容器，来规定水平还是垂直组合按钮。

Checkbox

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

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

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

Collapsible

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

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

Collapsible Set

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

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

Content

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

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

Controlgroup

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

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

Dialog

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规定对话页的标题。

Enhancement

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

Data 属性值描述
data-enhancetrue | false如果设置为 "true"，, (default) jQuery Mobile 会自动为页面添加样式，使其更适合移动设备。如果设置为 "false"，则框架不会设置页面的样式。
data-ajaxtrue | 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-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规定在显示父页面时的工具栏可见性。

Flip Toggle Switch

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

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

Footer

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

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

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

Header

data-role="header" 的容器。

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

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

Link

所有链接，包括 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 - 链接到另一域。opens - 打开弹出窗口。
data-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。
data-position-toorigin | jQuery selector | window规定弹出框的位置。Origin - 默认。在打开它的链接上弹出。jQuery selector - 在指定元素上弹出。Window - 在窗口屏幕中间弹出。

List

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

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 Reference规定列表的图标。
data-insettrue | false规定是否为列表添加圆角和外边距样式。
data-split-iconIcons Reference规定划分按钮的图标。默认是 "arrow-r"。
data-split-themeletter (a-z)规定划分按钮的主题颜色。默认是 "b"。
data-themeletter (a-z)规定列表的主题颜色。

List item

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

Data 属性值描述
data-filtertextsometext规定在过滤元素时搜索的文本。该文本而不是实际的列表项文本将会被搜索。
data-iconIcons Reference规定列表项的图标。
data-rolelist-divider规定列表项的分隔符。
data-themeletter (a-z)规定列表项的主题颜色。

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

Navbar

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

Data 属性值描述
data-iconIcons Reference规定列表项的图标。
data-iconposleft | right | top | bottom | notext规定图标的位置。

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

Page

带有 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，而不是用于请求页面。

Popup

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

Data 属性值描述
data-cornerstrue | false规定弹出框是否有圆角。
data-overlay-themeletter (a-z)规定弹出框的叠加（背景）色。默认是透明背景（none）。
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 过渡。

Radio Button

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

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

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

Select

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

Data 属性值描述
data-iconIcons Reference规定 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可以在非原生 select 的 <option> 元素上设置。
data-rolenone放置 jQuery Mobile 将 select 元素设置为按钮样式。
data-themeletter (a-z)规定 select 元素的主题颜色。

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

Slider

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

Data 属性值描述
data-highlighttrue | false规定是否突出显示滑块轨道。
data-minitrue | false规定滑块是小型的还是常规尺寸的。
data-rolenone放置 jQuery Mobile 将滑块设置按钮的样式。
data-themeletter (a-z)规定滑块控件（input、handle 和 track）的主题颜色。
data-track-themeletter (a-z)规定滑块轨道的主题颜色。

Text input & Textarea

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

Data 属性值描述
data-minitrue | false规定是否 input 元素是小型的还是常规尺寸的。
data-rolenone放置 jQuery Mobile 将 input/textarea 设置问按钮的样式。
data-themeletter (a-z)规定输入字段的主题颜色。


上一篇：jQuery Mobile Touch 事件
下一篇：jQuery Mobile 事件
相关评论
移动开发
本类更新
本类推荐
    本类排行
    小程序中文网  |  
    关于我们 - 服务报价 - 付款方式
    广告联系QQ：45157718 点击这里给我发消息 电话：13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号