CSS3

实例

检查 event.stopImmediatePropagation() 是否被调用：

$("div").click(function(event){
event.stopImmediatePropagation();
alert(event.isImmediatePropagationStopped());
});

定义和用法

该方法检查指定的事件上是否调用了 event.stopImmediatePropagation() 方法。

如果 event.stopImmediatePropagation() 被调用则该方法返回 true，否则返回 false。

语法

event.isImmediatePropagationStopped()

参数	描述
event	必需。event 参数来自事件绑定函数。

jQuery [attribute^=value] 选择器

实例

选取所有带有以 "nation" 开头的 name 属性的 <input> 元素：

$("input[name^='nation']")

定义和用法

[attribute^=value] 选择器选取每个带有指定属性且以指定字符串开头的元素。

语法

$("[attribute^='value']")

参数	描述
attribute	必需。规定要查找的属性。
value	必需。规定属性值以其开头的字符串。

jQuery Mobile 简介

jQuery Mobile 是一个用于创建移动端web应用的的前端框架。

学习本教程前你需要先了解

在开始学习 jQuery Mobile 前, 你应该了解一下基础知识：

如果你想学习这些知识，你可以访问本站的首页。

什么是 jQuery Mobile?

jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。

jQuery Mobile 工作与所有主流的智能手机和平板电脑上：

jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上，如果您了解 jQuery，您可以很容易的学习 jQuery Mobile。

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 核心库一样，您不需要在您的开发计算机上安装任何东西；只需将各种 .js 和 .css 文件直接包含到您的 web 页面中即可。这样，您就可以随时的使用 JQM 的功能。

最好的阅读体验

尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。

为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。

jQuery Mobile 安装

在开始使用 jQuery Mobile 前，您需要先安装它，本节教您如何正确安装 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:

下载 jQuery Mobile

如果你想将 jQuery Mobile 放于你的主机中,你可以从 jQuerymobile.com下载该文件。

提示： 将下载的文件放置于与网页同一目录下。

	你是否想知道为什么在 <script> 标签中没有插入 type="text/javascript" ? 在 HTML5 已经不需要该属性。 JavaScript 在所有现代浏览器中是 HTML5 的默认脚本语言！

jQuery Mobile 页面

开始学习 jQuery Mobile

	尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。

实例

<body>
<div data-role="page">

<div data-role="header">
    <h1>欢迎来到我的主页</h1>
</div>

<div data-role="content">
    <p>我现在是一个移动端开发者!!</p>
</div>

<div data-role="footer">
    <h1>底部文本</h1>
</div>

</div>
</body>

实例解析：

data-role="page" 是在浏览器中显示的页面。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-role="content" 定义了页面的内容，比如文本，图片，表单，按钮等。
data-role="footer" 用于创建页面底部工具条。
在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。

	jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。

在页面中添加 jQuery Mobile

使用 jQuery Mobile, 你可以在单个 HTML 文件中创建多个不同的页面。

你可以使用不同的href属性来区分使用同一个唯一id的页面：

实例

注意： 当web应用有大量的内容（文本，图片，脚本等）将会严重影响加载时间。如果你不想使用内页链接可以使用外部文件：

<a href="externalfile.html">访问外部文件</a>

页面作为对话框使用

对话框是用于显示页面信息显示或者表单信息的输入。

在链接中添加data-rel="dialog"让用户点击链接时弹出对话框:

实例

jQuery Mobile 按钮

Mobile 应用程序是建立在您想要显示的简单的点击事物上。

在 jQuery Mobile 中创建按钮

在 jQuery Mobile 中，按钮可通过三种方式创建：

使用 <button> 元素
使用 <input> 元素
使用带有 data-role="button" 的 <a> 元素

<button>

<input>

<a>

	在 jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 data-role="button" 的 <a> 元素在页面间进行链接，使用 <input> 或 <button> 元素进行表单提交。

导航按钮

如需通过按钮在页面间进行链接，请使用带有 data-role="button" 属性的 <a> 元素：

实例

<a href="#pagetwo" data-role="button">访问第二个页面</a>

内联按钮

默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"：

实例

<a href="#pagetwo" data-role="button" data-inline="true">访问第二个页面</a>

组合按钮

jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。

请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮：

实例

	默认情况下，组合按钮是垂直组合，它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。

后退按钮

如需创建后退按钮，请使用 data-rel="back" 属性（这会忽略锚的 href 值）：

实例

	您也可以自动添加后退按钮，请使用：data-add-back-btn=”true”。

属性	值	描述	实例
data-corners	true \| false	规定按钮是否圆角	尝试一下
data-mini	true \| false	规定按钮是否更小	尝试一下
data-shadow	true \| false	规定按钮是否有阴影	尝试一下

jQuery Mobile 按钮图标

jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。使用这些图标，您可以很明确的知道该按钮的作用。

添加图标到 jQuery Mobile 按钮

如需添加图标到您的按钮，请使用 data-icon 属性：

<a href="#anylink" data-role="button" data-icon="search">Search</a>

提示：您也可以在 <button> 或 <input> 元素上使用 data-icon 属性。

下面我们列出一些 jQuery Mobile 提供的可用图标：

属性值	描述	实例
data-icon="arrow-l"	左箭头	尝试一下
data-icon="arrow-r"	右箭头	尝试一下
data-icon="delete"	删除	尝试一下
data-icon="info"	信息	尝试一下
data-icon="home"	首页	尝试一下
data-icon="back"	后退	尝试一下
data-icon="search"	搜索	尝试一下
data-icon="grid"	网格	尝试一下

如需查看所有 jQuery Mobile 按钮图标的完整参考手册，请访问我们的 jQuery Mobile 图标参考手册。

定位图标

您也可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。

请使用 data-iconpos 属性来指定位置：

图标的位置：

	默认情况下，所有的按钮图标被放置到左侧。

只显示图标

如果只想显示图标，请设置 data-iconpos 为 "notext"：

后退：

移除圆圈

你会发现，在默认情况下，所有的jQuery Mobile按钮图标都有一个灰色的圆圈。你可以使用 "ui-nodisc-icon" 类将它移除：

jQuery Mobile 工具栏

工具栏元素通常位于头部和尾部内 - 让导航易于访问：

头部栏

头部栏一般包含页面标题/logo 或一两个按钮（通常是首页、选项或搜索）。

您可以添加按钮到头部的左侧或右侧。

下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧：

实例

<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button">搜索</a>
</div>

下面的代码，将添加一个按钮到头部标题文本的左侧：

<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
</div>

但是，如果您把按钮链接放置在 <h1> 元素之后，将无法显示右侧的文本。要添加一个按钮到头部标题的右侧，请指定 class 为 "ui-btn-right"：

实例

<div data-role="header">
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>

	头部可以包含一个或两个按钮，而尾部没有限制。

尾部栏

尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性，因此可以包含尽可能多的按钮：

实例

<div data-role="footer">
<a href="#" data-role="button">在 Facebook上关注我</a>
<a href="#" data-role="button">在Twitter上关注我</a>
<a href="#" data-role="button">在Instagram上关注我</a>
</div>

注意：尾部的样式与头部不同（没有内边距和空间，且按钮不居中）。为了解决这个问题，请把 "ui-btn" 放置在尾部的 class 上：

实例

您还可以将尾部中的按钮进行水平或垂直组合：

实例

