按钮

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

Data-属性 值 描述
data-corners true | false 规定按钮是否圆角
data-icon Icons 参考手册 规定按钮的图表。默认没有图标。
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" 的容器来规定是否水平或垂直组合按钮。

复选框

带有 type="checkbox" 的成双成对的 label 和 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" 的容器来规定是否水平或垂直组合复选框。

可折叠块

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

Data-属性 值 描述
data-collapsed true | false 规定内容是折叠还是展开
data-collapsed-icon Icons 参考手册 规定可折叠按钮的图标。默认是 "plus"
data-content-theme letter (a-z) 规定可折叠内容的主题颜色。是否为可折叠内容添加圆角
data-expanded-icon Icons 参考手册 规定当内容展开时可折叠按钮的图标。默认是 "minus"
data-iconpos left | right | top | bottom 规定图标的位置
data-inset true | false 规定可折叠按钮是否渲染成圆角且带外边距
data-mini true | false 规定可折叠按钮是小尺寸还是常规尺寸
data-theme letter (a-z) 规定可折叠按钮的主题颜色

可折叠集合

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

Data-属性 值 描述
data-collapsed-icon Icons 参考手册 规定可折叠按钮的图标。默认是 "plus"
data-content-theme letter (a-z) 规定可折叠按钮的主题颜色
data-expanded-icon Icons 参考手册 规定当内容展开时可折叠按钮的图标。默认是 "minus"
data-iconpos left | right | top | bottom | notext 规定图标的位置
data-inset true | false 规定可折叠块是否渲染成圆角且带外边距
data-mini true | false 规定可折叠按钮是小尺寸还是常规尺寸
data-theme letter (a-z) 规定可折叠集合的主题颜色

内容

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

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

控件组

带有 data-role="controlgroup" 的 <div> 或 <fieldset> 容器。 组合单个类型（基于链接的按钮、单选按钮、复选框、select 元素）的多个按钮样式的 input。对于组合表单复选框和单选按钮，推荐在带有 data-role="fieldcontain" 的 <div> 内使用 <fieldset> 容器来改进标签样式。

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

对话框

带有 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 规定对话框页面的标题

增强

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

Data-属性 值 描述
data-enhance true | false 如果设置为 "true"（默认），jQuery Mobile 会自动渲染页面，使其更适合于移动设备。如果设置为 "false"，框架将不会渲染页面
data-ajax true | 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-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 规定当父页面显示时工具栏的可见性

翻转拨动开关

一个带有 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) 规定轨道的主题颜色

尾部栏

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

Data-属性 值 描述
data-id sometext 规定唯一 ID。对于持续的尾部栏是必需的
data-position inline | fixed 规定尾部栏是与页面内容内联还是保持固定在底部
data-fullscreen true | false 规定尾部栏是固定在底部还是覆盖在页面内容上（查看范围更大）
data-theme letter (a-z) 规定尾部栏的主题颜色。默认是 "a"

注意：如需启用全屏定位，请使用 data-position="fixed"，然后添加 data-fullscreen 属性到元素上。

头部栏

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

Data-属性 值 描述
data-id sometext 规定唯一 ID。对于持续的头部栏是必需的
data-position inline | fixed 规定头部栏是与页面内容内联还是保持固定在顶部
data-fullscreen true | false 规定头部栏是固定在顶部还是覆盖在页面内容上（查看范围更大）
data-theme letter (a-z) 规定头部栏的主题颜色。默认是 "a"

注意：如需启用全屏定位，请使用 data-position="fixed"，然后添加 data-fullscreen 属性到元素上。

链接

所有的链接，包含那些带有 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 - 用于链接到另一个域。Popup - 打开一个弹出窗口。
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 - 定位弹窗在窗口屏幕的中央。

列表

带有 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 参考手册 规定列表的图标
data-inset true | false 规定列表是否渲染成圆角且带外边距
data-split-icon Icons 参考手册 规定分割按钮的图表。默认是 "arrow-r"
data-split-theme letter (a-z) 规定分割按钮的主题颜色。默认是 "b"
data-theme letter (a-z) 规定列表的主题颜色

列表项

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

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

注意：data-icon 属性只作用于带有链接的列表项。

导航栏

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

Data-属性 值 描述
data-icon Icons 参考手册 规定列表项的图标
data-iconpos left | right | top | bottom | notext 规定图标的位置
导航栏从他们的父容器中继承了主题样本。为导航栏设置 data-theme 属性是不可能的。可以为导航栏中的每个链接单独设置 data-theme 属性。

页面

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

弹窗

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

Data-属性 值 描述
data-corners true | false 规定弹窗是否圆角
data-overlay-theme letter (a-z) 规定弹出框的蒙版（背景）颜色。默认是透明背景（无）
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 页面切换章节。

单选按钮

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

Data-属性 值 描述
data-mini true | false 规定按钮是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮，使元素以 HTML 原生的状态显示
data-theme letter (a-z) 规定单选按钮的主题颜色
如需组合多个单选按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合单选按钮。

