阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery Mobile Data 属性

      jQuery Data 属性

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

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


      按钮

      在1.4 版本以后已废弃。使用 CSS 类替代。带有 data-role=“button” 的超链接。button 元素、工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=“button”。

      Data-属性描述
      data-cornerstruefalse
      data-icon图标参考手册规定按钮的图标。默认没有图标。
      data-iconposleftright
      data-iconshadowtruefalse
      data-inlinetruefalse
      data-minitruefalse
      data-shadowtruefalse
      data-theme字母 (a-z)规定按钮的主题颜色

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


      复选框

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

      Data-属性描述
      data-minitruefalse
      data-rolenone防止 jQuery Mobile 把复选框渲染成按钮样式
      data-theme字母 (a-z)规定复选框的主题颜色

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


      可折叠块

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

      Data-属性描述
      data-collapsedtruefalse
      data-collapsed-icon图标参考手册规定可折叠按钮的图标。默认是 “plus”
      data-content-theme字母 (a-z)规定可折叠内容的主题颜色。是否为可折叠内容添加圆角
      data-expanded-icon图标参考手册规定当内容展开时可折叠按钮的图标。默认是 “minus”
      data-iconposleftright
      data-insettruefalse
      data-minitruefalse
      data-theme字母 (a-z)规定可折叠按钮的主题颜色

      可折叠集合

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

      Data-属性描述
      data-collapsed-icon图标参考手册规定可折叠按钮的图标。默认是 “plus”
      data-content-theme字母 (a-z)规定可折叠按钮的主题颜色
      data-expanded-icon图标参考手册规定当内容展开时可折叠按钮的图标。默认是 “minus”
      data-iconposleftright
      data-insettruefalse
      data-minitruefalse
      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-minitruefalse
      data-typehorizontalvertical

      对话框

      带有 data-role=“dialog” 的容器或带有 data-rel=“dialog” 的链接。

      Data-属性描述
      data-close-btn-textsometext规定对话框关闭按钮的文本
      data-dom-cachetruefalse
      data-overlay-theme字母 (a-z)规定对话框页面的蒙版(背景)颜色
      data-theme字母 (a-z)规定对话框页面的主题颜色
      data-titlesometext规定对话框页面的标题

      增强

      带有 data-enhance=“false” 或 data-ajax=“false” 的容器。

      Data-属性描述
      data-enhancetruefalse
      data-ajaxtruefalse

      **注意:**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-zoomtruefalse
      data-fullscreentruefalse
      data-tap-toggletruefalse
      data-transitionslidefade
      data-update-page-paddingtruefalse
      data-visible-on-page-showtruefalse

      翻转拨动开关

      一个带有 data-role=“slider” 的 元素和两个 元素。

      Data-属性描述
      data-minitruefalse
      data-rolenone防止 jQuery Mobile 把拨动开关渲染成按钮样式
      data-theme字母 (a-z)规定拨动开关的主题颜色
      data-track-theme字母 (a-z)规定轨道的主题颜色

      尾部栏

      带有 data-role=“footer” 的容器。

      Data-属性描述
      data-idsometext规定唯一 ID。对于持续的尾部栏是必需的
      data-positioninlinefixed
      data-fullscreentruefalse
      data-theme字母 (a-z)规定尾部栏的主题颜色。默认是 “a”
      注意:如需启用全屏定位,请使用 data-position=“fixed”,然后添加 data-fullscreen 属性到元素上。

      头部栏

      带有 data-role=“header” 的容器。

      Data-属性描述
      data-idsometext规定唯一 ID。对于持续的头部栏是必需的
      data-positioninlinefixed
      data-fullscreentruefalse
      data-theme字母 (a-z)规定头部栏的主题颜色。默认是 “a”
      注意:如需启用全屏定位,请使用 data-position=“fixed”,然后添加 data-fullscreen 属性到元素上。

      链接

      所有的链接,包含那些带有 data-role=“button” 的链接和表单提交按钮。

      Data-属性描述
      data-ajaxtruefalse
      data-directionreverse反向转换动画(仅用于页面和对话框)
      data-dom-cachetruefalse
      data-prefetchtruefalse
      data-relbackdialog
      data-transitionfadeflip
      data-position-tooriginjQuery selector

      列表

      带有 data-role=“listview” 的 <ol> 或 <ul>。

      Data-属性描述
      data-autodividerstruefalse
      data-count-theme字母 (a-z)规定计数气泡的主题颜色。
      data-divider-theme字母 (a-z)规定列表分隔的主题颜色。
      data-filtertruefalse
      data-filter-placeholdersometext1.4 版本后废弃。使用 HTML placeholder 属性替代。规定搜索框内的文本。默认是 “Filter items…”
      data-filter-theme字母 (a-z)规定搜索过滤的主题颜色。
      data-icon图标参考手册规定列表的图标
      data-insettruefalse
      data-split-icon图标参考手册规定分割按钮的图表。默认是 “arrow-r”
      data-split-theme字母 (a-z)规定分割按钮的主题颜色。
      data-theme字母 (a-z)规定列表的主题颜色

      列表项

      带有 data-role=“listview” 的 <ol> 或 <ul> 内的 <li>。

      Data-属性描述
      data-filtertextsometext规定当过滤元素时要搜索的文本。该文本将会被过滤,而不是实际的列表项文本
      data-icon图标参考手册规定列表项图标
      data-rolelist-divider规定列表项的分隔
      data-theme字母 (a-z)规定列表项的主题颜色
      注意:data-icon 属性只作用于带有链接的列表项。

      导航栏

      带有 data-role=“navbar” 容器内部的 <li> 元素。

      Data-属性描述
      data-icon图标参考手册规定列表项的图标
      data-iconposleftright

      导航栏从他们的父容器中继承了主题样本。为导航栏设置 data-theme 属性是不可能的。可以为导航栏中的每个链接单独设置 data-theme 属性。

      页面

      带有 data-role=“page” 的容器。

      Data-属性描述
      data-add-back-btntruefalse
      data-back-btn-textsometext规定后退按钮的一些文本
      data-back-btn-theme字母 (a-z)规定后退按钮的主题颜色
      data-close-btn-text字母 (a-z)规定对话框上关闭按钮的一些文本
      data-dom-cachetruefalse
      data-overlay-theme字母 (a-z)规定对话框页面的蒙版(背景)颜色
      data-theme字母 (a-z)规定页面的主题颜色。
      data-titlesometext规定页面标题
      data-urlurl更新 URL 的值,而不是用于请求页面的 URL

      弹窗

      带有 data-role=“popup” 的容器。

      Data-属性描述
      data-cornerstruefalse
      data-overlay-theme字母 (a-z)规定弹出框的蒙版(背景)颜色。默认是透明背景(无)
      data-shadowtruefalse
      data-theme字母 (a-z)规定弹出框的主题颜色。默认是继承的,“none” 设置弹窗为透明的
      data-tolerance30, 15, 30, 15规定窗口边缘(上 top、右 right、下 bottom、左 left)的距离

      带有 data-rel=“popup” 的锚:

      Data-属性描述
      data-position-tooriginjQuery selector
      data-relpopup用于打开弹出框
      data-transitionfadeflip

      单选按钮

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

      Data-属性描述
      data-minitruefalse
      data-rolenone防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮,使元素以 HTML 原生的状态显示
      data-theme字母 (a-z)规定单选按钮的主题颜色

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

      选择

      所有的 <select> 元素。这些会被自动渲染成按钮样式,date-role 是不必需的。

      Data-属性描述
      data-icon图标参考手册规定 select 元素的图标。默认是 “arrow-d”
      data-iconposleftright
      data-inlinetruefalse
      data-minitruefalse
      data-native-menutruefalse
      data-overlay-theme字母 (a-z)规定 jQuery 自带的自定义的选择菜单的主题颜色(与 data-native-menu=“false” 一起使用)
      data-placeholdertruefalse
      data-rolenone防止 jQuery Mobile 把 select 元素渲染成按钮样式
      data-theme字母 (a-z)规定 select 元素的主题颜色

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


      滑动块

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

      Data-属性描述
      data-highlighttruefalse
      data-minitruefalse
      data-rolenone防止 jQuery Mobile 渲染滑动块控件为按钮样式
      data-theme字母 (a-z)规定滑动块控件(输入框、手柄和轨道)的主题颜色
      data-track-theme字母 (a-z)规定滑动块轨道的主题颜色

      文本输入框 & 文本输入域

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

      Data-属性描述
      data-minitruefalse
      data-rolenone防止 jQuery Mobile 把输入框/输入域渲染成按钮样式
      data-theme字母 (a-z)规定输入字段的主题颜色
      目录
      目录