<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="plus">在Facebook上关注我</a>
<a href="#" data-role="button" data-icon="plus">在Twitter上关注我</a>
<a href="#" data-role="button" data-icon="plus">在Instagram上关注我</a>
</div>
</div>

定位头部栏和尾部栏

头部和尾部可以通过三种方式进行定位：

Inline - 默认。头部栏和尾部栏与页面内容内联。
Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。

使用 data-position 属性来定位头部栏和尾部栏：

Inline 定位（默认）

Fixed 定位

要启用全屏定位，请使用 data-position="fixed"，并添加 data-fullscreen 属性到元素：

Fullscreen 定位

提示：全屏定位适用于照片、图像和视频。

提示：固定定位和全屏定位中，通过点击屏幕将隐藏和显示头部栏和尾部栏。

jQuery Mobile 导航栏

通过导航栏你可以快速到达指定位置，jQuery Mobile将导航栏部分的代码放在了data-role 为 header 的 div 中。

jQuery Mobile 导航栏

导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。

默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。

使用 data-role="navbar" 属性来定义导航栏：

实例

	默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33,3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过 5 个按钮，将会拆成多行（查看"更多实例"）。

激活按钮

当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。

如果想在不点击链接时获得这种外观，请使用 class="ui-btn-active"：

实例

对于多个页面，您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点，请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class：

实例

jQuery Mobile 可折叠块

通过使用jQuery Mobile可折叠块，你可以控制是否将内容显示或者隐藏。

可折叠内容块

可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。

如需创建一个可折叠的内容块，需要为容器添加 data-role="collapsible" 属性。在容器（div）内，添加一个标题元素（H1-H6），后跟您想要进行扩展的 HTML 标记：

实例

<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是可折叠的内容。</p>
</div>

默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用 data-collapsed="false"：

实例

<div data-role="collapsible" data-collapsed="false">
<h1>点击我 - 我可以折叠!</h1>
<p>I'm 现在我默认是展开的。</p>
</div>

嵌套可折叠块

可折叠的内容块是可以彼此嵌套的：

实例

<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible">
<h1>点击我 - 我是嵌套的可折叠块！</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>

	可折叠的内容块可以根据您的需要进行多次嵌套。

可折叠集合

可折叠集合是将可折叠块组合在一起（就像手风琴一样）。当一个新的块被展开时，所有其他的块都会被折叠起来。

创建若干个可折叠的内容块，然后把可折叠内容块用带有 data-role="collapsible-set" 的新容器包围起来：

实例

<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
</div>
</div>

jQuery Mobile 网格

JQuery Mobile 提供的 CSS 样式 ui-grid 可以实现内容的网格布局。

jQuery Mobile 布局网格

jQuery Mobile 提供了一套基于 CSS 的分列布局。然而，在移动设备上，由于考虑手机的屏幕宽度狭窄，一般不建议使用分栏分列布局。

但有时您想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。

网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。

这里有四种布局网格可供使用：

网格类	列	列宽	对应	实例
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 的三个子元素。

自定义网格

通过使用CSS，您可以自定义列块：

实例

您也可以通过使用内嵌样式来自定义块：

多行

在列中也可以有多个行。

注意：ui-block-a-class 总是创建一个新行：

实例

响应式网格

在小屏幕中，不建议一行中并排太多按钮（文本会缩短）。

我们在容器使用 ui-responsive 类来创建响应式网格：

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" 属性设置可以配置为自动生成的项目的分隔:

实例

<ul data-role="listview" data-autodividers="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
...
</ul>

	data-autodividers="true" 可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。

搜索过滤

jquery Mobile提供一个非常简单的方法，实现客户端搜索功能，筛选列表的选项。只需添加 data-filter="true" 属性即可:

实例

默认情况下，搜索输入框默认的字符为 "Filter items..."。

通过设置mobileinit事件的绑定程序或者给 $.mobile.listview.prototype.options.filterPlaceholder 选项设置一个字符串，或者给列表设置 data-filter-placeholder 属性，可以设置搜索输入框的默认字符:

实例

jQuery Mobile 列表缩略图

默认情况下每个jQuery Mobile列表项都会包含一个向右的箭头图标。

大于 16x16px 的图像，请在链接中添加 <img> 元素。

jQuery Mobile 将自动缩放图像到 80x80px:

实例

使用标准的HTML添加列表信息：

实例

<ul data-role="listview">
<li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
    </a>
</li>
</ul>

jQuery Mobile 列表图标

在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 图标：

实例

分割按钮

在JQuery Mobile的列表中，有时需要对选项内容做两个不同的操作，这时，需要对选项中的链接按钮进行分割。实现分割的方法是在<li>元素中再增加一个<a>元素，便可以在页面实现分割效果。

jQuery Mobile 会自动设置第二个链接为蓝色箭头的图标，图标的链接文字（如果有的话）将在用户将鼠标悬停在图标时显示:

实例

添加一些页面和对话框使链接功能更加丰富：

实例

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>

气泡数字

气泡数字是用来显示列表项相关的数字，如在一个邮箱的邮件：

如需添加气泡数字，请使用行内元素，比如 <span>，设置 class "ui-li-count" 属性并添加数字：

实例

<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
<li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
<li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

注意：显示一个正确的气泡数字，必须修改编程方式。这将在以后的章节解释。

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 属性作为标签时经常用到：

实例

Field 容器

如需让标签和表单元素看起来更适应宽屏，请用带有 data-role="fieldcontain" 属性的 <div> 或 <fieldset> 元素包围 label/form 元素：

实例

	fieldcontain 属性基于页面的宽度为标签和表单控件添加样式。当页面的宽度大于 480px 时，它会自动把标签放置在与表单控件同一线上。当页面的宽度小于 480px 时，标签会被放置在表单元素的上面。

提示：为了防止 jQuery Mobile 为可点击元素自动添加样式，请使用 data-role="none" 属性：

实例

	jQuery Mobile 中的表单提交 jQuery Mobile 通过 AJAX 自动处理表单提交，并将试图集成服务器响应到应用程序的 DOM 中。

jQuery Mobile 表单输入元素

jQuery Mobile 表单输入元素可以让使用HTML标记的文本输入框和文本输入域变得更加的美观。

jQuery Mobile 文本输入框

输入字段是通过标准的 HTML 元素编码的，jQuery Mobile 将为它们添加样式使其看起来更具吸引力，在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型：

实例

提示：请使用 placeholder 来指定一个简短的描述，用来描述输入字段的期望值：

文本域

对于多行文本输入可使用 <textarea> 。

注意：当您键入一些文本时，文本域会自动调整大小以适应新增加的行。

实例

搜索输入框

type="search" 类型的输入框是在 HTML5 中新增的，它是为输入搜索定义文本字段：

实例

单选按钮

当用户在有限数量的选择中仅选取一个选项时，使用单选按钮。

为了创建一系列单选按钮，请添加带有 type="radio" 的 input 以及相应的 label。把单选按钮包围在 <fieldset> 元素内。您也可以添加一个 <legend> 元素来定义 <fieldset> 的标题。

提示：请使用 data-role="controlgroup" 来把按钮组合在一起：

实例

<form method="post" action="demo_form.php">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
</form>

复选框

当用户在有限数量的选择中选取一个或多个选项时，使用复选框：

实例

<form method="post" action="demo_form.php">
<fieldset data-role="controlgroup">
<legend>Choose as many favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>

