jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。
jQuery Mobile 可以应用于智能手机与平板电脑。
jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 简介
jQuery Mobile 是一个用于创建移动端web应用的的前端框架。
。。。。。。。。。。。。
什么是 jQuery Mobile?
jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。
jQuery Mobile 工作于所有主流的智能手机和平板电脑上
jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上
http:/ /www.iis7.com/b/wzjk/
jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。
。。。。。。。。。。。。
为什么使用 jQuery Mobile?
通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。
不同设备使用了不同开发语言，jQuery Mobile可以很好的兼容不同的设备或操作系统：
Android 和 Blackberry（黑莓） 使用JAVA语言。
iOS 使用 Objective C 语言
Windows Phone 使用 C# 和 .net, 等。
jQuery Mobile 解决了不同设备兼容的问题，因为它只使用HTML，CSS和 JavaScript，这是所有移动网络浏览器的标准！
。。。。。。。。。。。。
最好的阅读体验
尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。
为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 安装
在你的网页中添加 jQuery Mobile
你可以通过以下几种方式将jQuery Mobile添加到你的网页中：
从 CDN 中加载 jQuery Mobile (推荐)
从jQuerymobile.com 下载 jQuery Mobile库
。。。。。。。。。。。。。。。。
从 CDN 中加载 jQuery Mobile
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。.
使用 jQuery 内核, 你不需要在电脑上安装任何东西; 你仅仅需要在你的网页中加载以下层叠样式 (.css) 和 JavaScript 库 (.js) 就能够使用 jQuery Mobile
jQuery Mobile CDN：
<!-- meta使用viewport以确保页面可自由缩放 -->：<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->：<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 库 -->：<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->：<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
国内用户推荐使用百度CDN：
jQuery Mobile CDN(百度)：
<!-- meta使用viewport以确保页面可自由缩放 -->：<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->：<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 库 -->：<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->：<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
。。。。。。。。。。。。。。。。
下载 jQuery Mobile
如果你想将 jQuery Mobile 放于你的主机中,你可以从 jQuerymobile.com下载该文件。
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
提示： 将下载的文件放置于与网页同一目录下。
你是否想知道为什么在 <script> 标签中 没有插入 type="text/javascript" ?
在 HTML5 已经不需要该属性。 JavaScript 在所有现代浏览器中是 HTML5 的默认脚本语言！
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 页面
尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。
data-role="page" 是在浏览器中显示的页面。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
data-role="footer" 用于创建页面底部工具条。
在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。
jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。
。。。。。。。。。。。。。。
在页面中添加 jQuery Mobile
使用 jQuery Mobile, 你可以在单个 HTML 文件中创建多个不同的页面。
你可以使用不同的href属性来区分使用同一个唯一id的页面
注意： 当web应用有大量的内容（文本，图片，脚本等）将会严重影响加载时间。如果你不想使用内页链接可以使用外部文件
。。。。。。。。。。。。。。
页面作为对话框使用
对话框是用于显示页面信息显示或者表单信息的输入。
在链接中添加data-rel="dialog"让用户点击链接时弹出对话框
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 过渡
jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。
。。。。。。。。。。。。
jQuery Mobile 页面切换效果
jQuery Mobile 提供了各种页面切换到下一个页面的效果。
页面过渡效果可被应用于任何使用 data-transition 属性的链接或表单
页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交
下面的显示了通过使用 data-transition 属性后可用的页面切换：
过渡 描述
fade 默认。淡入到下一页
flip 从后向前翻转到下一页
flow 抛出当前页，进入下一页
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。
在 jQuery Mobile 的所有链接上，默认使用淡入淡出的效果（如果浏览器支持）。
提示：上面的所有效果支持后退行为。例如，如果您想要页面从左向右滑动，而不是从右向左滑动，请使用带有 "reverse" 值的 data-direction 属性。在后退按钮上这是默认的。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 按钮
Mobile 应用程序是建立在您想要显示的简单的点击事物上。
。。。。。。。。。。。
在 jQuery Mobile 中创建按钮
在 jQuery Mobile 中，按钮可通过三种方式创建：
使用 <button> 元素
使用 <input> 元素
使用带有 data-role="button" 的 <a> 元素
在 jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 data-role="button" 的 <a> 元素在页面间进行链接，使用 <input> 或 <button> 元素进行表单提交。
。。。。。。。。。。。
导航按钮
如需通过按钮在页面间进行链接，请使用带有 data-role="button" 属性的 <a> 元素
。。。。。。。。。。。
内联按钮
默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"
。。。。。。。。。。
组合按钮
jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。
请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮
默认情况下，组合按钮是垂直组合，它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。
。。。。。。。。。。
后退按钮
如需创建后退按钮，请使用 data-rel="back" 属性（这会忽略锚的 href 值）
。。。。。。。。。。
更多链接按钮
类 描述
ui-btn-b 修改按钮颜色为黑色，字体为白色(默认为灰色背景，黑色字体)。
ui-corner-all 为按钮添加圆角
ui-mini 制作小按钮
ui-shadow 为按钮添加阴影
如果你需要使用更多的样式，每个样式类使用空格隔开，如： class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 按钮图标
jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。
。。。。。。。。。。。
添加图标到 jQuery Mobile 按钮
我们可以使用 ui-icon 类将图标添加到按钮上，并可以使用指定类来设置按钮位置。
注意： 在其他方式的按钮上，如列表或表单中的按钮需要使用 data-icon 属性。
。。。。。。。。。。。
定位图标
您也可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。
请使用 ui-btn-icon 属性来指定位置
如果你未指定按钮图片的位置，图标将不显示。
。。。。。。。。。。。
只显示图标
如果你只想显示图标，可以使用 "notext"
。。。。。。。。。。。
移除圆圈
默认情况下，所有的图标都有一个灰色的圆圈。如果你不需要它，可以在元素中使用 "ui-nodisc-icon" 类
。。。。。。。。。。。
黑色、白色按钮
默认情况下，所有图标都是白色的。 如果需要改变图标颜色为黑色，可以在元素添加 "ui-alt-icon"
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 弹窗
弹窗是一个非常流行的对话框，弹窗可以覆盖在页面上展示。
弹窗可用于显示一段文本，图片，地图或其他内容。
。。。。。。。。。。。
创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性， <div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id， 然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容。
注意: <div> 弹窗与点击的 <a> 链接必须在同一个页面上。
如果你需要为弹窗添加内边距与外边距可以在 <div> 中添加 "ui-content" 类
。。。。。。。。。。。
关闭弹窗
默认情况下，点击弹窗之外的区域或按下 "Esc" 键即可关闭弹窗。 如果你不想点击弹窗之外的区域关闭弹窗可以在添加上添加 data-dismissible="false" 属性（不推荐）。 你也可以在弹窗上添加关闭按钮，按钮上使用 data-rel="back" 属性，并通过样式来控制按钮的位置。
。。。。。。。。。。。
定位弹窗
默认情况下，弹窗会直接显示在点击元素的上方，如果需要控制弹窗的位置，可以在用于打开弹窗的点击链接上使用 data-position-to 属性。
控制弹窗位置的三种方式：
属性值 描述
data-position-to="window" 弹窗在窗口居中显示
data-position-to="#myId" 弹窗显示在知道的 #id 元素上
data-position-to="origin" 默认。弹窗显示在点击的元素上。
。。。。。。。。。。。
过渡
默认情况下，弹窗是没有过渡效果的。如果你需要你可以通过 data-transition="value" 属性来添加过渡效果
。。。。。。。。。。。
弹窗方向小边框
如果需要添加弹窗方向小边框，可以使用 data-arrow 属性，并指定值 "l" (左边), "t" (顶部), "r" (右边) or "b" (底部):
。。。。。。。。。。。
弹窗对话框
你可以将弹窗制作为一个标准的对话框 (头部, 内容和底部标记)
。。。。。。。。。。。
图片弹窗
你可以在弹窗中显示图片
。。。。。。。。。。。
窗背景覆盖
你可以使用 data-overlay-theme 属性在弹窗后添加背景颜色。
默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景，使用 data-overlay-theme="b" 添加深色的覆盖背景
一般图片弹窗经常使用背景覆盖
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 工具栏
工具栏元素通常位于头部和尾部内 - 让导航易于访问
。。。。。。。
头部栏
头部栏一般包含页面标题/logo 或一两个按钮（通常是首页、选项或搜索）。
您可以添加按钮到头部的左侧或右侧。
头部可以包含一个或两个按钮，而尾部没有限制。
。。。。。。。
尾部栏
尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性，因此可以包含尽可能多的按钮
注意：尾部的样式与头部不同（没有内边距和空间，且按钮不居中）。我们可以使用简单的样式来解决这个问题，style="text-align:center
您还可以将尾部中的按钮进行水平或垂直组合
。。。。。。。
定位头部栏和尾部栏
头部和尾部可以通过三种方式进行定位：
Inline - 默认。头部栏和尾部栏与页面内容内联。
Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。
使用 data-position 属性来定位头部栏和尾部栏
要启用全屏定位，请使用 data-position="fixed"，并添加 data-fullscreen 属性到元素
提示：全屏定位适用于照片、图像和视频。
提示：固定定位和全屏定位中，通过点击屏幕将隐藏和显示头部栏和尾部栏。
在工具栏上只显示图标可以使用 ui-btn-icon-notext 类。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 导航栏
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。
默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。
使用 data-role="navbar" 属性来定义导航栏
默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33.3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过 5 个按钮，将会拆成多行
。。。。。。。。。
导航按钮图标
我们可以使用 data-icon 属性为导航按钮添加图标
。。。。。。。。。
定位图标
就像 "ui-btn-icon-position" 类一样 (图标章节有详细说明), 你可以设置图标显示的位置： top（头部）, right（右侧）, bottom（底部） 或 left（左侧）。
图标位置在导航栏容器上设置，使用 data-iconpos 属性来指定位置：
属性值 描述
data-iconpos="top" 图标顶部对齐
data-iconpos="right" 图标右侧对齐
data-iconpos="bottom" 图标底部对齐
data-iconpos="left" 图标左侧对齐
默认情况， 导航按钮的图标位于文本之上 (data-iconpos="top")。
。。。。。。。。。
激活按钮
当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。
如果想在不点击链接时获得这种外观，请使用 class="ui-btn-active"
对于多个页面，您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点，请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 面板
jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。
通过向指定 id 的 <div> 元素添加 data-role="panel" 属性来创建面板。
在 <div> 中添加 HTML 标记来显示你的面板内容
注意： panel 标记必须置于头部、内容、底部组成的页面之前或之后。
要访问面板，需要创建一个指向面板 <div> id 的链接，点击该链接即可打开面板
。。。。。。。。。。。。
关闭面板
你可以通过点击面板外部区域或按下 Esc 键或滑动来关闭面板。你可以通过使用 data-* 属性来禁用滑动和点击来关闭面板
属性 值 描述
data-dismissible true | false 指定面板是否可以通过点击面板外部区域来关闭。
data-swipe-close true | false 指定是否可以通过滑动来关闭。
你可以使用按钮来关闭面板：仅需要在面板的 <div> 中添加 data-rel="close" 属性。 从性能上考虑，我们需要键关闭链接的 href 属性指向页面的 ID 。
。。。。。。。。。。。。
面板展示
你可以通过使用 data-display 属性来控制面板的展示方式:：
属性值 描述
data-display="overlay" 在内容上显示面板
data-display="push" 是同时"推动"面板和页面。
data-display="reveal" 默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来
。。。。。。。。。。。。
面板定位
默认情况下，面板会显示在屏幕的左侧。如果想让面板出现在屏幕的右侧，可以指定 data-position="right" 属性。
你可以指定面板的内容根据页面滚动而滚动。默认情况下面板是随着页面一起滚动的（但是面板的内容仍然位于页面顶部）。如果你需要实现面板内容固定不随页面滚动而滚动，可以在面板添加 the data-position-fixed="true" 属性
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 可折叠块
可折叠内容块
可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。
如需创建一个可折叠的内容块，需要为容器添加 data-role="collapsible" 属性。在容器（div）内，添加一个标题元素（H1-H6），后跟您想要进行扩展的 HTML 标记
默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用 data-collapsed="false"
。。。。。。。。。。。。。
嵌套可折叠块
可折叠的内容块是可以彼此嵌套的
可折叠的内容块可以根据您的需要进行多次嵌套。
。。。。。。。。。。。。。
可折叠集合
可折叠集合是将可折叠块组合在一起（就像手风琴一样）。当一个新的块被展开时，所有其他的块都会被折叠起来。
创建若干个可折叠的内容块，然后把可折叠内容块用带有 data-role="collapsible-set" 的新容器包围起来
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 表格
响应式表格
响应式设计一般用于适配用户各种移动设备。
我们只需要使用一个简单的类名，jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。
响应式表格让页面内容在移动端和桌面设备上能够很好的适配。
响应式表格有两种类型： reflow(回流) 与 列切换。
。。。。。。。。。。。。
回流表格
回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。
创建表格，在 <table> 元素上添加 data-role="table" 和 "ui-responsive" 类
对于响应式表格，你必须包含 <thead> 和 <tbody> 元素。
不要使用 rowspan 或 colspan 属性; 响应式表格中是不支持这两个属性的。
。。。。。。。。。。。。
列切换
列切换模型会在宽度不够时隐藏数据。
默认情况下，jQuery Mobile 会先隐藏表格右侧的列。但是，你可以在表格头部(<th>)通过添加 data-priority 属性指定隐藏列的顺序，data-priority 的值可以是 1 (最高优先级) 到 6 (最低优先级)
如果你没为列指定优先级，则列会一直存在，不会被隐藏。
我们可以使用 data-column-btn-text 属性来修改切换表格的文本
。。。。。。。。。。。。
表格样式
我们使用 "ui-shadow" 类来为表格添加阴影
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 网格
jQuery Mobile 网格布局
jQuery Mobile 提供了一套基于 CSS 的分列布局。然而，在移动设备上，由于考虑手机的屏幕宽度狭窄，一般不建议使用分栏分列布局。
但有时您想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。
网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。
这里有四种布局网格可供使用：
网格类 列 列宽 对应
ui-grid-solo 1 100% ui-block-a
ui-grid-a 2 50% / 50% ui-block-a|b
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e
在列容器内，子元素拥有的 class 为 ui-block-a|b|c|d|e 取决于列数。列会浮动并排。
实例 1:class 为 ui-grid-a（两列布局），您必须指定 ui-block-a 和 ui-block-b 的两个子元素。
实例 2:class 为 ui-grid-b（三列布局），则必须添加 ui-block-a、ui-block-b 和 ui-block-c 的三个子元素。
。。。。。。。。。。。。。。。
响应式网格
在小屏幕中，不建议一行中并排太多按钮（文本会缩短）。
我们在容器使用 ui-responsive 类来创建响应式网格
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 列表视图
jQuery Mobile 列表视图
jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和 无序(<ul>).
列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role="listview"属性。在每个项目(<li>)中添加链接，用户可以点击它
列表样式的圆角和边缘，使用 data-inset="true" 属性设置
默认情况下，列表项的链接会自动变成一个按钮 (不需要 data-role="button")。
。。。。。。。。。。
列表分隔
列表项也可以转化为列表分割项，用来组织列表，使列表项成组。
指定列表分割，给列表项<li>元素添加 data-role="list-divider" 属性即可
如果你有一个字母顺序排列的列表，（例如一个电话簿）通过 <ol> 或者<ul> 元素的 data-autodividers="true" 属性设置可以配置为自动生成的项目的分隔
data-autodividers="true" 可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 列表内容
。。。。。。。。。。。。
jQuery Mobile 列表图标
默认情况下每个列表项都会包含一个箭头图标 "carat-r" (右箭头)。如果要修改这个图标可以使用 data-icon 属性
data-icon="false" 将会移除图标。
。。。。。。。。。。。。
16x16 图标
如果你想在你的列表添加标准的 16x16px 的图标, 可以在列表项中添加 <img> 元素，并使用 "ui-li-icon" 类
。。。。。。。。。。。。
jQuery Mobile 列表缩略图
大于 16x16px 的图像，请在链接中添加 <img> 元素。
jQuery Mobile 将自动缩放图像到 80x80px:
。。。。。。。。。。。。
jQuery Mobile 列表图标
在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 图标
。。。。。。。。。。。。
分割按钮
在JQuery Mobile的列表中，有时需要对选项内容做两个不同的操作，这时，需要对选项中的链接按钮进行分割。实现分割的方法是在<li>元素中再增加一个<a>元素，便可以在页面实现分割效果。
jQuery Mobile 会自动设置第二个链接为蓝色箭头的图标，图标的链接文字（如果有的话）将在用户将鼠标悬停在 图标时显示
。。。。。。。。。。。。
气泡数字
气泡数字是用来显示列表项相关的数字，如在一个邮箱的邮件
如需添加气泡数字，请使用行内元素，比如 <span>，设置 class "ui-li-count" 属性并添加数字
注意：显示一个正确的气泡数字，必须修改编程方式。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 过滤
。。。。。。。。。。
可过滤元素
所有的元素如果有一个或更多的子元素均可过滤。
如何创建搜索字段：
你想过滤的元素必须使用 data-filter="true" 属性。
创建 <input> 元素并指定 id，元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。将 <input> 元素放置于一个表单中，表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。
接着为过滤的元素添加 data-input 属性。该值需要是 <input> 元素的 id。
提示: 可以在搜索字段中使用 placeholder 属性来设置提示信息
。。。。。。。。。。
自定义过滤
一般的插入到各个列表项的文本就是作为过滤的文本使用(如 A 对应 "Adele" 或 "B" 对应 "Billy")。 但是，如果你想指定自定义的过滤的文本，你需要在子元素中使用 data-filtertext 属性
如果你在元素中使用了 data-filtertext 属性，元素的源文本内容在过滤时将被忽略， 这时你如果还要查找列表项"Adele"，需要使用的关键字为：f, a, v 或 fav。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 表单
jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。
。。。。。。。。。。
jQuery Mobile 表单结构
jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式，让它们更具吸引力，更易于使用。
在 jQuery Mobile 中，您可以使用下列表单控件：
文本输入框
搜索输入框
单选按钮
复选框
选择菜单
滑动条
翻转拨动开关
当使用 jQuery Mobile 表单时，您应当知道：
<form> 元素必须有一个 method 和一个 action 属性
每个表单元素必须有一个唯一的 "id" 属性。id 必须是整个站点所有页面上唯一的。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被呈现
每个表单元素必须有一个标签。设置标签的 for 属性来匹配元素的 id
如需隐藏标签，请使用 class ui-hidden-accessible。这在您把元素的 placeholder 属性作为标签时经常用到
提示： 我们可以使用 data-clear-btn="true" 属性来添加清除输入框内容的按钮 (一个在输入框右侧的 X 图标)
清除输入框的按钮可以在 <input> 元素中使用，但不能在 <textarea> 中使用。 搜索框中 data-clear-btn 默认值为 "true" ，你可以使用 data-clear-btn="false" 移除该图标。
。。。。。。。。。。。
jQuery Mobile 表单图标
表单中的按钮代码是标准的 HTML <input> 元素 (button, reset(重置), submit)。他们会自动渲染样式，可以自动适配移动设备与桌面设备
如果需要在 <input> 按钮中添加额外的样式，可以使用下表中的 data-* 属性：
属性 值 描述
data-corners true | false 指定按钮是否有圆角
data-icon 图标参考手册 指定按钮图标
data-iconpos left | right | top | bottom | notext 指定图标位置
data-inline true | false 指定是否内联按钮
data-mini true | false 指定是否为迷你按钮
data-shadow true | false 指定按钮是否添加阴影效果
。。。。。。。。。。。。
字段容器
如需让标签和表单元素看起来更适应宽屏，请用带有 "ui-field-contain" 类的 <div> 或 <fieldset> 元素包围 label/form 元素
ui-field-contain 类基于页面的宽度为标签和表单控件添加样式。当页面的宽度大于 480px 时，它会自动把标签放置在与表单控件同一线上。当页面的宽度小于 480px 时，标签会被放置在表单元素的上面。
提示：为了防止 jQuery Mobile 为可点击元素自动添加样式，请使用 data-role="none" 属性
。。。。。。。。。。。。
jQuery Mobile 中的表单提交
jQuery Mobile 通过 AJAX 自动处理表单提交，并将试图集成服务器响应到应用程序的 DOM 中。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 表单输入元素
jQuery Mobile 文本输入框
输入字段是通过标准的 HTML 元素编码的，jQuery Mobile 将为它们添加样式使其看起来更具吸引力，在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型
提示：请使用 placeholder 来指定一个简短的描述，用来描述输入字段的期望值
。。。。。。。。。。。。
文本域
对于多行文本输入可使用 <textarea> 。
注意：当您键入一些文本时，文本域会自动调整大小以适应新增加的行。
。。。。。。。。。。。。
搜索输入框
type="search" 类型的输入框是在 HTML5 中新增的，它是为输入搜索定义文本字段
。。。。。。。。。。。。
单选按钮
当用户在有限数量的选择中仅选取一个选项时，使用单选按钮。
为了创建一系列单选按钮，请添加带有 type="radio" 的 input 以及相应的 label。把单选按钮包围在 <fieldset> 元素内。您也可以添加一个 <legend> 元素来定义 <fieldset> 的标题。
提示：请使用 data-role="controlgroup" 来把按钮组合在一起
。。。。。。。。。。。。
复选框
当用户在有限数量的选择中选取一个或多个选项时，使用复选框
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 表单选择菜单
<select> 元素创建带有若干选项的下拉列表。
<select> 元素内的 <option> 元素定义了列表中的可用选项
示：如果您有一个带有相关选项的很长的列表，请在 <select> 内使用 <optgroup> 元素
。。。。。。。。。。。。
自定义选择菜单
本页顶部的图像，演示了移动平台上如何使用它们的方式展示一个选择菜单。
如果您想要让选择菜单在所有的移动设备上都显示相同，请使用 jQuery 自带的自定义选择菜单，data-native-menu="false" 属性
。。。。。。。。。。。。
多个选择
如需在选择菜单中选择多个选项，请在 <select> 元素中使用 multiple 属性
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 表单滑动条
。。。。。。。。。。。。。
jQuery Mobile 滑动条控件
滑动条允许您从一个范围的数字中选择一个值：
如需创建滑动条，请使用 <input type="range">
使用以下属性来规定限制：
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
提示: 如果你想在按钮中显示进度的值可以添加 data-show-value="true" 属性
提示：如果您想要高亮突出显示滑动条的值，请添加 data-highlight="true"
。。。。。。。。。。
拨动开关
拨动开关通常用于 on/off 或 true/false 按钮
我们可以使用 <input type="checkbox"> 元素并指定 data-role 为 "flipswitch" 来创建开关
默认情况下，开关切换的文本为 "On" 和 "Off"。你可以使用 data-on-text 和 data-off-text 属性来修改它
提示:开关复选框可以使用 "checked" 属性来设置默认的选项
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 主题
jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。
通过设置元素的data-theme属性可以自定义应用的外观
值 描述
a 页面为灰色背景黑色文字
头部与底部均为灰色背景黑色文字
按钮为灰色背景黑色文字
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色，value 值为黑色
b 页面为黑色背景白色文字
头部与底部均为黑色背景白色文字
按钮为白色文字木炭背景
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色，value 值为白色
按钮样式使用 class="ui-btn",使用 "ui-btn-a|b" 类设置按钮为灰色（默认）或黑色
"a" 主题的样式用于大多数元素，子元素通常继承父元素的样式。
。。。。。。。。。。
主题头部和底部，大多为黑色。
。。。。。。。。。。
主题对话框的头部底部，大多为浅灰色。
。。。。。。。。。。
主题按钮，大多为黑色。
。。。。。。。。。。
主题图标，大多为黑色。
。。。。。。。。。。
主题弹窗，大多为黑色。
。。。。。。。。。。
头部和底部的主题按钮，大多为黑色。
。。。。。。。。。。
主题导航栏，大多为黑色。
。。。。。。。。。。
主题面板，大多为黑色。
。。。。。。。。。。
主题可折叠按钮和内容，大多为黑色。
。。。。。。。。。。
主题列表，大多为黑色。
。。。。。。。。。。
主题分割按钮。大多为黑色。
。。。。。。。。。。
主题可折叠列表，大多为黑色。
。。。。。。。。。。
主题表单，大多为黑色。
。。。。。。。。。。
主题可折叠表单，大多为黑色。
。。。。。。。。。。
添加新主题
jQuery Mobile 可以在移动页面添加新主题。
通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（c-z）,并在样式中添加你喜欢的颜色和字体。
你也可以在 HTML 文档中添加主题的新样式， 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) ,页面添加类：ui-page-theme-(a-z) 。
在之前的 jQuery Mobile 版本中, 使用 JavaScript 来为元素继承父主题样式。到了 1.4 版本后，框架更注重性能上的提升，已不再使用 JavaScript 来继承，而是使用纯 CSS。
jQuery Mobile 团队为此已经创建了一个工具，地址为 ThemeRoller。你可以使用该工具来升级旧的主题，使其兼容新的版本。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 事件
事件 = 所有不同访问者访问页面的响应动作。
。。。。。。。。。。。。。。。。
jQuery Mobile 事件
在jQuery Mobile你可以使用任何标准的 jQuery 事件 。
除此之外, jQuery Mobile 也提供了针对移动端浏览器的事件：
触摸事件 - 当用户触摸屏幕时触发
滑动事件 - 当用户上下滑动时触发
定位事件 - 当设备水平或垂直翻转时触发
页面事件 - 当页面显示，隐藏，创建，加载或未加载时触发
。。。。。。。。。。。。。。。。
初始化 jQuery Mobile 事件
在学习jQuery时我们学到了用$(document).ready()来使你的jQuery代码脚本在DOM元素加载完成后才开始执行
但是，在 jQuery Mobile 中, 使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行，所以要在任何新页面加载并创建是执行脚本，就需要绑定pageinit事件。
第二个参数 ("#pageone")为指定事件的页面id
注意： jQuery on() 方法用于绑定事件到选中的元素上。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 触摸事件
触摸事件在用户触摸屏幕（页面）时触发。
触摸事件同样可应用与桌面电脑上：点击或者滑动鼠标！
。。。。。。。。。。。。。。
jQuery Mobile 点击
点击事件在用户点击元素时触发。(tap)
。。。。。。。。。。。。。。
jQuery Mobile 点击不放（长按）
点击不放（长按） 事件在点击并不放（大约一秒）后触发。(taphold)
。。。。。。。。。。。。。。
jQuery Mobile 滑动
滑动事件是在用户一秒内水平拖拽大于30PX，或者纵向拖曳小于20px的事件发生时触发的事件。(swipe)
。。。。。。。。。。。。。。
jQuery Mobile 向左滑动
向左滑动事件在用户向左拖动元素大于30px时触发。(swipeleft)
。。。。。。。。。。。。。。
jQuery Mobile 向右滑动
向右滑动事件在用户向右拖动元素大于30px时触发。(swiperight)
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 滚屏事件
jQuery Mobile 提供了两种滚屏事件：滚屏开始时触发和滚动结束时触发。
。。。。。。。。。。。。。。
jQuery Mobile 滚屏开始（Scrollstart）
scrollstart 事件是在用户开始滚动页面时触发
注意：iOS 设备在滚屏时锁定 DOM 操作，这意味着当用户滚屏时不可能改变任何东西。然而，jQuery 团队正在为此寻找解决方案。
。。。。。。。。。。。。。。
jQuery Mobile 滚屏结束（Scrollstop）
scrollstop 事件是在用户停止滚动页面时触发
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 方向改变事件
jQuery Mobile 方向改变（orientationchange）事件
当用户垂直或水平旋转移动设备时，触发方向改变（orientationchange）事件。
如需使用方向改变（orientationchange）事件，请附加它到 window 对象
回调函数可有一个参数，event 对象，返回移动设备的方向："纵向"（设备保持在垂直位置）或"横向"（设备保持在水平位置）
由于方向改变（orientationchange）事件绑定到 window 对象，我们可以使用 window.orientation 属性来设置不同的样式，以便区分纵向和横向的视图
window.orientation 属性针对纵向视图返回 0，针对横向视图返回 90 或 -90。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile Data 属性
jQuery Data 属性
jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。
在下面的参考中，*号显示的值为默认值。
。。。。
按钮
在1.4 版本以后已废弃。使用 CSS 类 替代。带有 data-role="button" 的超链接。button 元素、工具栏中的链接以及 input 字段都会自动渲染成按钮样式，不需要添加 data-role="button"。
Data-属性 值 描述
data-corners true* | false 规定按钮是否圆角
data-icon 图标参考手册 规定按钮的图标。默认没有图标。
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 字母 (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 字母 (a-z) 规定复选框的主题颜色
如需组合多个复选框，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合复选框。
。。。
可折叠块
在带有 data-role="collapsible" 的容器内部的后跟任意 HTML 标记的标题元素。
Data-属性 值 描述
data-collapsed true* | false 规定内容是折叠还是展开
data-collapsed-icon 图标参考手册 规定可折叠按钮的图标。默认是 "plus"
data-content-theme 字母 (a-z) 规定可折叠内容的主题颜色。是否为可折叠内容添加圆角
data-expanded-icon 图标参考手册 规定当内容展开时可折叠按钮的图标。默认是 "minus"
data-iconpos left* | right | top | bottom 规定图标的位置
data-inset true* | false 规定可折叠按钮是否渲染成圆角且带外边距
data-mini true | false* 规定可折叠按钮是小尺寸还是常规尺寸
data-theme 字母 (a-z) 规定可折叠按钮的主题颜色
。。。
可折叠集合
在带有 data-role="collapsible-set" 的容器内部的可折叠内容块。
Data-属性 值 描述
data-collapsed-icon 图标参考手册 规定可折叠按钮的图标。默认是 "plus"
data-content-theme 字母 (a-z) 规定可折叠按钮的主题颜色
data-expanded-icon 图标参考手册 规定当内容展开时可折叠按钮的图标。默认是 "minus"
data-iconpos left* | right | top | bottom | notext 规定图标的位置
data-inset true* | false 规定可折叠块是否渲染成圆角且带外边距
data-mini true | false* 规定可折叠按钮是小尺寸还是常规尺寸
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-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 字母 (a-z) 规定对话框页面的蒙版（背景）颜色
data-theme 字母 (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" 容器内的任何链接或表单元素将会被框架的导航功能忽略。
。。。
域容器
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-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 字母 (a-z) 规定拨动开关的主题颜色
data-track-theme 字母 (a-z) 规定轨道的主题颜色
。。。
尾部栏
带有 data-role="footer" 的容器。
Data-属性 值 描述
data-id sometext 规定唯一 ID。对于持续的尾部栏是必需的
data-position inline* | fixed 规定尾部栏是与页面内容内联还是保持固定在底部
data-fullscreen true | false* 规定尾部栏是固定在底部还是覆盖在页面内容上（查看范围更大）
data-theme 字母 (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 字母 (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 字母 (a-z) 规定计数气泡的主题颜色。
data-divider-theme 字母 (a-z) 规定列表分隔的主题颜色。
data-filter true | false* 规定是否在列表中添加搜索框
data-filter-placeholder sometext 1.4 版本后废弃。使用 HTML placeholder 属性替代。规定搜索框内的文本。默认是 "Filter items..."
data-filter-theme 字母 (a-z) 规定搜索过滤的主题颜色。
data-icon 图标参考手册 规定列表的图标
data-inset true | false* 规定列表是否渲染成圆角且带外边距
data-split-icon 图标参考手册 规定分割按钮的图表。默认是 "arrow-r"
data-split-theme 字母 (a-z) 规定分割按钮的主题颜色。
data-theme 字母 (a-z) 规定列表的主题颜色
。。。
列表项
带有 data-role="listview" 的 <ol> 或 <ul> 内的 <li>。
Data-属性 值 描述
data-filtertext sometext 规定当过滤元素时要搜索的文本。该文本将会被过滤，而不是实际的列表项文本
data-icon 图标参考手册 规定列表项图标
data-role list-divider 规定列表项的分隔
data-theme 字母 (a-z) 规定列表项的主题颜色
注意：data-icon 属性只作用于带有链接的列表项。
。。。
导航栏
带有 data-role="navbar" 容器内部的 <li> 元素。
Data-属性 值 描述
data-icon 图标参考手册 规定列表项的图标
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 字母 (a-z) 规定后退按钮的主题颜色
data-close-btn-text 字母 (a-z) 规定对话框上关闭按钮的一些文本
data-dom-cache true | false* 规定是否清除各个页面的 jQuery DOM 缓存（如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试）
data-overlay-theme 字母 (a-z) 规定对话框页面的蒙版（背景）颜色
data-theme 字母 (a-z) 规定页面的主题颜色。
data-title sometext 规定页面标题
data-url url 更新 URL 的值，而不是用于请求页面的 URL
。。。
弹窗
带有 data-role="popup" 的容器。
Data-属性 值 描述
data-corners true* | false 规定弹窗是否圆角
data-overlay-theme 字母 (a-z) 规定弹出框的蒙版（背景）颜色。默认是透明背景（无）
data-shadow true* | false 规定弹出框是否有阴影
data-theme 字母 (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 字母 (a-z) 规定单选按钮的主题颜色
如需组合多个单选按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合单选按钮。
。。。
选择
所有的 <select> 元素。这些会被自动渲染成按钮样式，date-role 是不必需的。
Data-属性 值 描述
data-icon 图标参考手册 规定 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 字母 (a-z) 规定 jQuery 自带的自定义的选择菜单的主题颜色（与 data-native-menu="false" 一起使用）
data-placeholder true | false* 可在一个非原生的选择菜单的 <option> 元素上设置
data-role none 防止 jQuery Mobile 把 select 元素渲染成按钮样式
data-theme 字母 (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 字母 (a-z) 规定滑动块控件（输入框、手柄和轨道）的主题颜色
data-track-theme 字母 (a-z) 规定滑动块轨道的主题颜色
。。。
文本输入框 & 文本输入域
带有 type="text|search|etc." 的 input 或 textarea 元素。这些会被自动渲染成按钮样式，date-role 是不必需的。
Data-属性 值 描述
data-mini true | false* 规定输入框是小尺寸还是常规尺寸
data-role none 防止 jQuery Mobile 把输入框/输入域渲染成按钮样式
data-theme 字母 (a-z) 规定输入字段的主题颜色
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jQuery Mobile 图标
我们可以使用图标类在 jQuery Mobile 中 <a> 和 <button> 元素上添加图标，并对图标进行定位
在 <input> 按钮中添加图标，可以使用 data-icon 属性
我们可以使用 data-icon 属性在导航按钮上添加图标
如果要在列表按钮中添加图标，可以在 <li> 中使用 data-icon 属性
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/31552074/viewspace-2215133/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/31552074/viewspace-2215133/
4385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