选择

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

Data-属性 值 描述
data-icon Icons 参考手册 规定 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 可在一个非原生的选择菜单的 <option> 元素上设置
data-role none 防止 jQuery Mobile 把 select 元素渲染成按钮样式
data-theme letter (a-z) 规定 select 元素的主题颜色
如需组合多个 select 元素，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合 select 元素。

滑动块

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

Data-属性 值 描述
data-highlight true | false 规定滑动轨道是否高亮突出显示
data-mini true | false 规定滑动块是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 渲染滑动块控件为按钮样式
data-theme letter (a-z) 规定滑动块控件（输入框、手柄和轨道）的主题颜色
data-track-theme letter (a-z) 规定滑动块轨道的主题颜色

文本输入框 & 文本输入域

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

Data-属性 值 描述
data-mini true | false 规定输入框是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 把输入框/输入域渲染成按钮样式
data-theme letter (a-z) 规定输入字段的主题颜色

jQuery Mobile Data 属性的更多相关文章

  1. 视图中 jquery 使用data属性

    示例:<input id='username' data-id="{$val['id']}" data-userName="{$val['name']}" ...

  2. JQuery Mobile - input 属性为 number，maxlength不起作用如何解决？

    <input type="text"  maxlength="5" />   效果ok,当 <input type="number& ...

  3. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  4. Jquery Mobile设计Android通讯录第二章

    本文是jQuery Mobile设计Android通讯录系统教程的第二篇,在上一篇教程中(http://publish.itpub.net/a2011/0517/1191/000001191561.s ...

  5. html 5实用特性之data属性

    HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. HTML5 ...

  6. html5的自定义data-＊属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...

  7. jquery中data()和js中dataset属性的区别

    INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...

  8. Jquery mobile div常用属性

    组件 页面 jQuery Mobile 应用了 HTML5 标准的特性,在结构化的页面中完整的页面结构分为 header. content.footer 这三个主要区域. 在 body 中插入内容块: ...

  9. jQuery Mobile panel的相关属性

    参考网站:http://www.lampweb.org/jquerymobile/19/64.html 面板 data-role="panel" 在一个 jQuery Mobile ...

随机推荐

  1. 【原创】TP-LINK +ASUS(Tomato) 双无线路由设置WDS

    主路由: TP-LINK TL-WR2041N 连接Internet,LAN IP地址:192.168.1.1,启用DHCP, 无线配置如下: 开启WDS功能,wireless为副路由的SSID,BS ...

  2. Windows Server 2008 64 位 IIS7.5 ASP.NET MVC4 发布问题

    问题描述: 环境与配置: ASP.NET MVC 4 WINDOWS SERVER 2008 64 位 应用程序池是选择的 .NET 4.0 与经典模式   在新建一个MVC 4 项目发现到服务器上后 ...

  3. nginx做反向代理并防盗链

    nginx做反向代理真的非常简单,只需设置location+proxy_pass即可. 防盗链配置有些复杂,需要注意的地方: 在防盗链的location中需要再设置一下proxy_pass(在这里走了 ...

  4. VS下的Resharper插件报错“Can not resolve symbol”的解决办法

    今天准备写代码的时候,发现代码中大片的红色,就像下面的图片一样.但是编译一下,也可以重新生成,运行也没有问题.于是就看了下svn上是不是有人改了哪里,发现也没有问题.于是又清理了下解决方案,再次生成, ...

  5. 降龙十八掌之一：(亢龙有悔)SQL Server Profiler和数据库引擎优化顾问

    简介 说到Sql的[性能工具]真是强大,SQL Server Profiler的中文意思是SQL Server事件探查,这个到底是做什么用的呢?我们都知道探查的意思大多是和监视有关,其实这个SQL S ...

  6. 基于.NET的Excel开发：单元格区域的操作（读取、赋值、边框和格式）

    引用 using Excel = Microsoft.Office.Interop.Excel; 定义 Excel.ApplicationClass app; Excel.Workbooks book ...

  7. Eclipse连接到My sql数据库的操作总结/配置数据库驱动

    Eclipse连接到MYSQL数据库的操作 (自己亲测,开始学习Eclipse(我的Eclipse版本是4.5.2,Jdbc驱动器的jar包版本是5.1.7,亲测可以使用)连接到数据库的时候,发现网上 ...

  8. How to programmatically new a java class which implements sepecified interface in eclipse plugin development

    http://w3facility.org/question/how-to-programmatically-new-a-java-class-which-implements-sepecified- ...

  9. tcpdump交叉编译及使用

    第一步.下载 官方网站:http://www.tcpdump.org/ 需要下载libpcap包和tcpdump包 我下载的版本是:libpcap-1.4.0.tar.gz和tcpdump-4.4.0 ...

  10. 导出Redis某个列表所有数据的语句

     echo "smembers done:www.huaihua.gov.cn" | redis-cli -h 127.0.0.1  >> /home/dz/fkw.d ...