实例

您也可以用一个 field 容器包围 <fieldset>：

实例

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>

如果您想要您的按钮中的一个预先选中，请使用 HTML 中 <input> 的 checked 属性：

实例

HTML 教程：HTML 表单

jQuery Mobile 表单选择菜单

jQuery Mobile 选择菜单

Iphone 上的选择菜单：

Android/SGS4 设备上的选择菜单：

<select> 元素创建带有若干选项的下拉列表。

<select> 元素内的 <option> 元素定义了列表中的可用选项：

实例

<form method="post" action="demoform.html">
<fieldset data-role="fieldcontain">
<label for="day">Select Day</label>
<select name="day" id="day">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
</select>
</fieldset>
</form>

提示：如果您有一个带有相关选项的很长的列表，请在 <select> 内使用 <optgroup> 元素：

实例

<select name="day" id="day">
<optgroup label="Weekdays">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
</optgroup>
<optgroup label="Weekends">
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</optgroup>
</select>

自定义选择菜单

本页顶部的图像，演示了移动平台上如何使用它们的方式展示一个选择菜单。

如果您想要让选择菜单在所有的移动设备上都显示相同，请使用 jQuery 自带的自定义选择菜单，data-native-menu="false" 属性：

实例

多个选择

如需在选择菜单中选择多个选项，请在 <select> 元素中使用 multiple 属性：

实例

jQuery Mobile 表单滑动条

jQuery Mobile表单滑动条可以用来控制进度。

jQuery Mobile 滑动条控件

滑动条允许您从一个范围的数字中选择一个值：

如需创建滑动条，请使用 <input type="range">：

实例

<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</div>
</form>

使用以下属性来规定限制：

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

提示：如果您想要高亮突出显示滑动条的值，请添加 data-highlight="true"：

实例

拨动开关

波动开关通常用于 on/off 或 true/false 按钮：

如需创建一个开关，请把 <select> 元素与 data-role="slider" 一起使用，并添加两个 <option> 元素：

实例

<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off">Off</option>
</select>
</div>
</form>

提示：请使用 "selected" 属性来设置选项中的一个为预选中状态（高亮突出显示状态）：

实例

现在，你可以使用本节学习到的jQuery Mobile表单滑动条来为创建的表单添加效果了！

jQuery Mobile 主题

jQuery Mobile提供了丰富的主题界面，可以呈现出好看的UI效果。

jQuery Mobile 主题

jQuery Mobile 提供了5种不同的主题样式, 从 "a" 到 "e" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。

通过设置元素的data-theme属性可以自定义应用的外观:

值	描述	实例
a	默认。黑色背景白色文字	尝试一下
b	蓝色背景白色文字/ 黑色文字灰色背景	尝试一下
c	黑色文字浅灰色背景	尝试一下
d	黑色为主白色背景	尝试一下
e	黑色文字橙色背景	尝试一下

	你喜欢混合主题！默认情况下， jQuery Mobile 使用 "a" 主题 (黑色) 来设置头部和底部， "c" 主题 (浅灰色) 设置页面内容。但是，你可以自定义设置你喜欢的混合主题。

主题头部，内容和底部

实例

主题对话框

实例

<a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a>

<div data-role="page" id="pagetwo" data-overlay-theme="e">
<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="c"></div>
</div>

主题按钮

实例

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

提示：在jQuery Mobile中包含了一套标准的jQuery Mobile图标，可以分配给按钮。

主题图标

实例

头部和底部的主题按钮

实例

<div data-role="header">
<a href="#" data-role="button" data-icon="home" data-theme="b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" data-role="button" data-icon="search" data-theme="e">Search</a>
</div>

<div data-role="footer">
<a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a>
<a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a>
<a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a>
</div>

主题导航条

实例

<div data-role="footer" data-theme="e">
<h1>Insert Footer Text Here</h1>
<div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Button 1</a></li>
      <li><a href="#" data-icon="arrow-r">Button 2</a></li>
      <li><a href="#" data-icon="arrow-r">Button 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Button 4</a></li>
    </ul>
</div>
</div>

主题可折叠按钮和内容

实例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>

主题列表

实例

主题分割按钮

实例

主题可折叠列表

实例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>

主题表单

实例

<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="a">

<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

主题可折叠表单

实例

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>

添加新主题

jQuery Mobile 可以在移动页面添加新主题。

通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（f-z）,并在样式中添加你喜欢的颜色和字体。

你也可以在 HTML 文档中添加主题的新样式 - 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) for the content:

实例

好了，现在通过本章的练习，使用jQuery Mobile主题，以美化你的操作界面吧！

jQuery Mobile 事件

在jQuery Mobile中提供了丰富的事件处理机制，可以使得开发者很好的处理相应的事件，节约了时间。

事件 = 所有不同访问者访问页面的响应动作。

jQuery Mobile 事件

在jQuery Mobile你可以使用任何标准的 jQuery 事件。

除此之外, jQuery Mobile 也提供了针对移动端浏览器的事件：

触摸事件 - 当用户触摸屏幕时触发
滑动事件 - 当用户上下滑动时触发
定位事件 - 当设备水平或垂直翻转时触发
页面事件 - 当页面显示，隐藏，创建，加载或未加载时触发

初始化 jQuery Mobile 事件

在学习jQuery时我们学到了用$(document).ready()来使你的jQuery代码脚本在DOM元素加载完成后才开始执行：

jQuery document ready 事件

但是，在 jQuery Mobile 中, 使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行，所以要在任何新页面加载并创建是执行脚本，就需要绑定pageinit事件。

第二个参数 ("#pageone")为指定事件的页面id：

jQuery Mobile pageinit 事件

	注意： jQuery on() 方法用于绑定事件到选中的元素上。

下一章节我们将更详细介绍 jQuery Mobile 事件。

jQuery Mobile 触摸事件

jQuery Mobile提供了可定制的触摸事件，虽然这些事件只有在用户使用支持触摸功能的设备来访问jQuery Mobile网站时才能够使用。在使用这些事件时，您可以触发任何自定义java script 作为对五种不同的事件的响应：tap、taphold、swipe、swipeleft 和 swiperight。

触摸事件在用户触摸屏幕（页面）时触发。

点击或者滑动本区域

	触摸事件同样可应用与桌面电脑上：点击或者滑动鼠标！

jQuery Mobile 点击

点击事件在用户点击元素时触发。

如下实例：当点击 <p> 元素时，隐藏当前的 <p> 元素：

实例

$("p").on("tap",function(){
$(this).hide();
});

jQuery Mobile 点击不放（长按）

点击不放（长按）事件在点击并不放（大约一秒）后触发

实例

$("p").on("taphold",function(){
$(this).hide();
});

jQuery Mobile 滑动

滑动事件是在用户一秒内水平拖拽大于30PX，或者纵向拖曳小于20px的事件发生时触发的事件：

实例

$("p").on("swipe",function(){
$("span").text("Swipe detected!");
});

jQuery Mobile 向左滑动

向左滑动事件在用户向左拖动元素大于30px时触发：

实例

$("p").on("swipeleft",function(){
alert("You swiped left!");
});

jQuery Mobile 向右滑动

向右滑动事件在用户向右拖动元素大于30px时触发：

实例

$("p").on("swiperight",function(){
alert("You swiped right!");
});

在下一节内容中，我们将介绍jQuery Mobile滚屏事件。

jQuery Mobile 滚屏事件

jQuery Mobile提供了滚屏事件来滚动屏幕。

jQuery Mobile 提供了两种滚屏事件：滚屏开始时触发和滚动结束时触发。

jQuery Mobile 滚屏开始（Scrollstart）

scrollstart 事件是在用户开始滚动页面时触发：

实例

$(document).on("scrollstart",function(){
alert("Started scrolling!");
});

	注意：iOS 设备在滚屏时锁定 DOM 操作，这意味着当用户滚屏时不可能改变任何东西。然而，jQuery 团队正在为此寻找解决方案。

jQuery Mobile 滚屏结束（Scrollstop）

scrollstop 事件是在用户停止滚动页面时触发：

实例

$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});

在下一节的内容中，你将了解jQuery Mobile方向改变事件！

jQuery Mobile 方向改变事件

当设备的方向变化（设备横向持或纵向持）时，将触发jQuery Mobile方向改变事件。

jQuery Mobile 方向改变（orientationchange）事件

当用户垂直或水平旋转移动设备时，触发方向改变（orientationchange）事件。

如需使用方向改变（orientationchange）事件，请附加它到 window 对象：

$(window).on("orientationchange",function(){
alert("The orientation has changed!");
});

回调函数可有一个参数，event 对象，返回移动设备的方向："纵向"（设备保持在垂直位置）或"横向"（设备保持在水平位置）：

实例

$(window).on("orientationchange",function(event){
alert("Orientation is: " + event.orientation);
});

由于方向改变（orientationchange）事件绑定到 window 对象，我们可以使用 window.orientation 属性来设置不同的样式，以便区分纵向和横向的视图：

实例

$(window).on("orientationchange",function(){
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});

	window.orientation 属性针对纵向视图返回 0，针对横向视图返回 90 或 -90。

注意：当浏览器不支持orientationChange事件的时候绑定resize事件。

在下一节内容中，我们将介绍jQuery Mobile页面事件！

jQuery Mobile 页面事件

在 jQuery Mobile 中与页面打交道的事件被分为四类：

Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
Page Transition - 在页面过渡之前和之后
Page Change - 当页面被更改，或遭遇失败时

如需关于所有 jQuery Mobile 事件的完整信息，请访问我们的 jQuery Mobile 事件参考手册。

jQuery Mobile Initialization 事件

jQuery Mobile页面初始化中的初始化指的是页面增强，即 jQuery Mobile 对页面组件的样式、功能和交互进行丰富并增强的过程，在这个过程中也会触发一系列事件。

当 jQuery Mobile 中的一张典型页面进行初始化时，它会经历三个阶段：

在页面创建前
页面创建
页面初始化

每个阶段触发的事件都可用于插入或操作代码。

事件	描述
pagebeforecreate	当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件。
pagecreate	当页面已创建，但增强完成之前，触发该事件。
pageinit	当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。

下面的例子演示在 jQuery Mobile 中创建页面时，何时触发每种事件：

实例

$(document).on("pagebeforecreate",function(event){
alert("触发 pagebeforecreate事件！");
});
$(document).on("pagecreate",function(event){
alert("触发 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
alert("触发 pageinit 事件！")
});

jQuery Mobile Load 事件

页面加载事件属于外部页面。

无论外部页面何时载入 DOM，将触发两个事件。第一个是 pagebeforeload，第二个是 pageload （成功）或 pageloadfailed（失败）。

jQuery Mobile 提供了这些 API ，可以使开发者可以方便地在页面加载前后对页面数据进行处理。

下表中解释了这些事件：

事件	描述
pagebeforeload	在任何页面加载请求作出之前触发。
pageload	在页面已成功加载并插入 DOM 后触发。
pageloadfailed	如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading Page" 消息。

下列演示 pageload 和 pagloadfailed 事件的工作原理：

实例

$(document).on("pageload",function(event,data){
alert("触发 pageload 事件！ URL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert(";抱歉，被请求页面不存在。");
});

jQuery Mobile 过渡事件

我们还可以在从一页过渡到下一页时使用事件。

在jQuery Mobile中，我们可以设置从一个页面到另一个页面的效果，那就是过渡(transitions)。

页面过渡涉及两个页面：一张"来"的页面和一张"去"的页面 - 这些过渡使当前活动页面（"来的"页面）到新页面（"去的"页面的改变过程变得更加动感。

事件	描述
pagebeforeshow	在"去的"页面触发，在过渡动画开始前。
pageshow	在"去的"页面触发，在过渡动画完成后。
pagebeforehide	在"来的"页面触发，在过渡动画开始前。
pagehide	在"来的"页面触发，在过渡动画完成后。

下列演示了过渡时间的工作原理：

实例

$(document).on("pagebeforeshow","#pagetwo",function(){ //当进入页面二时
alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当进入页面二时
alert("页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo
alert("现在隐藏页面二");
});

有关jQuery Mobile页面事件的内容就介绍到这，请你根据文中提及的实例，练习使用该页面事件！

jQuery Mobile 实例

jQuery Mobile 页面

一个基本的移动网页
 多个页面
 对话框

淡入效果
 从后向前翻转效果
 流动效果
 弹出效果
 滑动效果
 从右到左滑动并淡入效果
 从下到上滑动效果
 从上到下滑动效果
 翻页效果
 没有切换效果
 颠倒效果

jQuery Mobile 页面切换

创建按钮
 内联按钮
 组合按钮
 后退按钮
 带有圆角或不带有圆角的按钮
 小尺寸或常规尺寸的按钮
 带有阴影或不带有阴影的按钮

jQuery Mobile 按钮

jQuery Mobile 按钮图标

添加图标到按钮
 定位图标
 只显示图标

创建头部栏和尾部栏
 在头部栏添加按钮
 在头部栏左侧添加按钮
 在头部栏右侧添加按钮
 带有按钮的尾部栏
 带有居中对齐按钮的尾部栏
 带有组合按钮的尾部栏
 带有水平组合按钮的尾部栏
 Inline 定位 - 头部栏和尾部栏与页面内容内联
 Fixed 定位 - 头部栏和尾部栏固定在页面的顶部和底部
 Fullscreen 定位 - 头部栏和尾部栏固定在页面的顶部和底部，但是会遮住页面内容

jQuery Mobile 工具栏

创建导航栏
 内容中的导航栏
 尾部中的导航栏
 在导航栏中为按钮添加被选中（按下）外观
 持续添加被选中（按下）外观
 定位导航栏中的图标
 导航栏中 10 个按钮的演示

jQuery Mobile 导航栏

创建可折叠的内容块
 当页面加载时展开内容
 嵌套可折叠块
 可折叠集合
 取消可折叠块上的圆角
 让可折叠块更小
 改变可折叠块的图标
 可折叠列表
 可折叠表单

jQuery Mobile 可折叠块

jQuery Mobile 网格

两列布局
 三列布局
 四列布局
 五列布局
 自定义网格
 列内的多行

创建列表视图
 带圆角的列表视图
 列表分隔
 自动分隔
 创建搜索过滤
 改变搜索框内的文本
 创建只读列表
 为列表项添加缩略图
 添加 HTML 元素，用信息填充列表项
 添加图标到列表项
 创建带有分割按钮的列表
 让列表项更具功能性
 创建计数气泡
 为列表项创建默认链接图标
 可折叠列表
 创建日历

jQuery Mobile 列表

文本输入框
 文本输入域
 搜索输入框
 单选按钮
 复选框
 水平组合单选按钮和复选框
 带有单选按钮和复选框的 Field 容器
 预选中单选按钮/复选框
 创建选择菜单
 创建带有分隔（optgroup）的选择菜单
 自定义选择菜单
 在选择菜单中选择多个选项
 组合选择菜单
 水平组合选择菜单
 预选中选项
 可折叠表单
 创建滑动条控件
 高亮突出显示滑动条的值
 创建拨动开关
 预选中拨动开关

jQuery Mobile 表单

主题 "a"
主题 "b"
主题 "c"
主题 "d"
主题 "e"
主题头部、内容和尾部
 主题对话框
 主题按钮
 主题图标
 头部和尾部的主题按钮
 主题导航栏
 主题可折叠按钮和内容
 主题列表
 主题分割按钮
 主题可折叠列表
 主题表单
 主题可折叠表单
 自定义主题

jQuery Mobile 主题

点击（Tap）事件
 点击不放（Taphold）事件
 滑动（Swipe）事件
 向左滑动（Swipeleft）事件
 向右滑动（Swiperight）事件
 滚屏开始（Scrollstart）事件
 滚屏结束（Scrollstop）事件
 方向改变（Orientationchange）事件 - 提示方向
 方向改变（Orientationchange）事件 - 为纵向和横向设置不同的样式

jQuery Mobile 触摸事件

以上是包含于jQuery Mobile教程中的全部相关的使用实例，如果你已经掌握了jQuery Mobile知识，请通过这些实例巩固！

jQuery Mobile Data 属性

本节介绍jQuery Mobile中的Data属性，有较多的内容。

jQuery Data 属性

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

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

按钮

带有 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" 的容器来规定是否水平或垂直组合按钮。

提示：更多关于按钮的信息，请你参考本站的“jQuery Mobile按钮”部分！

复选框

带有 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 事件

在本节内容中，我们为你提供了可能在jQuery Mobile中使用的所有的事件！

jQuery Mobile 事件参考手册

以下列表为所有的 jQuery Mobile 事件。

注意：请使用 on() 方法绑定事件。

事件	描述
hashchange	启用可标记 #hash 历史，哈希值会在一次独立的点击时发生时变化，比如一个用户点击后退按钮，会通过 hashchange事件进行处理。
navigate	包裹了 hashchange 和 popstate 的事件
orientationchange	方向改变事件,在用户垂直或者水平旋转移动设备时触发。
pagebeforechange	在页面切换之前，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed（失败）。
pagebeforecreate	页面初始化时，初始化之前触发。
pagebeforehide	在页面切换后旧页面隐藏之前，触发的事件。
pagebeforeload	在加载请求发出之前触发
pagebeforeshow	在页面切换后显示之前，触发的事件。
pagechange	在页面切换成功后，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed（失败）。
pagechangefailed	在页面切换失败时，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed（失败）。
pagecreate	在页面创建成功之后，触发的事件,但增强完成之前。
pagehide	在页面切换后老页面隐藏之后，触发的事件。
pageinit	在页面页面初始化时，触发的事件。
pageload	在页面完全加载成功后触发。
pageloadfailed	如果页面请求失败触发。
pageremove	在窗口视图从 DOM 中移除外部页面之前触发。
pageshow	在过渡动画完成后，在"到达"页面触发。
scrollstart	当用户开始滚动页面时触发。
scrollstop	当用户停止滚动页面时触发。
swipe	当用户在元素上水平滑动时触发。
swipeleft	当用户从左划过元素超过 30px 时触发。
swiperight	当用户从右划过元素超过 30px 时触发。
tap	当用户敲击某元素时触发。
taphold	当元素敲击某元素并保持一秒时触发。
throttledresize	启用可标记 #hash 历史记录
updatelayout	由动态显示/隐藏内容的 jQuery Mobile 组件触发。
vclick	虚拟化的 click 事件处理器
vmousecancel	虚拟化的 mousecancel 事件处理器
vmousedown	虚拟化的 mousedown 事件处理器
vmousemove	虚拟化的 mousemove 事件处理器
vmouseout	虚拟化的 mouseout 事件处理器
vmouseover	虚拟化的 mouseover 事件处理器
vmouseup	虚拟化的 mouseup 事件处理器

jQuery Mobile 图标

我们可以使用图标类在 jQuery Mobile 中 <a> 和 <button> 元素上添加图标。

jQuery 图标

在 jQuery Mobile 中，如需为按钮添加图标，请使用 data-icon 属性：

<a href="#anylink" data-role="button" data-icon="refresh">Refresh Page</a>

提示：在 <button> 或 <input> 元素中，您也可以使用 data-icon 属性。

下面我们列出了 jQuery Mobile 提供的所有可用图标：

属性值	描述	实例
data-icon="arrow-l"	左箭头	尝试一下
data-icon="arrow-r"	右箭头	尝试一下
data-icon="arrow-u"	上箭头	尝试一下
data-icon="arrow-d"	下箭头	尝试一下
data-icon="plus"	加号	尝试一下
data-icon="minus"	减号	尝试一下
data-icon="delete"	删除	尝试一下
data-icon="check"	检查	尝试一下
data-icon="home"	首页	尝试一下
data-icon="info"	信息	尝试一下
data-icon="grid"	网格	尝试一下
data-icon="gear"	工具	尝试一下
data-icon="search"	搜索	尝试一下
data-icon="back"	后退	尝试一下
data-icon="forward"	前进	尝试一下
data-icon="refresh"	更新	尝试一下
data-icon="star"	星号	尝试一下
data-icon="alert"	警告	尝试一下

jQuery event.isImmediatePropagationStopped() 方法

实例

检查 event.stopImmediatePropagation() 是否被调用：

$("div").click(function(event){
event.stopImmediatePropagation();
alert(event.isImmediatePropagationStopped());
});

定义和用法

该方法检查指定的事件上是否调用了 event.stopImmediatePropagation() 方法。

如果 event.stopImmediatePropagation() 被调用则该方法返回 true，否则返回 false。

语法

event.isImmediatePropagationStopped()

参数	描述
event	必需。event 参数来自事件绑定函数。

jQuery [attribute^=value] 选择器

实例

选取所有带有以 "nation" 开头的 name 属性的 <input> 元素：

$("input[name^='nation']")

定义和用法

[attribute^=value] 选择器选取每个带有指定属性且以指定字符串开头的元素。

语法

$("[attribute^='value']")

参数	描述
attribute	必需。规定要查找的属性。
value	必需。规定属性值以其开头的字符串。

jQuery Mobile 简介

jQuery Mobile 是一个用于创建移动端web应用的的前端框架。

学习本教程前你需要先了解

在开始学习 jQuery Mobile 前, 你应该了解一下基础知识：

如果你想学习这些知识，你可以访问本站的首页。

什么是 jQuery Mobile?

jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。

jQuery Mobile 工作与所有主流的智能手机和平板电脑上：

jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上，如果您了解 jQuery，您可以很容易的学习 jQuery Mobile。

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 核心库一样，您不需要在您的开发计算机上安装任何东西；只需将各种 .js 和 .css 文件直接包含到您的 web 页面中即可。这样，您就可以随时的使用 JQM 的功能。

最好的阅读体验

尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。

为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。

jQuery Mobile 安装

在开始使用 jQuery Mobile 前，您需要先安装它，本节教您如何正确安装 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:

下载 jQuery Mobile

如果你想将 jQuery Mobile 放于你的主机中,你可以从 jQuerymobile.com下载该文件。

提示： 将下载的文件放置于与网页同一目录下。

	你是否想知道为什么在 <script> 标签中没有插入 type="text/javascript" ? 在 HTML5 已经不需要该属性。 JavaScript 在所有现代浏览器中是 HTML5 的默认脚本语言！

jQuery Mobile 页面

开始学习 jQuery Mobile

	尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。

实例

实例解析：

data-role="page" 是在浏览器中显示的页面。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-role="content" 定义了页面的内容，比如文本，图片，表单，按钮等。
data-role="footer" 用于创建页面底部工具条。
在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。

	jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。

在页面中添加 jQuery Mobile

使用 jQuery Mobile, 你可以在单个 HTML 文件中创建多个不同的页面。

你可以使用不同的href属性来区分使用同一个唯一id的页面：

实例

注意： 当web应用有大量的内容（文本，图片，脚本等）将会严重影响加载时间。如果你不想使用内页链接可以使用外部文件：

<a href="externalfile.html">访问外部文件</a>

页面作为对话框使用

对话框是用于显示页面信息显示或者表单信息的输入。

在链接中添加data-rel="dialog"让用户点击链接时弹出对话框:

实例

jQuery Mobile 按钮

Mobile 应用程序是建立在您想要显示的简单的点击事物上。

在 jQuery Mobile 中创建按钮

在 jQuery Mobile 中，按钮可通过三种方式创建：

使用 <button> 元素
使用 <input> 元素
使用带有 data-role="button" 的 <a> 元素

<button>

<input>

<a>

	在 jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 data-role="button" 的 <a> 元素在页面间进行链接，使用 <input> 或 <button> 元素进行表单提交。

导航按钮

如需通过按钮在页面间进行链接，请使用带有 data-role="button" 属性的 <a> 元素：

实例

<a href="#pagetwo" data-role="button">访问第二个页面</a>

内联按钮

默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"：

实例

<a href="#pagetwo" data-role="button" data-inline="true">访问第二个页面</a>

组合按钮

jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。

请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮：

实例

	默认情况下，组合按钮是垂直组合，它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。

后退按钮

如需创建后退按钮，请使用 data-rel="back" 属性（这会忽略锚的 href 值）：

实例

	您也可以自动添加后退按钮，请使用：data-add-back-btn=”true”。

jQuery Mobile 按钮图标

jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。使用这些图标，您可以很明确的知道该按钮的作用。

添加图标到 jQuery Mobile 按钮

如需添加图标到您的按钮，请使用 data-icon 属性：

<a href="#anylink" data-role="button" data-icon="search">Search</a>

提示：您也可以在 <button> 或 <input> 元素上使用 data-icon 属性。

下面我们列出一些 jQuery Mobile 提供的可用图标：

属性值	描述	实例
data-icon="arrow-l"	左箭头	尝试一下
data-icon="arrow-r"	右箭头	尝试一下
data-icon="delete"	删除	尝试一下
data-icon="info"	信息	尝试一下
data-icon="home"	首页	尝试一下
data-icon="back"	后退	尝试一下
data-icon="search"	搜索	尝试一下
data-icon="grid"	网格	尝试一下

如需查看所有 jQuery Mobile 按钮图标的完整参考手册，请访问我们的 jQuery Mobile 图标参考手册。

定位图标

您也可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。

请使用 data-iconpos 属性来指定位置：

图标的位置：

	默认情况下，所有的按钮图标被放置到左侧。

只显示图标

如果只想显示图标，请设置 data-iconpos 为 "notext"：

后退：

移除圆圈

你会发现，在默认情况下，所有的jQuery Mobile按钮图标都有一个灰色的圆圈。你可以使用 "ui-nodisc-icon" 类将它移除：

jQuery Mobile 工具栏

工具栏元素通常位于头部和尾部内 - 让导航易于访问：

头部栏

头部栏一般包含页面标题/logo 或一两个按钮（通常是首页、选项或搜索）。

您可以添加按钮到头部的左侧或右侧。

下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧：

实例

<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button">搜索</a>
</div>

下面的代码，将添加一个按钮到头部标题文本的左侧：

<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
</div>

但是，如果您把按钮链接放置在 <h1> 元素之后，将无法显示右侧的文本。要添加一个按钮到头部标题的右侧，请指定 class 为 "ui-btn-right"：

实例

<div data-role="header">
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>

	头部可以包含一个或两个按钮，而尾部没有限制。

尾部栏

尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性，因此可以包含尽可能多的按钮：

实例

注意：尾部的样式与头部不同（没有内边距和空间，且按钮不居中）。为了解决这个问题，请把 "ui-btn" 放置在尾部的 class 上：

实例

您还可以将尾部中的按钮进行水平或垂直组合：

实例

定位头部栏和尾部栏

头部和尾部可以通过三种方式进行定位：

Inline - 默认。头部栏和尾部栏与页面内容内联。
Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。

使用 data-position 属性来定位头部栏和尾部栏：

Inline 定位（默认）

Fixed 定位

要启用全屏定位，请使用 data-position="fixed"，并添加 data-fullscreen 属性到元素：

Fullscreen 定位

提示：全屏定位适用于照片、图像和视频。

提示：固定定位和全屏定位中，通过点击屏幕将隐藏和显示头部栏和尾部栏。

jQuery Mobile 导航栏

通过导航栏你可以快速到达指定位置，jQuery Mobile将导航栏部分的代码放在了data-role 为 header 的 div 中。

jQuery Mobile 导航栏

导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。

默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。

使用 data-role="navbar" 属性来定义导航栏：

实例

	默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33,3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过 5 个按钮，将会拆成多行（查看"更多实例"）。

激活按钮

当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。

如果想在不点击链接时获得这种外观，请使用 class="ui-btn-active"：

实例

对于多个页面，您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点，请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class：

实例

jQuery Mobile 可折叠块

通过使用jQuery Mobile可折叠块，你可以控制是否将内容显示或者隐藏。

可折叠内容块

可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。

实例

<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是可折叠的内容。</p>
</div>

默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用 data-collapsed="false"：

实例

<div data-role="collapsible" data-collapsed="false">
<h1>点击我 - 我可以折叠!</h1>
<p>I'm 现在我默认是展开的。</p>
</div>

嵌套可折叠块

可折叠的内容块是可以彼此嵌套的：

实例

	可折叠的内容块可以根据您的需要进行多次嵌套。

可折叠集合

可折叠集合是将可折叠块组合在一起（就像手风琴一样）。当一个新的块被展开时，所有其他的块都会被折叠起来。

创建若干个可折叠的内容块，然后把可折叠内容块用带有 data-role="collapsible-set" 的新容器包围起来：

实例

jQuery Mobile 网格

JQuery Mobile 提供的 CSS 样式 ui-grid 可以实现内容的网格布局。

jQuery Mobile 布局网格

jQuery Mobile 提供了一套基于 CSS 的分列布局。然而，在移动设备上，由于考虑手机的屏幕宽度狭窄，一般不建议使用分栏分列布局。

但有时您想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。

网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。

这里有四种布局网格可供使用：

网格类	列	列宽	对应	实例
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 的三个子元素。

自定义网格

通过使用CSS，您可以自定义列块：

实例

您也可以通过使用内嵌样式来自定义块：

多行

在列中也可以有多个行。

注意：ui-block-a-class 总是创建一个新行：

实例

响应式网格

在小屏幕中，不建议一行中并排太多按钮（文本会缩短）。

我们在容器使用 ui-responsive 类来创建响应式网格：

jQuery Mobile 列表视图

jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和无序(<ul>).

实例

列表样式的圆角和边缘，使用 data-inset="true" 属性设置:

实例

	默认情况下，列表项的链接会自动变成一个按钮 (不需要 data-role="button")。

列表分隔

列表项也可以转化为列表分割项，用来组织列表，使列表项成组。

指定列表分割，给列表项<li>元素添加 data-role="list-divider" 属性即可：

实例

如果你有一个字母顺序排列的列表，（例如一个电话簿）通过 <ol> 或者<ul> 元素的 data-autodividers="true" 属性设置可以配置为自动生成的项目的分隔:

实例

<ul data-role="listview" data-autodividers="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
...
</ul>

	data-autodividers="true" 可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。

搜索过滤

jquery Mobile提供一个非常简单的方法，实现客户端搜索功能，筛选列表的选项。只需添加 data-filter="true" 属性即可:

实例

默认情况下，搜索输入框默认的字符为 "Filter items..."。

实例

jQuery Mobile 列表缩略图

默认情况下每个jQuery Mobile列表项都会包含一个向右的箭头图标。

大于 16x16px 的图像，请在链接中添加 <img> 元素。

jQuery Mobile 将自动缩放图像到 80x80px:

实例

使用标准的HTML添加列表信息：

实例

<ul data-role="listview">
<li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
    </a>
</li>
</ul>

jQuery Mobile 列表图标

在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 图标：

实例

分割按钮

jQuery Mobile 会自动设置第二个链接为蓝色箭头的图标，图标的链接文字（如果有的话）将在用户将鼠标悬停在图标时显示:

实例

添加一些页面和对话框使链接功能更加丰富：

实例

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>

气泡数字

气泡数字是用来显示列表项相关的数字，如在一个邮箱的邮件：

如需添加气泡数字，请使用行内元素，比如 <span>，设置 class "ui-li-count" 属性并添加数字：

实例

注意：显示一个正确的气泡数字，必须修改编程方式。这将在以后的章节解释。

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 属性作为标签时经常用到：

实例

Field 容器

如需让标签和表单元素看起来更适应宽屏，请用带有 data-role="fieldcontain" 属性的 <div> 或 <fieldset> 元素包围 label/form 元素：

实例

	fieldcontain 属性基于页面的宽度为标签和表单控件添加样式。当页面的宽度大于 480px 时，它会自动把标签放置在与表单控件同一线上。当页面的宽度小于 480px 时，标签会被放置在表单元素的上面。

提示：为了防止 jQuery Mobile 为可点击元素自动添加样式，请使用 data-role="none" 属性：

实例

	jQuery Mobile 中的表单提交 jQuery Mobile 通过 AJAX 自动处理表单提交，并将试图集成服务器响应到应用程序的 DOM 中。

jQuery Mobile 表单输入元素

jQuery Mobile 表单输入元素可以让使用HTML标记的文本输入框和文本输入域变得更加的美观。

jQuery Mobile 文本输入框

实例

提示：请使用 placeholder 来指定一个简短的描述，用来描述输入字段的期望值：

文本域

对于多行文本输入可使用 <textarea> 。

注意：当您键入一些文本时，文本域会自动调整大小以适应新增加的行。

实例

搜索输入框

type="search" 类型的输入框是在 HTML5 中新增的，它是为输入搜索定义文本字段：

实例

单选按钮

当用户在有限数量的选择中仅选取一个选项时，使用单选按钮。

提示：请使用 data-role="controlgroup" 来把按钮组合在一起：

实例

复选框

当用户在有限数量的选择中选取一个或多个选项时，使用复选框：

实例

实例

您也可以用一个 field 容器包围 <fieldset>：

实例

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>

如果您想要您的按钮中的一个预先选中，请使用 HTML 中 <input> 的 checked 属性：

实例

HTML 教程：HTML 表单

jQuery Mobile 表单选择菜单

jQuery Mobile 选择菜单

Iphone 上的选择菜单：

Android/SGS4 设备上的选择菜单：

<select> 元素创建带有若干选项的下拉列表。

<select> 元素内的 <option> 元素定义了列表中的可用选项：

实例

提示：如果您有一个带有相关选项的很长的列表，请在 <select> 内使用 <optgroup> 元素：

实例

自定义选择菜单

本页顶部的图像，演示了移动平台上如何使用它们的方式展示一个选择菜单。

如果您想要让选择菜单在所有的移动设备上都显示相同，请使用 jQuery 自带的自定义选择菜单，data-native-menu="false" 属性：

实例

多个选择

如需在选择菜单中选择多个选项，请在 <select> 元素中使用 multiple 属性：

实例

jQuery Mobile 表单滑动条

jQuery Mobile表单滑动条可以用来控制进度。

jQuery Mobile 滑动条控件

滑动条允许您从一个范围的数字中选择一个值：

如需创建滑动条，请使用 <input type="range">：

实例

使用以下属性来规定限制：

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

提示：如果您想要高亮突出显示滑动条的值，请添加 data-highlight="true"：

实例

拨动开关

波动开关通常用于 on/off 或 true/false 按钮：

如需创建一个开关，请把 <select> 元素与 data-role="slider" 一起使用，并添加两个 <option> 元素：

实例

提示：请使用 "selected" 属性来设置选项中的一个为预选中状态（高亮突出显示状态）：

实例

现在，你可以使用本节学习到的jQuery Mobile表单滑动条来为创建的表单添加效果了！

jQuery Mobile 主题

jQuery Mobile提供了丰富的主题界面，可以呈现出好看的UI效果。

jQuery Mobile 主题

jQuery Mobile 提供了5种不同的主题样式, 从 "a" 到 "e" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。

通过设置元素的data-theme属性可以自定义应用的外观:

值	描述	实例
a	默认。黑色背景白色文字	尝试一下
b	蓝色背景白色文字/ 黑色文字灰色背景	尝试一下
c	黑色文字浅灰色背景	尝试一下
d	黑色为主白色背景	尝试一下
e	黑色文字橙色背景	尝试一下

	你喜欢混合主题！默认情况下， jQuery Mobile 使用 "a" 主题 (黑色) 来设置头部和底部， "c" 主题 (浅灰色) 设置页面内容。但是，你可以自定义设置你喜欢的混合主题。

主题头部，内容和底部

实例

主题对话框

实例

主题按钮

实例

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

提示：在jQuery Mobile中包含了一套标准的jQuery Mobile图标，可以分配给按钮。

主题图标

实例

头部和底部的主题按钮

实例

主题导航条

实例

主题可折叠按钮和内容

实例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>

主题列表

实例

主题分割按钮

实例

主题可折叠列表

实例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>

主题表单

实例

主题可折叠表单

实例

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>

添加新主题

jQuery Mobile 可以在移动页面添加新主题。

你也可以在 HTML 文档中添加主题的新样式 - 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) for the content:

实例

好了，现在通过本章的练习，使用jQuery Mobile主题，以美化你的操作界面吧！

jQuery Mobile 事件

在jQuery Mobile中提供了丰富的事件处理机制，可以使得开发者很好的处理相应的事件，节约了时间。

事件 = 所有不同访问者访问页面的响应动作。

jQuery Mobile 事件

在jQuery Mobile你可以使用任何标准的 jQuery 事件。

除此之外, jQuery Mobile 也提供了针对移动端浏览器的事件：

触摸事件 - 当用户触摸屏幕时触发
滑动事件 - 当用户上下滑动时触发
定位事件 - 当设备水平或垂直翻转时触发
页面事件 - 当页面显示，隐藏，创建，加载或未加载时触发

初始化 jQuery Mobile 事件

在学习jQuery时我们学到了用$(document).ready()来使你的jQuery代码脚本在DOM元素加载完成后才开始执行：

jQuery document ready 事件

第二个参数 ("#pageone")为指定事件的页面id：

jQuery Mobile pageinit 事件

	注意： jQuery on() 方法用于绑定事件到选中的元素上。

下一章节我们将更详细介绍 jQuery Mobile 事件。

jQuery Mobile 触摸事件

触摸事件在用户触摸屏幕（页面）时触发。

点击或者滑动本区域

	触摸事件同样可应用与桌面电脑上：点击或者滑动鼠标！

jQuery Mobile 点击

点击事件在用户点击元素时触发。

如下实例：当点击 <p> 元素时，隐藏当前的 <p> 元素：

实例

$("p").on("tap",function(){
$(this).hide();
});

jQuery Mobile 点击不放（长按）

点击不放（长按）事件在点击并不放（大约一秒）后触发

实例

$("p").on("taphold",function(){
$(this).hide();
});

jQuery Mobile 滑动

滑动事件是在用户一秒内水平拖拽大于30PX，或者纵向拖曳小于20px的事件发生时触发的事件：

实例

$("p").on("swipe",function(){
$("span").text("Swipe detected!");
});

jQuery Mobile 向左滑动

向左滑动事件在用户向左拖动元素大于30px时触发：

实例

$("p").on("swipeleft",function(){
alert("You swiped left!");
});

jQuery Mobile 向右滑动

向右滑动事件在用户向右拖动元素大于30px时触发：

实例

$("p").on("swiperight",function(){
alert("You swiped right!");
});

在下一节内容中，我们将介绍jQuery Mobile滚屏事件。

jQuery Mobile 滚屏事件

jQuery Mobile提供了滚屏事件来滚动屏幕。

jQuery Mobile 提供了两种滚屏事件：滚屏开始时触发和滚动结束时触发。

jQuery Mobile 滚屏开始（Scrollstart）

scrollstart 事件是在用户开始滚动页面时触发：

实例

$(document).on("scrollstart",function(){
alert("Started scrolling!");
});

	注意：iOS 设备在滚屏时锁定 DOM 操作，这意味着当用户滚屏时不可能改变任何东西。然而，jQuery 团队正在为此寻找解决方案。

jQuery Mobile 滚屏结束（Scrollstop）

scrollstop 事件是在用户停止滚动页面时触发：

实例

$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});

在下一节的内容中，你将了解jQuery Mobile方向改变事件！

jQuery Mobile 方向改变事件

当设备的方向变化（设备横向持或纵向持）时，将触发jQuery Mobile方向改变事件。

jQuery Mobile 方向改变（orientationchange）事件

当用户垂直或水平旋转移动设备时，触发方向改变（orientationchange）事件。

如需使用方向改变（orientationchange）事件，请附加它到 window 对象：

$(window).on("orientationchange",function(){
alert("The orientation has changed!");
});

回调函数可有一个参数，event 对象，返回移动设备的方向："纵向"（设备保持在垂直位置）或"横向"（设备保持在水平位置）：

实例

$(window).on("orientationchange",function(event){
alert("Orientation is: " + event.orientation);
});

由于方向改变（orientationchange）事件绑定到 window 对象，我们可以使用 window.orientation 属性来设置不同的样式，以便区分纵向和横向的视图：

实例

	window.orientation 属性针对纵向视图返回 0，针对横向视图返回 90 或 -90。

注意：当浏览器不支持orientationChange事件的时候绑定resize事件。

在下一节内容中，我们将介绍jQuery Mobile页面事件！

jQuery Mobile 页面事件

在 jQuery Mobile 中与页面打交道的事件被分为四类：

Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
Page Transition - 在页面过渡之前和之后
Page Change - 当页面被更改，或遭遇失败时

如需关于所有 jQuery Mobile 事件的完整信息，请访问我们的 jQuery Mobile 事件参考手册。

jQuery Mobile Initialization 事件

当 jQuery Mobile 中的一张典型页面进行初始化时，它会经历三个阶段：

在页面创建前
页面创建
页面初始化

每个阶段触发的事件都可用于插入或操作代码。

事件	描述
pagebeforecreate	当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件。
pagecreate	当页面已创建，但增强完成之前，触发该事件。
pageinit	当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。

下面的例子演示在 jQuery Mobile 中创建页面时，何时触发每种事件：

实例

jQuery Mobile Load 事件

页面加载事件属于外部页面。

无论外部页面何时载入 DOM，将触发两个事件。第一个是 pagebeforeload，第二个是 pageload （成功）或 pageloadfailed（失败）。

jQuery Mobile 提供了这些 API ，可以使开发者可以方便地在页面加载前后对页面数据进行处理。

下表中解释了这些事件：

事件	描述
pagebeforeload	在任何页面加载请求作出之前触发。
pageload	在页面已成功加载并插入 DOM 后触发。
pageloadfailed	如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading Page" 消息。

下列演示 pageload 和 pagloadfailed 事件的工作原理：

实例

jQuery Mobile 过渡事件

我们还可以在从一页过渡到下一页时使用事件。

在jQuery Mobile中，我们可以设置从一个页面到另一个页面的效果，那就是过渡(transitions)。

页面过渡涉及两个页面：一张"来"的页面和一张"去"的页面 - 这些过渡使当前活动页面（"来的"页面）到新页面（"去的"页面的改变过程变得更加动感。

事件	描述
pagebeforeshow	在"去的"页面触发，在过渡动画开始前。
pageshow	在"去的"页面触发，在过渡动画完成后。
pagebeforehide	在"来的"页面触发，在过渡动画开始前。
pagehide	在"来的"页面触发，在过渡动画完成后。

下列演示了过渡时间的工作原理：

实例

有关jQuery Mobile页面事件的内容就介绍到这，请你根据文中提及的实例，练习使用该页面事件！

jQuery Mobile 实例

jQuery Mobile 页面

一个基本的移动网页
 多个页面
 对话框

jQuery Mobile 页面切换

创建按钮
 内联按钮
 组合按钮
 后退按钮
 带有圆角或不带有圆角的按钮
 小尺寸或常规尺寸的按钮
 带有阴影或不带有阴影的按钮

jQuery Mobile 按钮

jQuery Mobile 按钮图标

添加图标到按钮
 定位图标
 只显示图标

jQuery Mobile 工具栏

jQuery Mobile 导航栏

jQuery Mobile 可折叠块

jQuery Mobile 网格

两列布局
 三列布局
 四列布局
 五列布局
 自定义网格
 列内的多行

jQuery Mobile 列表

jQuery Mobile 表单

jQuery Mobile 主题

jQuery Mobile 触摸事件