jQueryMobile-秘籍-全-

jQueryMobile 秘籍（全）

原文：zh.annas-archive.org/md5/55209463BC487F6190B6A043F64AEE64

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

jQuery Mobile 是一款获奖的基于 HTML5/CSS3 的开源、跨平台 UI 框架。它提供了一个非常酷和高度可定制的 UI。它建立在流行的 jQuery 库上，并使用声明式编码，使其易于使用和学习。考虑到它支持的众多浏览器和平台，它是市场领导者。

jQuery Mobile Cookbook 提供了超过八十个简单易懂的配方。您可以快速学习并立即开始编写代码。高级主题，如使用脚本来操纵、自定义和扩展框架，也会涉及到。这些技巧解决了您日常遇到的常见问题。本书对于初学者和经验丰富的 jQuery Mobile 开发人员都非常有用。

您首先会使用各种控件开发简单的应用程序，然后学习如何自定义它们。稍后，您将探索使用高级功能，如配置、事件和方法。

开发单页和多页应用程序。使用缓存来提升性能。使用自定义过渡效果、图标精灵、样式和主题。学习高级特性，如配置、事件和方法。利用 jQuery Mobile 探索 HTML5 的新特性和语义。

jQuery Mobile Cookbook 是一本易于阅读的书，内容丰富，附有实用的技巧和截图。

本书内容概述

第一章，入门，开始简要介绍 jQuery Mobile 框架是什么以及它对您有什么作用。您将在此处编写您的第一个 jQuery Mobile 跨平台应用程序。您还将了解如何使用在线的 JSBin 工具来开发和测试您的应用程序。

第二章，页面和对话框，在这里您将学习如何比较和使用单页和多页模板应用程序。您将学习各种性能优化技术，如预取和使用 DOM 缓存来提高页面加载速度。您将使用 JavaScript 和 CSS 创建新的自定义过渡效果，并学习如何为登录页面使用页面重定向。您还将创建一个自定义样式的对话框，并使用 HTML5 History API 来创建自己的自定义弹出窗口。

第三章，工具栏，在这里您将学习如何使用固定和全屏工具栏以及如何在页面之间保持导航链接的持久性。您将了解如何创建和添加自定义圆形按钮、图像以及标题栏的自定义返回按钮，以及页脚的网格布局。

第四章，按钮和内容格式化，在这里你将使用 JavaScript 动态创建按钮并分配动作。然后，你将学习如何使用自定义图标、添加自定义图标精灵，最后替换 jQuery Mobile 框架提供的现有图标精灵。你将学会如何创建嵌套手风琴（可折叠集），如何创建自定义布局网格，最后看到如何格式化和显示应用程序中的 XML 和 JSON 内容。

第五章，表单，向你展示了如何原生样式化表单、禁用文本控件，并将单选按钮分组成多行网格。你将学会自定义复选框组、自动初始化选择菜单，并创建动态翻转开关和滑块控件。你还将学会验证并将表单提交到服务器使用 POST，以及如何使用 GET 获取数据。最后，你将学会创建一个可访问的表单。

第六章，列表视图，在这里你将学习如何使用各种列表类型并自定义它们。你将使用嵌入列表、自定义编号列表，然后创建只读列表。你将了解如何格式化列表内容，使用拆分按钮和图像图标列表。你还将为列表创建自定义搜索过滤器，最后看到如何使用 JavaScript 修改列表。

第七章，配置，向你展示了如何调整、配置和自定义 jQuery 移动框架提供的各种选项和设置。包括配置活动类、启用 Ajax、自动初始化页面、配置默认转换、自定义错误和页面加载消息、以及使用自定义命名空间，以及一些更高级的配置选项。

第八章，事件，向你展示了如何使用框架中提供的各种事件。你将学会如何使用方向、滚动、触摸、虚拟鼠标和布局事件，以及页面初始化、页面加载、页面更改和页面移除事件。你还将了解如何使用页面转换和动画事件。

第九章，方法和实用工具，在这里你将学习如何使用框架中提供的方法和实用工具。本章介绍了框架提供的方法，并列出了每个方法的工作示例。你将学会如何加载页面，更改页面，以及如何进行静默滚动。

第十章，主题框架，在这里你将学习如何为嵌套列表设置主题，样式化按钮角，使用自定义背景和字体。你将探索如何覆盖全局活动状态并覆盖现有的颜色方案。最后，你将使用 ThemeRoller 网页工具创建并使用自己的颜色方案。

第十一章，HTML5 和 jQuery Mobile，在这里您将学习如何在您的 jQuery 移动应用中使用各种 HTML5 特性。您将探索一些新的 HTML5 语义，使用应用缓存将您的应用程序离线，使用 Web Workers 看看如何进行异步操作，并且您将使用 Web 存储使用本地和会话存储来存储数据。然后，您将学习如何在 Canvas 中绘制二维图形，使用 SVG 图像并对其应用高斯模糊滤镜，使用地理位置 API 跟踪您的设备位置，并最终学习如何在应用中使用音频和视频。

本书所需的条件

要使用 jQuery Mobile，您只需您喜爱的文本编辑器编写 HTML 代码。然后，您可以在您喜爱的浏览器中运行此代码，并在广泛的平台和设备上启动您的应用程序。支持的平台和设备的全面详细列表可在 jquerymobile.com/gbs 上找到。

要安装和运行食谱书中的食谱，您将需要从 www.nodejs.org 下载并安装node.js Web 服务器。nodejs 网站上的在线文档中有安装到您特定平台（Windows/Linux/Mac）所需的简单步骤。随附此食谱书的源代码包只需要解压缩，它包含所有所需的 nodejs 模块。您现在可以直接在浏览器中启动食谱。有关如何执行此操作的详细说明，请参阅源代码包中的Readme.txt文件。

本书适合谁

如果您是一位具有 jQuery/JavaScript 技能的初学者，本书为您提供了大量示例来帮助您入门。

如果您是一位经验丰富的开发者，本书将让您更深入地探索 jQuery Mobile。

约定

在本书中，您将找到一些区分不同信息类型的文本样式。以下是这些样式的一些示例，以及它们的含义解释。

文本中的代码词如下所示：“现在，打开您喜爱的浏览器中的main.html文件，您将看到类似以下截图的输出：”。

代码块设置如下：

<body>
  <!-- Main Page -->
  <div id="main" data-role="page">
    <div data-role="header">
      <h1>Welcome - JS BIN</h1>
    </div>
    <div id="content" data-role="content">
      <p>The jQuery Mobile Cookbook</p>
    </div>
    <div data-role="footer">
      <h4>Enjoy reading the book ...</h4>
    </div>
 </div>
</body>
</html>

当我们希望引起您对代码块的特定部分的注意时，相关的行或项目会以粗体显示：

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/latest
  /jquery.mobile.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com
 /jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest
  /jquery.mobile.js"></script>
<meta name="viewport" content="width=device-width, 
 initial-scale=1">
<title>Welcome using JS Bin</title>
</head>

新术语 和 重要词汇 以粗体显示。您在屏幕上看到的词语，例如菜单或对话框中的词语，会在文本中显示为：“您还可以通过单击使用 JS 运行按钮来手动运行脚本。”

注意

警告或重要说明会显示在如此的框中。

提示

技巧和窍门如此显示。

第一章：入门

在本章中，我们将涵盖以下内容：

编写您的第一个 jQuery Mobile 应用程序
使用 JS Bin 创建一个简单的应用程序

介绍

jQuery Mobile 框架是一个开源的跨平台 UI 框架。它使用 HTML5、CSS3 和非常流行的 jQuery JavaScript 库构建，并遵循开放网络标准。它提供了专为移动设备设计的触摸友好型 UI 小部件。它具有强大的主题框架，可为您的应用程序设置样式。它支持 AJAX 以执行各种任务，如页面导航和过渡效果。

由于 jQuery Mobile 遵循开放网络标准，您可以确保您的应用程序能够在广泛的浏览器和平台上获得最大的支持和兼容性。您只需编写一次应用程序，它就能在 iPhone、iPad、Android 手机和平板电脑、Blackberry、Bada、Windows、Symbian、Meego 甚至即将推出的基于 HTML5 的平台（如 Boot2Gecko 和 Tizen）上无缝运行。同样的代码将在 Chrome、Firefox、Opera、IE、Safari 和桌面上的其他浏览器上运行。此外，它甚至可以在您的智能电视或任何具有与开放网络标准兼容的浏览器的其他设备上运行。市场覆盖潜力是巨大的。

目前认证的支持浏览器、平台和支持等级的列表可在 jQuery Mobile 网站上查看 www.jquerymobile.com/gbs。请注意，某些功能，如 CSS 3D 动画和 AJAX，可能不受某些较老和传统平台的支持。在这种情况下，该框架采用 渐进增强。这意味着最初支持基本功能。以后，当更有能力的未来浏览器或平台可用时，您的应用程序将自动利用其功能并提供升级功能。在大多数情况下，您不需要编写代码或以任何方式干预。与移动原生应用程序相比，这是一个很大的优势。

在编写本机应用程序时，您将不得不使用不同的语言编写代码，这取决于平台。然后，您将不得不为每个平台编译代码，并构建可以在设备上运行的二进制包。升级应用程序以支持下一个版本意味着您必须回过头来重新执行整个检查/修复代码、重新构建和重新打包的过程。随着您为更多平台添加支持，这种额外的工作量会不断增加。在某个点之后，整个过程就变得难以管理。您最好只支持应用程序的前一两个平台。

当然，使用原生应用程序也有优势。你的应用程序的性能可能是一个非常关键的因素。在某些应用程序中，你必须使用原生应用程序，特别是当你期望实时响应时。此外，使用原生应用程序，你可以访问核心操作系统和设备功能，例如摄像头、加速计、联系人和日历。今天使用 HTML5 实现这些并不容易。

HTML5是移动应用程序的一个相对新的参与者。但是差距正在逐渐缩小。已经有库可用，使用简单的 JavaScript API 暴露原生功能，该 API 直接可用于你的 HTML5 应用程序。PhoneGap 就是这样一个流行的库。Firefox 的 Boot2Gecko 和 Intel/Samsung 的 Tizen 完全基于 HTML5，你应该能够直接从浏览器中访问核心设备功能。未来看起来非常有前途。

jQuery Mobile 框架拥有大量的插件和工具，可以帮助您构建应用程序。它拥有一个非常活跃和充满活力的开发者社区，并且不断添加新功能。它受到诸如 Filament Group、Mozilla、Nokia、Palm、Adobe、Rhomobile 等公司的大力支持。在它的第一年（2011 年），该框架已经获得了 Packt 开源奖和.NET 创新奖等奖项。

基于 Web 的移动应用程序已经发展了。在早期，它们使用纯原生代码进行 UI 开发，然后出现了 Flash 和其他基于插件的 UI（例如 Silverlight）。但是，即使是 Adobe 和微软（使用其 Windows 8 平台）也在全力推进 HTML5 开发。因此，情况非常适合像 jQuery Mobile 这样的基于开源 Web 标准的跨平台框架迅猛增长。

jQuery Mobile 框架要求你对大多数基本任务和构建 UI 使用声明性语法（HTML 标记）。你必须仅在声明性语法无法帮助的情况下以及当然要添加你的应用程序逻辑时，才退回到只使用 JavaScript 编写脚本。这与今天市场上的许多其他 UI 框架不同。其他框架要求你编写更多的 JavaScript，并且学习曲线更陡峭。

如果你熟悉 HTML、CSS 和 jQuery/JavaScript，那么学习 jQuery Mobile 将会变得非常容易。有许多流行的 IDE 和 UI 构建工具可供您使用，以便通过可视化拖放 UI 控件并在 jQuery Mobile 中进行开发。但是，要开始，你只需要你喜欢的文本编辑器来编写代码。你还需要一个浏览器（在你的桌面或移动设备上运行）来测试应用程序。现在，你已经准备好编写你的第一个 jQuery Mobile 跨平台应用程序了。

编写你的第一个 jQuery Mobile 应用程序

简单的 jQuery Mobile 应用程序由一个页面组成，这是构建应用程序的基本构建块。页面遵循具有三个主要部分的基本结构，即页眉、页面内容 和页脚。您可以使用多个页面构建功能丰富的应用程序，每个页面具有自己的功能、逻辑和导航流程。此示例展示了如何创建一个页面并编写您的第一个 jQuery Mobile 应用程序。

准备就绪

从 code/01/welcome 文件夹复制此示例的完整代码。您可以使用以下 URL 启动此代码：http://localhost:8080/01/welcome/main.html。

如何做...

执行以下步骤：

使用您喜欢的文本编辑器创建以下 main.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome</title>
    <meta name='viewport' content='width=device-width, 
      initial-scale=1'>

包含 jQuery 和 jQuery Mobile JavaScript 文件：

 <link rel='stylesheet' href='http://code.jquery.com
 /mobile/1.1.1/jquery.mobile-1.1.1.min.css' />
 <script src='http://code.jquery.com/jquery-
 1.7.1.min.js'></script>
 <script src='http://code.jquery.com/mobile
 /1.1.1/jquery.mobile-1.1.1.min.js'></script>
  </head>
  <body>

创建 jQuery Mobile 页面：

    <!-- Main Page -->
 <div id='main' data-role='page'>
      <div data-role='header'>
        <h1>Welcome!</h1>
      </div>
 <div id='content' data-role='content'>
        <p>The jQuery Mobile Cookbook</p>
      </div>
 <div data-role='footer'>
        <h4>Enjoy reading the book ...</h4>
      </div>
    </div>
  </body>
</html>

它是如何工作的...

创建 main.html 作为一个以 <!DOCTYPE html> 声明开始的 HTML5 文档。在文件的 <head> 标签中，添加一个 <meta> 标签，并通过使用 content='width=device-width' 属性指定视口应占用整个设备宽度。通过使用指向 jQuery Mobile 内容交付网络 (CDN) 站点上 CSS 文件位置的 <link> 标签，包含 jQuery Mobile 样式表。

接下来，包含 JavaScript 库；先是 jQuery，然后是 jQuery Mobile JavaScript 文件。使用 <script> 标签，将 src 指向 CDN 位置，如代码所示。现在您已经准备好创建页面了。

页面、其页眉、页脚和内容都是 <div> 容器，通过使用 data-role 属性进行样式设置。在 <body> 标签中添加一个带有 data-role='page' 的 <div> 标签。在页面内作为子元素分别添加三个带有 data-role='header'、'content' 和最后 'footer' 的 <div> 标签。这将分别创建页面的页眉、内容和页脚。您可以在这些 <div> 标签内添加任何文本、表单、列表或其他 HTML 控件。框架将以触摸友好的移动启用样式增强和渲染控件。

现在，使用您喜欢的浏览器打开 main.html 文件，您将看到类似以下截图的输出：

在不同的浏览器、移动设备和平板电脑中打开并比较此文件的输出。您将看到在所有符合规范和认证的浏览器/设备上，页面都会打开并且看起来几乎一样。

恭喜！您刚刚创建了您的第一个跨平台 jQuery Mobile Web 应用程序。

还有更多...

在编写此示例时，jQuery Mobile v1.1.1 是稳定版本，并在本书中的所有示例中使用。建议使用的支持的 jQuery 库是 jQuery v1.7.1。

您可以直接从 jQuery Mobile CDN 使用库，就像本示例中所示的那样。您还可以从 www.jquerymobile.com/download 下载库文件（以单个压缩文件的形式提供），并将文件托管到您的网络中。当本地托管时，您只需更新代码中的链接，以指向文件在您的网络上的正确位置（或您硬盘上的路径），如下面的代码片段所示：

<link rel="stylesheet" href='[local path]/jquery.mobile-
  1.1.1.min.css' />
<script src='[local path]/jquery-1.7.1.min.js'></script>
<script src='[local path]/mobile/1.1.1/jquery.mobile-
  1.1.1.min.js'></script>

页面主题

默认情况下，框架提供了五种基本的颜色方案或组合，称为颜色样本。它们被命名为 a、b、c、d 和 e。默认情况下，创建页面时使用样本 d。这使得页面具有白色和黑色的明亮组合，如前面的屏幕截图所示。您可以通过使用 data-theme 属性来更改页面和页眉/页脚的颜色样本，如以下代码片段所示：

<div data-role='page' data-theme='a'>
  <div data-role='header' data-theme='b'>
….
  <div data-role='footer' data-theme='b'>

输出现在将类似于以下屏幕截图：

另请参阅

使用 JS Bin 创建一个简单应用程序示例
第二章中的编写单页模板应用程序和编写多页模板应用程序示例，页面和对话框

使用 JS Bin 创建一个简单应用程序

JS Bin 是由 Remy Sharp 开发的开源网络应用程序，位于 www.jsbin.com。JS Bin 允许您在线直接输入您的 HTML、CSS 和 JavaScript 代码，并允许您包含所需的 jQuery 和 jQuery Mobile 库。您可以添加和直接运行您的 JavaScript 代码，并在浏览器上预览输出。您还可以共享您的代码，并与他人合作进行审查或故障排除。一切按照预期工作后，您最终可以下载您的代码。这是一个非常受许多 jQuery Mobile 开发人员欢迎的工具。本示例向您展示了如何使用 JS Bin 创建一个简单的 jQuery Mobile 应用程序。

准备就绪

本示例中的代码是使用 JS Bin 网页应用创建的。代码位于 code/01/jsbin 源文件夹中。您可以使用 http://localhost:8080/01/jsbin/main.html URL 启动代码。

如何实现...

打开 JS Bin 网页应用工具，你会看到一个基本的 HTML 模板。

在左上角面板上选择 添加库 链接，并包含最新的 jQuery Mobile 库文件。接下来，编辑 <head> 部分，如以下代码片段所示：

<html>
  <head>
    <link href="http://code.jquery.com/mobile/latest
      /jquery.mobile.css" rel="stylesheet" type="text/css" />
 <script src="http://code.jquery.com
 /jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com
      /mobile/latest/jquery.mobile.js"></script>
 <meta name="viewport" content="width=device-width, 
 initial-scale=1">
 <title>Welcome using JS Bin</title>
  </head>

向 <body> 部分添加代码以创建一个简单的 jQuery Mobile 页面：

  <body>
    <!-- Main Page -->
    <div id="main" data-role="page">
      <div data-role="header">
        <h1>Welcome - JS BIN</h1>
      </div>
      <div id="content" data-role="content">
        <p>The jQuery Mobile Cookbook</p>
      </div>
      <div data-role="footer">
        <h4>Enjoy reading the book ...</h4>
      </div>
    </div>
  </body>
</html>

预览或输出现在显示在屏幕右侧的输出面板中。
您现在可以下载源文件（或将其复制粘贴到本地文件中），以获得一个简单的可工作的 jQuery Mobile 应用程序。

工作原理...

在浏览器中启动 JS Bin Web 应用程序。您将在浏览器中看到以下屏幕，左侧有一个基本的 HTML 模板（您可以编辑），顶部有一个菜单栏，右侧有一个输出窗格，可立即预览代码的输出：

您可以单击各种菜单选项，查看CSS或JavaScript窗格如何可见或隐藏。选择自动运行 JS选项将允许您自动运行您的 JS 代码；您可以将其保留。您也可以通过单击Run with JS按钮手动运行脚本。

单击添加库菜单选项，并选择jQuery Mobile Latest选项，如下截图所示：

这将在 HTML 的<head>部分包含指向 jQuery Mobile 和 jQuery 库的链接和引用。

注意

当您使用 JS Bin 添加 jQuery Mobile 库到您的代码时，请确保编辑并设置要与您的应用程序一起使用的 jQuery Mobile 和 jQuery 库的正确版本。在编写此示例时，JS Bin 使用的是 jQuery v1.6.4，而 jQuery v1.7.1 推荐与 jQuery Mobile v1.1.1 一起使用。

接下来，编辑<meta>标签以设置正确的视口宽度和缩放，如代码所示。然后，使用data-role="page"的div标签向<body>标签添加一个页面。创建标题(data-role="header")、页面内容(data-role="content")和页脚(data-role="footer")，如所示。当您添加这些部分时，您会注意到屏幕右侧的输出窗格会更新，并显示代码的输出预览。

您还可以添加 CSS 样式和 JavaScript，并检查其工作原理。最后，您的代码已准备就绪，您可以将其复制粘贴到本地编辑器中。您还可以点击左上角的JS Bin菜单选项下载文件。现在，启动本地文件在浏览器中，您会发现输出与 JS Bin 的输出窗格中显示的内容相匹配。

还有更多...

这个示例向您展示了使用 JS Bin 创建基本 jQuery Mobile 应用程序所需的简单步骤。JS Bin 提供了许多方便使用的功能，例如创建和使用准备好的模板、使用 GitHub 保存和分叉您的代码以及克隆您的代码。此工具最适合您想要在线存储文件并在源文件上进行协作时使用。有关使用 JS Bin 的更多信息和教程，请参阅jsbin.tumblr.com/。

注意

您可以免费注册并使用您的用户帐户登录 JS Bin 以使用保存、下载或克隆功能。没有用户登录时只提供基本功能。

另请参阅

编写您的第一个 jQuery Mobile 应用程序示例

第二章：页面和对话框

在本章中，我们将讨论：

编写单页模板应用程序
编写多页模板应用程序
预取页面以实现更快的导航
使用 DOM 缓存以提高性能
自定义样式对话框
使用 CSS 创建跳转页面过渡效果
使用 JS 创建幻灯片和淡入淡出的页面过渡效果
使用data-url处理登录页面导航
使用 History API 创建自定义错误弹出框

介绍

一个页面是写在<div data-role="page">容器内的基本 jQuery Mobile 对象，它显示在屏幕上。它可以包含页眉、页面内容和页脚。您可以在页面内嵌入各种 HTML5 控件和微件。jQuery Mobile 框架会自动增强和显示所有这些控件，使它们适合轻触（手指触摸）。您的应用程序可以有一系列单独的 HTML 文件，每个文件代表一个单独的页面，或者可以有一个包含多个页面div容器的单个 HTML 文件。您可以提供链接以在一个页面内打开其他页面，用户点击链接时，新页面将使用 Ajax 和 CSS3 动画打开。当前页面然后不再显示。

一个对话框是具有data-role="dialog"属性的页面。您还可以通过为页面链接添加data-rel="dialog"属性来将页面加载为对话框。对话框的样式与页面不同，并且出现在页面上方的屏幕中间。对话框的标题栏还提供了一个关闭按钮。

编写单页模板应用程序

在单页模板应用程序中，应用程序的每个页面都有自己的 HTML 文件。页面包装在<div data-role="page">内。启动应用程序时，jQuery Mobile 框架将第一页（或主要页面）加载到 DOM 中，并在整个应用程序周期中保留其引用。当用户导航到另一个页面时，主页面仅被隐藏，并且现在标记为活动页面的其他所有页面都会从 DOM 中被删除。页面之间的导航使用锚链接指定。锚链接使用data-role="button"属性装饰为按钮。单击任何链接时，将使用一些精彩的 CSS3 过渡进行导航，并通过 Ajax 拉入新页面。

此示例向您展示如何创建一个单页模板应用程序，并在应用程序的页面之间导航。

准备工作

从code/02/single-page源文件夹中复制此示例的完整代码。您可以使用http://localhost:8080/02/single-page/main.html网址启动此代码。

如何做...

执行以下步骤：

创建main.html，并向其中添加一个包含页眉、页脚和页面内容的页面容器。添加打开page2.html的链接：

<div id="main" data-role="page">
  <div data-role="header">
    <h1>Header of main.html</h1>
  </div>
  <div data-role="content">
 <a href="page2.html" data-role="button">
 Go to Page 2</a>
   </div>
 <div data-role="footer">
   <h4>Footer of main.html</h4>
 </div>
</div>

由于这是一个单页模板应用程序，将每个页面添加到自己的 HTML 文件中。接下来，创建page2.html并将应用程序的第二个页面添加到其中。添加一个链接以返回到main.html。

<div id="page2" data-role="page">
  <div data-role="header">
    <h1>Header of page2.html</h1>
  </div>
  <div data-role="content">
 <a href="#" data-role="button" data-rel="back" 
 data-theme="b">Go Back</a>
  </div>
  <div data-role="footer">
    <h4>Footer of page2.html</h4>
  </div>
</div>

它是如何工作的...

创建main.html，并使用指定了data-role="page"属性的<div>页面容器向其中添加页面。按照代码所示的方式，添加页眉、页脚和页面内容。现在，在页面内容中，添加一个锚链接以打开第二页page2.html。你可以使用data-role="button"属性来将此链接样式化为按钮。

接下来，创建page2.html并使用指定了data-role="page"属性的<div>页面容器向其中添加页面。按照代码清单中所示的方式，添加页眉、页脚和页面内容。在页面内容中，添加一个锚链接以返回到main.html。同时，设置data-role="button"属性来将此链接样式化为按钮。

现在，当你启动应用程序时，main.html页面首先加载到 DOM 中。此页面在整个应用程序的生命周期内保持在 DOM 中。如下图所示：

当你点击按钮打开page2.html时，主页面被隐藏，page2.html被显示并激活，如下图所示：

现在，点击链接返回到main.html。浏览器再次打开main.html页面并隐藏page2.html。

在page2.html中，锚按钮具有data-rel="back"属性。这表示应该加载浏览器历史记录中的上一个页面。href链接将被忽略，因此可以将其设置为#。

提示

为单页模板应用程序设置标题

使用<title>标签为单页应用的每个页面设置页面标题。这样可以确保在浏览应用程序的各个页面时显示相关的标题。

还有更多...

推荐大多数应用程序使用单页模板，原因如下：

页面更轻量、更干净、更模块化，因此更易于维护。
DOM 大小相对较小。
页面在多个平台和环境下工作良好。它们即使在不支持 JavaScript 的情况下也可以工作。这样可以使你的应用程序能够覆盖更多设备。

另一方面：

每次访问页面时都会生成一个新的请求，这会消耗更多的带宽。
再次打开先前加载的页面将生成一个全新的请求。
第一次加载更快，但随后每个页面都必须被获取。

总之，单页模板应用程序更适合于较大的应用程序以及希望覆盖尽可能多平台的情况。

关闭 Ajax 导航

在此示例中，在#page2中，href值设置为#。如果您将href值设置为页面的绝对或相对 URL，即href="main.html"，那么 Ajax 导航仍将工作。要防止通过 Ajax 加载页面，请将data-ajax="false"属性添加到链接中。当关闭 Ajax 时，框架将不使用自定义 CSS3 过渡。

<a href="page2.html" data-role="button" data-ajax="false">text</a>

提示

使用 URL 而不是data-rel="back"

在单页应用程序中导航时，最好始终在锚链接的href中使用 URL。这样，Ajax 导航将在支持 Ajax 的情况下工作。在不支持 Ajax 的 C 级浏览器中，应用程序仍将继续工作，因为它使用href进行导航。在这样的浏览器中，如果您的应用程序仅依赖于data-rel="back"属性，而不使用href，那么页面导航将中断。

使用`data-rel`和`data-direction`

当您同时向锚链接添加href和data-rel="back"属性时，框架将忽略href属性。页面将仅考虑data-rel属性并导航“返回”; 也就是说，它将导航到浏览器历史堆栈中作为前一个条目的页面。如果指定了data-direction="reverse"属性，则框架将反转最近使用的页面转换的方向。data-direction属性不依赖于data-rel属性，并且可以在任何转换中独立使用。

<a href="page2.html" data-role="button" 
    data-direction="reverse">text</a>

页面容器是可选的

在单页模板应用程序中，指定<div data-role="page">页面容器是可选的。页面内容将由 jQuery Mobile 框架自动包装为页面容器。

注意

始终使用div页面容器来包装您的页面。这样做更易读，更易维护代码。它还允许您向页面添加特定于页面的数据属性，例如data-theme。

另请参阅

编写多页模板应用、为了更快的导航而预取页面和使用 DOM 缓存来提高性能的技巧
编写您的第一个 jQuery Mobile 应用程序在第一章，介绍

编写多页模板应用

在多页面模板应用程序中，HTML 文件将包含多个页面。每个页面都包装在 <div data-role="page"> 中。页面 ID 用于标识页面以便在它们上面进行链接或调用任何操作。页面 ID 在你的应用程序中必须是唯一的。当你启动应用程序时，jQuery Mobile 框架会将所有可用页面加载到 DOM 中，并显示在 HTML 中找到的第一个页面。页面之间的导航通过使用锚链接指定，并且你可以通过使用 data-role="button" 属性将这些链接装饰为按钮。单击任何链接时，导航通过一些很酷的 CSS3 过渡发生，并且通过 Ajax 拉入新页面。本配方向你展示如何创建一个多页面模板应用程序，并在其中多个页面之间导航。

准备工作

从code/02/multi-page源文件夹中复制此配方的完整代码。你可以使用 URL http://localhost:8080/02/multi-page/main.html 启动此代码。

如何做...

执行以下步骤：

创建 main.html，并向其添加 #main 页面。按照以下代码片段中所示的方式定义页眉、页面内容和页脚。在页面内容中添加一个链接来打开 #page2 页面：

<div id="main" data-role="page">
  <div data-role="header">
    <h1>Header of #main</h1>
  </div>
  <div data-role="content">
 <a href="#page2" data-role="button">Go to Page 2</a>
  </div>
  <div data-role="footer">
    <h4>Footer of #main Page</h4>
  </div>
</div>

接下来，在 main.html 中，如下所示地在其自己的页面 div 容器中添加第二个 #page2 页面。向此页面添加页眉、页面内容和页脚。最后，在页面内容中添加一个链接以返回 #main 页面：
```
<div id="page2" data-role="page" data-title="Multi-Page Template">
  <div data-role="header">
    <h1>Header of #page2</h1>
  </div>
  <div data-role="content">
 <a href="#" data-role="button" data-rel="back" data-theme="b">Go Back</a>
  </div>
  <div data-role="footer">
    <h4>Footer of #page2</h4>
  </div>
</div>
```
提示

下载示例代码

你可以从你在www.PacktPub.com账户购买的所有 Packt 书籍中下载示例代码文件。如果你在其他地方购买了这本书，你可以访问www.PacktPub.com/support并注册，直接将文件通过电子邮件发送给你。

工作原理...

创建main.html，并向其添加两个页面，#main 和 #page2。首先，使用指定了 data-role="page" 属性的 <div> 页面容器添加 #main 页面。按照代码中所示的方式添加页眉、页脚和页面内容。现在，添加一个锚链接到页面内容，以打开第二个页面 #page2。你可以通过使用 data-role="button" 属性将此链接样式化为按钮。

接下来，使用指定了 data-role="page" 属性的 <div> 页面容器添加 #page2 页面。按照代码列表中所示的方式向其添加页眉、页脚和页面内容。在这里，页面内容中添加了回到 #main 页面的锚链接。设置 data-role="button" 属性将其样式化为按钮。还将 data-rel="back" 属性添加到其中。这指示 jQuery Mobile 框架，此链接应打开浏览器历史记录中可用的上一页。

现在，当你启动应用时，所有页面都加载到 DOM 中，并在整个应用的生命周期内保留在 DOM 中。框架将打开它找到的第一个页面。所以，#main显示有一个按钮可以打开#page2，如下所示：

当你点击按钮打开第二个页面时，#main页面会从视图中隐藏，而#page2页面会显示并激活，如下所示：

最后，点击链接返回#main页面。由于使用了data-rel="back"，浏览器会再次打开#main页面并隐藏#page2。

提示

为多页面模板应用设置标题

使用<title>标签为多页面模板应用的第一个或主要页面设置页面标题。使用data-title属性为所有其他页面设置标题。这将确保每个页面显示正确的标题。

还有...

在使用多页面模板构建应用之前，建议考虑以下因素：

多页面模板应用由于 DOM 尺寸较大而更加沉重。
由于所有页面都预加载到 DOM 中，因此 DOM 尺寸较大且更沉重。
应用需要 JavaScript 支持。这会限制你的目标平台选择，并且你可能需要忽略许多流行的旧平台。但随着老旧电话/平台逐渐淘汰，这个排除列表正在变得越来越短。

此外：

只有第一次页面加载较慢，但后续的页面导航都很快。
所有页面都预加载到 DOM 中，因此后续页面导航不需要新请求（到服务器）。这意味着更少的带宽。

总之，多页面模板应用更适合相对较小的应用和你知道目标平台能力（包括 JavaScript 支持）的情况。

注意

jQuery Mobile 支持的浏览器和平台的更新列表可在www.jquerymobile.com/gbs找到。它还详细说明了这些平台上提供的支持等级。

使用过渡效果

data-transition属性可用于指定 jQuery Mobile 默认可用的各种过渡效果。下面的代码使用了翻转过渡效果来打开#page2：

<a href="#page2" data-transition="flip" data-role="button">text</a>

关闭 Ajax 导航

如果在加载多模板应用中的页面时传递了data-ajax="false"属性，则这并不完全停止了 Ajax 导航。无论data-transition属性中指定的过渡效果如何，都将使用默认的淡入淡出过渡效果来加载页面。

<a href="#page2" data-ajax="false" data-role="button">text</a>

页面容器是必须的

对于多页面模板应用内的所有页面，指定<div data-role="page">页面容器是必需的。无论是单页面模板还是多页面模板，都使用页面容器来制作你的应用和所有页面。

另请参见

编写单页模板应用程序、为了更快地导航而预取页面和使用 DOM 缓存来提高性能的配方
编写您的第一个 jQuery Mobile 应用程序在第一章中的介绍中的配方

为了更快地导航而预取页面

使用单页模板制作移动应用程序使您的移动应用程序更快、更轻便。但是在导航期间必须获取每个页面。每次加载页面时，您都可以看到ui-loader旋转图标。这个问题在多页模板应用程序中不会发生，因为所有页面都已经预加载到 DOM 中。通过使用预取功能，可以使单页模板应用程序模仿多页模板应用程序。

预取的页面在后台加载，并在用户尝试打开它时立即可用。可以通过两种方式预取页面。第一种是只需将data-prefetch属性添加到锚链接。第二种方式是使用 JavaScript 调用loadPage()方法。本配方向您展示如何通过在您的 jQuery Mobile 应用程序中预取页面来提高页面加载速度。

准备工作

从code/02/prefetch源文件夹中复制此配方的完整代码。您可以使用 URL http://localhost:8080/02/prefetch/main.html来启动此代码。

如何操作...

应该遵循的步骤是：

创建main.html并向其添加两个链接。第一个链接指向prefetch.html，第二个链接指向prefetch-JS.html。在加载main.html文件后，其中的链接页面可以使用第一个链接上的data-prefetch属性在后台预取，如以下代码片段所示：

<div id="main" data-role="page">
  <div data-role="header">
    <h1>Header of Main Page</h1>
  </div>
  <div data-role="content">
 <a href="prefetch.html" data-role="button" 
 data-prefetch>Prefetch Page</a> 
    <a href="prefetch-JS.html" data-role="button">
        Prefetch Page using JS</a>
  </div>
  <div data-role="footer">
    <h4>Footer of Main Page</h4>
  </div>
</div>

接下来，将以下代码片段中给出的 JavaScript 添加到main.html的<head>部分。在这里，使用loadPage()方法将prefetch-JS.html文件后台加载到 DOM 中：
```
  $("#main").live("pageshow", function(event, data) {
 $.mobile.loadPage( "prefetch-JS.html", 
 { showLoadMsg: false } );
  });
</script>
```

现在，按照以下代码片段所示创建prefetch.html文件。这是一个常规页面，通过data-prefetch属性在main.html页面（在步骤 1 中）中预取。还要添加一个链接以返回到main.html：

<div id="prefetch" data-role="page">
  <div data-role="header">
    <h1>Header of Prefetched Page</h1>
  </div>
  <div data-role="content">
    <a href="#" data-role="button" data-rel="back" 
        data-theme="b">Go Back</a>
  </div>
  <div data-role="footer">
    <h4>Footer of Prefetched Page</h4>
  </div>
</div>

你会看到在第 2 步中，使用 JavaScript 预取了prefetchJS.html。现在，按照以下代码片段所示创建prefetchJS.html，并添加一个链接以返回到main.html：

<div id="jsprefetch" data-role="page">
  <div data-role="header">
    <h1>Header of JS Prefetched Page</h1>
  </div>
  <div data-role="content">
    <a href="#" data-role="button" data-rel="back" 
        data-theme="b">Go Back</a>
  </div>
  <div data-role="footer">
    <h4>Footer of JS Prefetched Page</h4>
  </div>
</div>

工作原理...

创建main.html，并向其添加两个链接。将第一个链接指向prefetch.html，并将data-prefetch属性设置为此链接。此页面现在在main.html加载时会自动在后台获取，并在打开main.html时立即可用。

将第二个链接指向prefetch-JS.html文件。要使用 JavaScript 预取此页面，请为#main的pageshow事件添加事件处理程序。在此回调函数中，调用loadPage()方法以获取prefetch-JS.html文件。还设置showLoadMsg选项为false，以防止显示旋转的页面 ui-loader消息。接下来，按照代码中所示创建两个 HTML 文件。在这两个页面中都添加返回到main.html的链接。

现在，当您启动应用程序时，两个 HTML 文件都会被预取。您可以使用浏览器的代码检查器观察此预取行为，如下面的截图所示：

此截图显示了在加载main.html页面后的 Google Chrome 浏览器中的代码检查器。我们可以看到#prefetch和#jsprefetch页面已经被预取并在 DOM 中可用。现在，导航到这些预取页面几乎是即时的，旋转的ui-loader图标动画不会显示出来。这使得您的应用程序速度更快，并为用户提供了更好的用户体验。如果没有使用预取，只有在导航到它时才会加载页面。

使用data-prefetch属性是预取页面的更简单方法，因为您不必再写任何代码。但是，使用loadPage()用 JavaScript 预取页面允许您向loadPage()方法提供更多选项，并更好地控制页面加载的行为。您还可以使用此方法构建有条件的预取。

还有更多...

避免在太多页面上使用预取，因为所有页面都必须被获取并存储在 DOM 中。这意味着更多的内存利用率，而内存在移动设备上是一种稀缺资源。这会减慢您的应用程序。预取的页面越多，意味着利用的带宽越多。因此，请谨慎使用。

当预取未完成时

如果页面尚未完全预取，并且您尝试导航到该页面，则ui-loader旋转器将出现，并且只有在页面完全获取后才会显示该页面。这可能发生在较慢的连接上。

预取的页面不会永久缓存

当页面被预取时，它会在 DOM 中可用。如果您导航到此页面，然后再次导航，该页面将自动从 DOM 中删除。因此，如果它是一个频繁访问的页面，您必须将其添加到 DOM 缓存中。

请参阅

使用 DOM 缓存来提高性能 配方
在第九章方法和实用程序中的使用 loadPage()加载页面 配方

使用 DOM 缓存来提高性能

在单页模板应用程序中的页面导航期间，每个新页面都会被提取并存储在 DOM 中。该页面留在 DOM 中，并在您从该页面导航离开时被删除。只有应用程序的主页面或第一个页面始终留在 DOM 中。如前面的示例所示，预取常用页面可能在一定程度上有助于提高性能。但是当您访问一个预取的页面并从中导航离开时，该页面将从缓存中移除。因此，频繁访问页面的多次提取问题并未完全解决。

使用 DOM 缓存，特定页面会在 DOM 中标记为缓存。这些页面一旦加载，就会在应用程序的整个生命周期内保留在 DOM 中。你可以以两种方式使用 DOM 缓存。第一种是通过向要缓存的页面的页面容器添加data-dom-cache属性。第二种方式是使用 JavaScript。本教程向你展示如何通过使用 DOM 缓存来提高应用程序的性能。

准备工作

从code/02/dom-cache源文件夹复制此教程的完整代码。您可以使用 URL http://localhost:8080/02/dom-cache/main.html启动此代码。

如何实现...

需要遵循的步骤包括：

创建main.html文件，并添加链接以导航到两个页面，cached.html和cached-JS.html。而这两个页面又指定它们在 DOM 中应该被缓存：

<div id="main" data-role="page">
  <div data-role="header">
    <h1>Header of Main Page</h1>
  </div>
  <div data-role="content">
    <a href="cached.html" data-role="button">
      Cached Page
    </a>
    <a href="cached-JS.html" data-role="button">
      JS Cached Page
    </a>
  </div>
  <div data-role="footer">
    <h4>Footer of Main Page</h4>
  </div>
</div>

创建cached.html页面，并将其页面容器的data-dom-cache属性设置为 true。还添加一个按钮以返回到main.html页面：

<div id="cached" data-role="page" data-dom-cache="true">
  <div data-role="header">
    <h1>Header of Cached Page</h1>
  </div>
  <div data-role="content">
    <a href="#" data-role="button" data-rel="back">
      Go Back
    </a>
  </div>
  <div data-role="footer">
    <h4>Footer of Cached Page</h4>
  </div
</div>

最后，创建cached-JS.html文件，并通过添加到页面的div容器的 JavaScript 来将其缓存，如下面的代码段所示。添加一个按钮以导航回到main.html：

<div id="jscached" data-role="page">
  <script>
 $("#jscached").page({ domCache: true });
  </script>

  <div data-role="header">
    <h1>Header of JS Cached Page</h1>
  </div>
  <div data-role="content">
    <a href="#" data-role="button" data-rel="back">
      Go Back
    </a>
  </div>
  <div data-role="footer">
    <h4>Footer of JS Cached Page</h4>
  </div
</div>

工作原理...

创建main.html并添加两个链接，以打开cached.html和cached-JS.html文件。接下来，创建cached.html文件，并添加一个返回main.html的链接。在这里，将data-dom-cache="true"属性设置为页面容器。这表示页面在加载后必须在 DOM 中缓存。

现在创建cached-JS.html文件，并添加返回到main.html的链接。在这里，将给定的脚本添加到页面的div容器中。在脚本中，将页面的domCache选项设置为true。现在，当加载此页面时，它将被缓存在 DOM 中。

启动应用程序并在页面之间导航。在页面导航期间，每个新页面都会被提取并存储在 DOM 中。您可以使用浏览器的代码检查器观察 DOM 缓存的行为。以下图片显示了 Chrome 代码检查器快照，显示了两个页面都被访问并在 DOM 中被缓存后的情况。当前活动的页面显示为#main；这通过将ui-page-active类添加到页面的div容器来指示。其他两个页面也被缓存，并且在 DOM 中也是可用的。

提示

将脚本添加到页面的 div 而不是元素

当使用 Ajax 导航时，<head>部分仅在第一个页面或应用程序的主页面上处理。忽略了其余页面的<head>元素，仅处理它们页面的div容器。因此，为了确保您的脚本在这些页面中执行，您必须在页面的div容器内包含<script>标签。

还有更多...

如果你想缓存应用程序中曾经访问过的所有页面，那么在每个页面中添加缓存选项将变得很麻烦。有一种方法可以使用 JavaScript 在全局范围内执行此操作。将以下脚本添加到主页的<head>部分。现在，每次访问的页面都会自动在 DOM 中缓存起来。

<script>
 $.mobile.page.prototype.options.domCache = true;
</script>

DOM 缓存可能会减慢应用程序的运行速度

在 DOM 中缓存大量页面可能会使您的应用程序变得非常笨重，并减慢其运行速度。在这种情况下，您将不得不编写额外的代码来管理 DOM 中缓存的页面，并执行任何所需的清理操作。因此，只在选定的频繁访问页面上使用 DOM 缓存。

另请参阅

预取页面以加快导航速度 示例

自定义对话框样式

你可以通过在页面容器上使用data-role="dialog"属性来将页面样式化为对话框。您还可以在用于打开页面的锚链接中指定data-rel="dialog"属性。页面现在会被样式化为对话框，并以弹出过渡方式打开。当您向对话框添加标题时，默认情况下，关闭图标会在标题的左侧创建。在某些应用程序/平台中，您可能希望将此关闭按钮定位在标题的右侧。没有现成的选项可用来更改此图标的位置。本示例向您展示了如何构建一个具有自定义样式标题的对话框，以将关闭按钮定位在标题的右侧。

准备工作

从code/02/custom-dialog源文件夹中复制此示例的完整代码。你可以使用网址http://localhost:8080/02/custom-dialog/main.html来运行此代码。

如何操作...

需要执行的步骤是：

使用#main页面创建main.html。在这里添加一个链接，以使用data-rel="dialog"属性将#customdialog页面作为对话框打开：

<div id="main" data-role="page">
  <div data-role="header">
    <h1>Header of Main Page</h1>
  </div>
  <div data-role="content">
 <a href="#customdialog" data-role="button" 
 data-rel="dialog">Open Custom Dialog</a>
  </div>
  <div data-role="footer">
    <h4>Footer of Main Page</h4>
  </div>
</div>

在main.html中创建#customdialog页面，并将自定义标题添加到对话框中，将关闭按钮定位在标题的右侧。在此代码中阻止了默认标题的增强功能：

<div id="customdialog" data-role="page">  
 <div class="ui-corner-top ui-overlay-shadow ui-header ui-bar-a" 
 role="banner">
 <a href="#main" data-icon="delete" data-iconpos="notext" 
 class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-
 all ui-shadow ui-btn-up-a" title="Close" data-theme="a" data-
 transition="pop" data-direction="reverse">
      <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Close</span>
 <span class="ui-icon ui-icon-delete ui-icon-shadow"></span>
      </span>
    </a>
    <h1 class="ui-title" tabindex="0" role="heading" 
        aria-level="1">Custom Dialog</h1>
  </div>

最后，添加页面内容并添加一个链接，以返回到#main页面：

  <div data-role="content">
    <a href="#" data-role="button" data-rel="back" 
        data-theme="b">Go Back</a>
  </div>
  <div data-role="footer">
    <h4>Footer of Dialog</h4>
  </div>
</div>

工作原理...

创建包含两个页面#main和#customdialog的main.html。在#main页面中添加一个链接，以设置data-rel="dialog"属性打开#customdialog页面作为对话框。接下来，创建#customdialog页面，并添加一个按钮返回#main页面。现在，在#customdialog的标题中，不要使用data-role="header"属性。这将防止对话框标题使用默认样式进行增强。关闭图标现在不会放置在标题的左侧。现在，可以添加自定义标题并对其进行自定义样式设置，就像之前的代码清单中所示。启动应用程序并打开对话框，您将看到对话框弹出。此对话框现在具有自定义样式的标题，并且关闭图标位于标题的右侧，如以下屏幕截图所示：

要了解如何得到自定义样式，首先创建一个打开常规对话框的页面。使用浏览器的代码检查器，并观察 jQuery Mobile 框架对对话框标题所做的代码增强。将生成的代码“原样”复制到自定义对话框代码中。然后，必须进行以下各节中提到的更改。

第一个更改是修复关闭图标的位置。您会看到使用添加到标题代码中的锚链接执行关闭操作。在这里，将ui-btn-left类替换为ui-btn-right类。这将使图标在标题中右侧位置。jquery.mobile.css文件中已经包含了这些类定义。

通过此更改，现在关闭图标同时出现在标题的左侧和右侧位置。这是因为标题仍然具有data-role="header"属性。这使得框架增强整个标题并自动在左侧添加关闭图标。但是，由于您已经手动添加了所有这些生成的类，现在可以安全地从代码中删除data-role="header"属性。保留您添加的所有其他代码和类。现在，当您启动代码时，您只会看到标题右侧位置上的单个关闭图标。

还有更多...

此技术非常重要。它可用于自定义 jQuery Mobile 应用程序的外观和感觉。该框架提供了许多基本选项、元素和属性，可以添加到您的应用程序中。然后，框架通过在内部添加更多的标记代码和样式来增强这些内容，使其在您的浏览器中看起来很好。增强的代码在浏览器的查看源代码选项中是不可见的。但是，通过代码检查器或调试工具，您可以查看增强的代码，将其复制到您的 HTML 文件中，进行调整，获得您想要的结果。以下屏幕截图显示了使用此方法创建的自定义对话框标题的代码检查器视图：

自定义 CSS

对话框页面可以通过在自定义 CSS 文件中引入自己的样式来进一步增强。检查jquery.mobile.css文件中所有包含ui-dialog的类。将要调整的样式复制到您的自定义 CSS 中，并设置适当的新值。下面的代码行显示了一个示例更改，其中将对话框的顶部边距设置为 -12px，而不是默认值 -15px：

.ui-dialog { margin-top: -12px; };

另请参阅

在第三章中的向标题添加自定义圆形按钮配方中，工具栏

使用 CSS 创建弹跳页面过渡

当您在应用程序的各个页面之间导航时，jQuery Mobile 框架使用 CSS3 动画来显示一些很酷的过渡效果。 淡入淡出 过渡默认用于页面，弹出过渡用于对话框。您可以使用特定过渡导航到页面，并且在导航出页面时，您可以反转过渡的方向。截至 v1.1.1 版，jQuery Mobile 自带一套默认的 10 个过渡效果。jQuery Mobile 在线文档中有一个漂亮的在线演示，显示了所有可用的过渡效果。但这还不是全部；您可以使用 CSS 创建自己的自定义过渡效果，并在应用程序中使用它们。此配方向您展示如何使用 CSS 并在页面过渡期间创建弹跳页面效果。

准备工作

从code/02/custom-css-transition源文件夹中复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/02/custom-css-transition/main.html启动此代码。

如何做…

应遵循的步骤是：

创建customtransition.css文件，并按以下代码片段所示定义bounceup自定义转换。在 CSS 中对页面的 Y 位置属性进行动画处理：

.bounceup.in, .bounceup.in.reverse {
  -webkit-transform: translateY(0) ;
 -webkit-animation-name: bounceupin;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing: cubic-bezier(0.1, 0.2, 0.8, 0.9);	    
}
@-webkit-keyframes bounceupin {
  0% { -webkit-transform: translateY(100%); }
  90% { -webkit-transform: translateY(-10%); }
  100% {-webkit-transform: translateY(0); }
}

定义下一个反向动画：

.bounceup.out, .bounceup.out.reverse {
  -webkit-transform: translateY(100%);
 -webkit-animation-name: bounceupout;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing: cubic-bezier(0.1, 0.2, 0.8, 0.9);
}
@-webkit-keyframes bounceupout {
  0% { -webkit-transform: translateY(0); }
  90% { -webkit-transform: translateY(110%); }
  100% {-webkit-transform: translateY(100%); }
}

创建main.html并在其<head>部分中包含对customtransition.css样式表的引用，如下所示：

<meta name="viewport" content="width=device-width, 
  initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com
  /mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
<link rel="stylesheet" href="customtransition.css" />
<script src="img/jquery-1.7.1.min.js">
</script>
<script src="http://code.jquery.com/mobile
  /1.1.1/jquery.mobile-1.1.1.min.js"></script>

创建一个带有打开#page2链接的#main页面。将之前定义的bounceup自定义转换设置为data-transition属性：

<div id="main" data-role="page">
  <div data-role="header">
    <h1>Header of Main Page</h1>
  </div>
  <div data-role="content">
 <a href="#page2" data-role="button" 
 data-transition="bounceup">Go to Page 2</a>
  </div>
  <div data-role="footer">
    <h4>Footer of Main Page</h4>
  </div>
</div>

最后，创建一个带有链接返回#main页面的#page2页面：

<div id="page2" data-role="page" data-title="Custom 
  Transition using CSS">
  <div data-role="header">
    <h1>Header of Page 2</h1>
  </div>
  <div data-role="content">
    <a href="#" data-role="button" data-rel="back" 
        data-theme="b">Go Back</a>
  </div>
  <div data-role="footer">
    <h4>Footer of Page 2</h4>
  </div>
</div>

它是如何工作的…

创建customtransition.css文件并定义自定义bounceup转换。首先，定义.bounceup.in和.bounceup.in.reverse类，两者具有相同的值。这将使进入新页面和离开新页面（反向）的转换看起来类似。在类中，使用translateY属性设置屏幕上新页面的 Y 坐标或垂直位置。在给定的持续时间内，使用立方贝塞尔动画曲线对该属性进行动画处理 1 秒。接下来，定义动画Y坐标的关键帧（这是使用bounceupin动画名称指定的）。关键帧定义了动画中各个时刻的 Y 值。

您可以使用一个简单的技巧来获得此动画中使用的弹跳效果。将Y的值设置为超出屏幕的 90％持续时间，然后将其设置为 100％持续时间或动画完成时的屏幕边缘。这使得它在新页面动画到屏幕时具有整洁的弹跳效果，短暂地延伸出屏幕，然后回到正确的位置。类似地，当页面导航到屏幕外时，为当前页面定义.bounceup.out和.bounceup.out.reverse动画，如代码所示。

现在，创建main.html，并在jquery.mobile.css文件包含之后，在其<head>部分包含 CSS 文件。创建#main页面，并使用data-transition="bounceup"属性添加一个链接以打开#page2页面，并使用自定义转换。最后，创建#page2页面，并添加一个链接以返回#main页面。现在，当你启动应用程序并单击按钮时，页面导航将发生，使用一个漂亮的自定义弹跳动画。

在页面转换期间，有一个from页面和一个to页面。jQuery Mobile 在 from 页面（当前页面）上应用out类样式，并在to页面（新页面）上应用in类样式。如果要支持反向转换，则在in和out类后缀中添加单词reverse，如 CSS 文件中所示。使用这些样式，jQuery Mobile 将在页面上应用正确的转换效果。您可以进一步调整此配方中的代码，并通过 CSS 动画进行更多页面动画的探索。您可以尽情发挥创意！

还有更多...

此配方中列出的 CSS 样式仅支持 web kit 浏览器（Chrome 和 Safari）。您可以进一步探索并尝试在其他浏览器上运行，如 IE、Firefox 或 Opera。您将需要为 CSS 属性添加供应商特定前缀。此外，浏览器应能够支持使用的 CSS 属性。流行浏览器所需的供应商前缀如下所示：

Chrome 和 Safari：–webkit
Opera：–o
Firefox: –moz
IE：–ms

向`customtransition.css`文件添加供应商前缀

要为其他浏览器增加支持，您将需要扩展此配方中提供的customtransition.css文件。您可以通过添加属性的供应商前缀来执行此操作，如下所示：

.bounceup.in, .bounceup.in.reverse {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translate(0)
  -o-transform: translate(0)
  transform: translate(0)

  -webkit-animation-name: bounceupin;
  -moz-animation-name: bounceupin;
  -ms-animation-name: bounceupin;
  -o-animation-name: bounceupin;
  animation-name: bounceupin;
}

对于代码中列出的具有–webkit前缀的所有指定 CSS 属性，都必须执行此操作。

提示

各种浏览器中的CSS3 动画支持

支持 CSS3 动画所需的最低浏览器版本是桌面上的 Chrome、Firefox 5.0、IE 10、Safari 4.0 和 Android 浏览器 4、Firefox 移动版 5.0 以及移动端的 Safari 移动版（iOS 2）。

当 CSS3 属性成为标准时

在上述 CSS 中，每个属性的最后一行是它变成标准后的属性名。在这一点上，浏览器将不再支持特定属性的供应商前缀。但是您不必修改 CSS 中的任何一行代码，因为标准属性已经在您的文件中可用。浏览器将跳过它不理解的所有属性，并拾取标准属性。所以一切都会正常工作。

渐进增强

你会注意到，此处的过渡动画在某些浏览器上不会正常工作。但是页面导航的基本功能在任何地方都能正常工作。截至撰写本文时，对 CSS3 动画的最佳支持是由 Webkit 浏览器提供的。但是 CSS3 的美妙之处在于，随着浏览器的不断改进和用户设备的升级，用户将自动获得更好的应用体验。您不必修改任何代码或发布任何升级版本。这就是所谓的渐进增强。使用 jQuery Mobile 意味着您的代码已经使用了渐进增强。如果您的应用是原生编写的，这将不会那么容易。

另请参阅

使用 JS 创建幻灯片和淡入淡出页面过渡配方
在第七章配置中的 配置默认过渡效果 配方

使用 JS 创建幻灯片和淡入淡出页面过渡

在上一个配方中，您学会了如何使用 CSS 为您的 jQuery Mobile 应用添加自定义过渡。您也可以使用 JavaScript 创建自定义过渡。本配方向您展示如何使用 JavaScript 在应用程序中的页面过渡期间创建“slidefade”（滑动和淡入淡出）效果。

准备工作

从code/02/custom-js-transition源文件夹复制此处配方的完整代码。您可以使用 URL http://localhost:8080/02/custom-js-transition/main.html 启动此代码。

如何做...

执行以下步骤：

创建customtransition.js JavaScript 文件，并通过添加一个mycustomTransition()方法来定义您的自定义过渡，如下面的代码片段所示。在此处，定义from和to页面在过渡期间应如何动画显示：

function mycustomTransition( name, reverse, $to, $from ) {
    var deferred = new $.Deferred();
    // Define your custom animation here
    $to.width("0");
    $to.height("0");
    $to.show();
    $from.animate(
        { width: "0", height: "0", opacity: "0" },
        { duration: 750 },
        { easing: 'easein' }
    );
    $to.animate(
        { width: "100%", height: "100%", opacity: "1" },
        { duration: 750 },
        { easing: 'easein' }
    );

接下来，使用直接从jquery.mobile.js文件复制的标准模板来完成过渡函数定义：

// Standard template from jQuery Mobile JS file
reverseClass = reverse ? " reverse" : "";
viewportClass 
  = "ui-mobile-viewport-transitioning viewport-" + name;
$to.add( $from ).removeClass( "out in reverse " + name );
if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
  $from.removeClass( $.mobile.activePageClass );
}
$to.parent().removeClass( viewportClass );
deferred.resolve( name, reverse, $to, $from );
$to.parent().addClass( viewportClass );
if ( $from ) {
  $from.addClass( name + " out" + reverseClass );
}
$to.addClass( $.mobile.activePageClass + " " + name 
  + " in" + reverseClass );

return deferred.promise();
}

最后，使用 jQuery Mobile 框架注册名为slidefade的自定义过渡：

// Register the custom transition
$.mobile.transitionHandlers["slidefade"] = mycustomTransition;

接下来，创建main.html文件，并在<head>部分包含customtransition.js文件：

<meta name="viewport" content="width=device-width, 
  initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com
  /mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="img/jquery-1.7.1.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.1
  /jquery.mobile-1.1.1.min.js"></script>
<script src="img/customtransition.js"></script>

定义#main页面，并包含一个链接以打开#page2。使用带有data-transition属性的自定义slidefade过渡：

<div id="main" data-role="page">
  <div data-role="header">
    <h1>Header of Main Page</h1>
  </div>
  <div data-role="content">
 <a href="#page2" data-role="button" 
 data-transition="slidefade" data-theme="b">Go to Page 2</a>
  </div>
  <div data-role="footer">
    <h4>Footer of Main Page</h4>
  </div>
</div>

最后，使用一个链接定义#page2页面，以返回#main页面：

<div id="page2" data-role="page" data-title="Custom Transition using JS">
  <div data-role="header">
    <h1>Header of Page 2</h1>
  </div>
  <div data-role="content">
    <a href="#" data-role="button" data-rel="back" 
        data-theme="b">Go Back</a>
  </div>
  <div data-role="footer">
    <h4>Footer of Page 2</h4>
  </div>
</div>

工作原理...

创建customtransition.js文件并定义mycustomTransition函数。在这里，首先创建一个 jQuery$.Deferred对象。然后，编写自定义转换代码。将目标页面的初始宽度和高度设置为零。通过调用show()函数使其可见。接下来，定义to和from页面（from 页面是当前页面）的动画。

注意

jQuery 的$.Deferred对象可用于注册和调用多个同步或异步回调，然后返回它们的结果。您可以在api.jquery.com/category/deferred-object/了解更多关于此功能及其提供的方法。

调用animate()函数并设置选项，如动画的宽度、高度、不透明度、持续时间以及动画曲线，如代码清单所示。设置数值，使得起始页面在指定持续时间内以宽度和不透明度为零进行动画。这将慢慢隐藏页面并将其向左滑动。同样，动画目标页面，使得在给定的持续时间内，宽度、高度和不透明度从零达到 100%。目标页面从左边淡入，占据整个屏幕。现在，这两个动画同时发生，给过渡带来了良好的最终结果。

转换完成后，代码必须确保正确页面设置为活动页面。您可以直接从jquery.mobile.js文件中的标准模板中复制此代码片段和框架所需的其他默认操作。现在，一旦转换完成，调用deferred.resolve()函数。还要从转换处理程序返回延迟对象的承诺。

最后，您应该使用slidefade名称将自定义转换处理程序注册到框架中。这将确保当您在data-transition属性中指定slidefade转换名称时，将从$.mobile.transitionHandlers目录中选择并使用正确的转换。

创建main.html并在<head>部分包含customtransition.js文件。定义#main页面，其中包含使用data-transition="slidefade"属性打开#page2的链接，如代码所示。还要定义#page2，其中包含返回#main页面的链接。您不必在#page2中设置转换，因为 JavaScript 已经处理了反向动画。启动您的应用程序，并在页面之间导航时，您将看到新页面滑入，同时当前页面淡出，为您提供自定义滑动和淡出过渡效果。再考虑一下，也许"滑动和收缩"会是这个转换的更好名称。

还有更多...

如果您在应用程序中定义了自定义过渡并在大多数页面导航中使用它，那么可以直接将此自定义过渡设置为所有页面使用的默认过渡。这样，就不需要在每个链接中指定 data-transition 属性。这在 customtransition.js 文件中指定。在注册自定义过渡处理程序之后（文件末尾），添加如下行：

$.mobile.defaultTransitionHandler = myCustomTransition;

在上面的代码片段中，myCustomTransition 是新定义的过渡处理程序。现在，所有页面都将使用 slidefade 过渡。但这不会影响默认使用弹出过渡的 Dialog 过渡。

JavaScript 过渡与 CSS3 过渡的比较

尽管可能会遇到供应商前缀和不兼容的浏览器，但在 CSS3 过渡中使用 CSS3 过渡而不是 JS 过渡。使用 CSS3 过渡，所需的代码较少，开发和维护起来更容易。而且，您不必从头开始编写动画的整个逻辑。随着 jQuery Mobile 的未来版本，页面过渡框架或逻辑可能会发生变化，这将破坏您的自定义 JS 过渡。

而在 CSS3 中，美妙之处在于您的应用程序在 CSS3 支持不足时会逐步增强并退回到基本功能。随着浏览器的改进和升级，供应商前缀将确保您的代码无需修改即可更好地工作。当供应商前缀消失时，标准属性将得到选择，然后所有内容将继续正常工作。因此，只有当您想要做更复杂的事情并且 CSS3 过渡不能完全支持您的需求时，才使用 JS 过渡。

另请参阅

使用 CSS 创建弹跳页面过渡 配方
第七章 配置你的默认过渡 配方

使用 data-url 处理登录页面导航

当您在应用程序中编写登录页面时，一旦用户输入有效凭据，您将希望在成功时将用户重定向到不同的页面或不同的文件夹。本配方向您展示了如何使用data-url属性在登录页面导航情景中将用户重定向到不同页面。

准备工作

从code/02/data-url源文件夹中复制此配方的全部代码。您可以使用 URL http://localhost:8080/02/data-url/login/main.html来启动此代码。

如何实现...

应该遵循以下步骤：

创建名为 login 和 records 的两个文件夹。login 文件夹将包含 main.html 文件，records 文件夹将包含 index.html 和 data.html 文件。

在login文件夹中，将main.html创建为多页文档。在这里，首先添加如下代码片段中显示的#main页面。还要添加一个链接以打开#login页面。

<div data-role="page" id="main">
  <div data-role="header">
    <h1>Header of Main Page</h1>
  </div>
  <div data-role="content">
    <p>Page: login/main.html #main</p>
    <p><a href="#login" data-role="button">
      Login to Records folder</a></p>
  </div>
</div>

接下来，在main.html中创建#login页面，并添加一个打开index.html文件的链接。指定data-url属性指向records文件夹（用于页面重定向），如下面的代码片段所示：

<div data-role="page" id="login" 
 data-url="http://localhost:8080/02/data-url/records/"
    data-title="data-url main# Login Page">
  <div data-role="header">
    <h1>Header of Login Page</h1>
  </div>
  <div data-role="content">
    <p>Page: login/main.html #login</p>
    <p><a href="index.html" data-role="button">
      Go to Index Page</a></p>
  </div>
</div>

现在，在records文件夹中创建index.html文件，如下面的代码片段所示。在这里添加一个链接以打开data.html文件。还为页面设置data-url，如以下代码所示：

<div data-role="page" 
 data-url="http://localhost:8080/02/data-url/records/"
  <div data-role="header">
    <h1>Header of Index Page</h1>
  </div>
  <div data-role="content">
    <p>Page: records/index.html</p>
    <p><a href="data.html" data-role="button">
        Go to Data Page</a></p>
  </div>
</div>

最后，在records文件夹中创建data.html文件。在这里添加一个链接到index.html文件。此处未设置data-url属性，但导航仍将正常工作，因为之前的页面重定向成功完成：

<div data-role="page">
  <div data-role="header">
    <h1>Header of Data Page</h1>
  </div>
  <div data-role="content">
    <p>Page: records/data.html</p>
    <p><a href="index.html" data-role="button" 
        data-theme="b">Go to Index Page</a></p>
  </div>
</div>

工作原理...

在上述代码列出的每个页面中，还在页面标题下方显示当前页面的页面 URL。请注意此文本，并将其与浏览器地址栏中显示的地址进行比较，以便在此示例中导航到各个页面时进行观察。

首先，创建login和records文件夹。在login文件夹中，创建main.html文件，这是一个多页文档。将#main和#login页面添加到其中。在#main页面中，添加一个登录到记录文件夹按钮以打开#login页面。接下来，创建#login页面，并将其data-url属性指定为http://localhost:8080/02/data-url/records。在此页面添加一个打开索引页按钮，以打开位于records文件夹中的index.html文件。现在，当您启动应用程序并单击login按钮时，将显示#login页面。但浏览器地址栏将显示 URL 为http://localhost:8080/02/data-url/records/，如下图所示。而转到索引页按钮上方的文本仍然显示当前页面位置为login/main.html #login。

这个重定向发生了，因为在#login页面的div容器中使用了data-url属性。jQuery Mobile 框架会更新地址栏，显示此属性的值，而不是用于获取页面的实际 URL。

这是一个非常方便的功能，允许您在应用程序中执行重定向。这个示例没有显示服务器验证的用户名或密码。但在实际生活中，用户会在#main页面输入用户名/密码凭据，然后在服务器成功响应后，您可以将用户重定向到受限文件夹和网页。不要将任何未经身份验证的用户重定向，并且他们将无法访问records文件夹中的任何页面。

接下来，按照代码中给出的内容添加index.html和records.html文件。添加这些页面的链接以实现它们之间的导航。现在，在#login页面中，当您点击打开索引页按钮时，代码中href属性只指定了index.html。但是此时重定向已经发生，records文件夹中的index.html文件被打开。index.html现在是这里的着陆页面，使您能够访问其他页面，比如位于records文件夹中的data.html等。使用data-url的另一种方法是，您还可以在成功登录时使用changePage()方法将用户重定向到index.html页面。

在index.html中，将data-url="http://localhost:8080/02/data-url/records"属性设置为支持当用户点击浏览器的后退或前进按钮时的正确导航，如果不这样做，当您在index.html中单击后退按钮时，导航将中断。data-url可帮助您在历史堆栈中设置正确的值。

您可以通过浏览器的后退和前进按钮来玩转，看看在应用程序中导航时，地址栏是如何更新的，与标题下方显示的文本相比如何更新。

提示

使用正确的值来设置 data-url

您可以为data-url属性指定任何值，在地址栏中都将显示相同值。但您应该注意确保它是有效的引用，并且浏览器应该能够呈现页面。指定不正确或不存在的 URL 将在刷新浏览器或单击后/前按钮时中断导航。

还有更多...

jQuery Mobile 为您的应用程序中的所有页面设置并维护data-url属性。应用程序的第一页不需要data-url，因为它始终在 DOM 中，并且可以通过其 ID 或 URL 引用。对于所有其他页面，如果未指定data-url属性，则默认情况下会添加带有页面 ID 的值。对于相同域中的外部页面，将页面的相对路径用作data-url的值。对于来自不同域的页面，将使用绝对路径。

使用`data-url`作为 href 链接

如果一个页面的div标签同时包含页面 ID 和data-url，则在href属性值中可以使用data-url或页面 ID，以导航到该页面。

使用子散列 URL

一些插件动态将页面分成单独的页面。这些页面必须通过深链接到达。这些页面的data-url属性应以以下方式指定：

data-url="page.html&ui-page=subpage"

另请参阅

在第六章的提交使用 POST 的表单中，表单

使用 History API 创建自定义错误弹窗

jQuery Mobile 框架不会跟踪对话框的历史记录。因此，当您单击浏览器的返回按钮时，对话框不会重新出现。对于一些功能，例如显示错误弹出或警报，使用对话框存在一个很明显的小问题。当对话框从一个页面打开时，地址栏将显示带有#&ui-state=dialog文本后缀的页面 URL。这可能不是所有人都希望看到的。这个示例向您展示了如何使用历史 API并自定义常规对话框以出现，例如弹出而不对 URL 进行任何更改，利用历史 API。

准备就绪

从code/02/history源文件夹中复制此示例的完整代码。您可以使用 URLhttp://localhost:8080/02/history/main.html启动此代码。

如何做...

需要遵循的步骤是：

创建main.html，并添加一个链接以打开errordialog.html文件作为对话框。还添加一个input按钮，如下面的代码片段所示：

<div id="main" data-role="page">
  <div data-role="header">
    <h1>Header of Main</h1>
  </div>
  <div data-role="content">
    <a href="errordialog.html" data-theme="b" 
      data-role="button" data-rel="dialog">
      Dialog
    </a>
 <input type="submit" value="Popup" id="linkButton"
 data-theme="b"/>
  </div>
  <div data-role="footer">
    <h4>Footer of Main</h4>
  </div>
</div>

将以下脚本添加到main.html的<head>部分，以在input按钮的click事件上打开errorpopup.html作为对话框：

  $("#main").live("pageinit", function(event) {
      $("#linkButton").bind( "click", function(event, ui) {
 $.mobile.changePage( "errorpopup.html", {
 changeHash: false,
 role: "dialog"
 });
    });
  });

创建errordialog.html文件以显示自定义错误消息。还添加一个按钮返回到main.html，如下面的代码片段所示：

<div id="errordialog" data-role="page">
  <div data-role="header">
    <h1>Error !</h1>
  </div>
  <div data-role="content">
    <p>Please correct and resubmit<p>
    <a href="main.html" data-role="button" 
        data-theme="b">Close</a>
  </div>
</div>

创建errorpopup.html，并在页面容器内添加以下脚本。这是一个常规对话框，但它具有自定义样式的标题。单击锚链接时，从历史堆栈中删除它的条目：
```
<div id="errorpopup" data-role="page">
  <script>
    $("#errorpopup").live("pageinit", function(event) {
      $("a").click(function(event) {
 history.back();
      });
    });
  </script>
```

然后，为页面添加自定义标题，并添加返回到main.html的链接：

 <div class="ui-corner-top ui-overlay-shadow ui-header ui-bar-a" 
 role="banner">
    <h1 class="ui-title" tabindex="0" role="heading" 
      aria-level="1">
      Error !
    </h1>
  </div>
  <div data-role="content">
    <p>Please correct and resubmit<p>
    <a href="main.html" data-role="button" data-
      theme="b">
      Close
    </a>
  </div>
</div>

它是如何工作的...

创建main.html，其中#main页面有一个链接可以打开errordialog.html页面。添加一个输入提交按钮（id="linkButton"），如下所示。接下来，按照以下代码创建errordialog.html页面，其中有一个按钮可以返回到main.html。当你启动应用程序并点击第一个按钮（对话框）时，errordialog.html页面会作为常规对话框打开，并具有弹出过渡效果。你会看到地址栏发生变化，并在 URL 末尾显示#&ui-state=dialog文本，如下面的屏幕截图所示。关闭并打开这个对话框几次，然后如果你按住返回按钮，浏览器的历史记录将被显示，并且你会看到错误对话框在历史堆栈列表中的条目：

现在，在main.html中，添加给定的脚本到pageinit事件处理程序中，当应用程序启动时调用。在这里，处理#linkButton输入按钮的click事件，并在回调中使用以下部分描述的选项调用changePage()方法，以打开errorpopup.html页面。将role选项设置为dialog以打开页面作为对话框。此外，将changeHash选项设置为false，以指示打开页面时不更改地址栏中的 URL 哈希。

接下来，创建 errorpopup.html 并将给定的脚本添加到页面容器中。在这个脚本中，绑定 pageinit 事件，该事件在页面初始化时触发。在这里，为锚点按钮的 click 事件添加一个事件处理程序。在这个回调中，调用 history.back() 方法来删除历史记录堆栈中的历史记录条目。您应该将此脚本添加到页面容器中，以便每次页面在 DOM 中加载和初始化时都会被调用。

接下来，向错误弹出页容器添加一个自定义标题。这个自定义标题与本章前面 自定义样式对话框 部分使用的相同。这个对话框标题被定制，使其看起来更像一个弹出窗口，并避免了默认情况下在对话框标题中出现的关闭按钮。最后，在页面内容中，添加一个按钮返回到 main.html。

现在，重新启动应用程序，单击第二个按钮（Popup）。创建的自定义对话框将显示为弹出窗口，如下图所示：

此弹出窗口的行为与默认对话框不同。关闭图标不存在。您会注意到浏览器的地址栏未更改。您还会看到单击并按住浏览器的后退按钮时，Error Popup 页面标题不会显示在历史记录列表中。关闭弹出窗口并返回到 main.html。您可以单击并按住浏览器的后退或前进按钮，以查看弹出窗口从未显示在历史记录列表中，而对话框则列在其中，如下图所示：

还有更多...

历史 API 使用起来非常简单，并提供了额外的方法，您可以使用这些方法来处理和操作浏览器中的历史记录堆栈。您可以使用 pushState() 方法向历史记录中添加一个新条目。使用 replaceState() 方法，您可以替换历史记录中的条目和现有条目的 URL。这是一个非常方便的方法，可以让您根据应用程序的需要来操作历史记录。如本示例代码所示，history.back() 将您带回历史记录中的上一步，而 history.forward() 则让您向前迈进一步。要转到历史记录堆栈中的特定条目，还可以使用 history.go() 方法，将一个数字值传递给它，表示您要跳过多少条目。因此，history.go(-3) 将使您回退三个条目，而正值将使您向前跳三个条目。

对话框上的 popstate 事件

每当单击后退或前进按钮时，都会触发 popstate 事件。该事件由框架使用 onpopstate 处理程序处理，并根据需要导航到下一个或上一个页面。如果 popstate 导致目标页面是对话框，则框架会处理该事件，不会导航回对话框。因此，当您单击浏览器的后退或前进按钮时，对话框不会再次显示。

弹出窗口小部件

在编写本配方时，使用的是 jQuery Mobile v1.1.1。因此，在此配方中创建的错误弹出对话框不是真正的弹出式窗口，因为它仍然显示在单独的页面上，并且不悬停在原始页面上。弹出小部件将在 jQuery Mobile v1.2.0 中提供。然后，您可以使用data-rel="popup"属性添加一个简单的、真正的弹出窗口，如下面的代码片段所示：

<a href="#myPopup" data-rel="popup">Open Popup</a>
<div data-role="popup" id="myPopup">
  <p>A simple true popup!<p>
</div>

您可以选择使用data-history="false"属性将弹出窗口设置为不在历史记录中跟踪。您可以在jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html了解更多关于使用弹出窗口的信息。

另请参阅

自定义对话框样式配方
第八章的使用页面初始化事件配方，事件
使用changePage()方法更改页面的使用 changePage() 方法更改页面配方第九章，方法与实用工具

第三章工具栏

在本章中，我们将涵盖：

使用全屏固定工具栏
使用持久导航栏工具栏
使用多个按钮自定义页眉
向页眉添加自定义圆形按钮
向页眉添加图像
添加自定义返回按钮
向页脚添加布局网格

介绍

jQuery Mobile 框架提供了两个工具栏，页眉和页脚。页眉是页面中的第一个容器，页脚是最后一个。页眉用于指定应用程序或页面的标题，并可以包含用于导航的标准 导航栏。页脚用于各种目的。它可以包含标准按钮和表单控件，并可以根据您的需要进行自定义。它还可以包含用于页面导航的导航栏。页脚通常也用于显示版权和许可信息。

使用全屏固定工具栏

固定工具栏 在页面滚动时保持在屏幕上的相同位置。当您的应用程序页面内容占据整个视口时，固定工具栏将重叠在页面内容上。你不能在这里切换固定工具栏的可见性。要切换工具栏的可见性，您可以在 全屏模式 中使用固定工具栏。此示例向您展示了如何创建一个使用全屏工具栏的简单 照片查看器 应用程序。

准备就绪

从 code/03/fullscreen-toolbars 源文件夹中复制此示例的完整代码。可以使用 URL http://localhost:8080/03/fullscreen-toolbars/main.html 启动此代码。

如何操作...

在 main.html 中创建 #main 页面和一个 <img> 标签，以显示缩小的 尼亚加拉瀑布 图像，如下代码所示：

<div id="main" data-role="page">
  <div data-role="header">
    <h1>Photo Gallery</h1>
  </div>
  <div data-role="content">
    <img src="img/niagara.png" width="150" height="100" />
    <br>The Niagara Falls, NY, US, 24/12/2011
    <br><a href="#photo" data-role="button" data-inline="true">View full screen</a>
  </div>
  <div data-role="footer" data-position="fixed">
    Footer of Photo Gallery
  </div>
</div>

创建 #photo 页面以全屏模式显示图像：

<div id="photo" data-role="page" data-fullscreen="true" data-add-back-btn="true">
 <div data-role="header" data-position="fixed" >
    <h1>The Niagara Falls, NY, US</h1>
  </div>
  <div data-role="content">
    <img src="img/niagara.png" width="100%" height="100%" />
  </div>
 <div data-role="footer" data-position="fixed">
    Date taken: 24/12/2011
  </div>
</div>

它是如何工作的...

在 main.html 中，创建 #main 页面以使用 <img> 标签显示 尼亚加拉瀑布 的缩略图，使用较小的 width 和 height。添加一个链接以打开 #photo 页面。当您首次启动应用程序时，将显示以下屏幕，并带有较小尺寸的快照图像：

接下来创建 #photo 页面，使用 data-fixed="true" 属性添加固定工具栏。使用 data-fullscreen="true" 属性设置页面容器占据整个屏幕。使用 <img> 标签添加图像，宽度为 100%，高度为 height。

现在，当您单击 #main 中的 查看全屏 按钮时，将打开 #photo 页面，显示全屏图像的 尼亚加拉瀑布。也可以看到固定工具栏。现在，当您点击屏幕时，工具栏的可见性将切换。全屏显示如下截图所示：

还有更多...

默认情况下，全屏工具栏将覆盖页面内容。您将无法访问工具栏下方显示的任何内容。您需要点击屏幕，切换工具栏的可见性，然后访问页面内容。这可能会成为您的应用程序用户的可用性问题。因此，请明智地使用此功能。

注

全屏工具栏在需要显示全屏内容的页面中非常理想，例如照片、预览、幻灯片或视频。

CSS 属性 `position:fixed`

浏览器必须支持 position:fixed CSS 属性，才能正确动态定位固定工具栏。大多数现代浏览器都支持此属性。对于较旧的浏览器，可能不支持此功能，框架将会优雅地降级并回退到使用常规静态工具栏。在这些旧平台上，您可以使用Polyfills来支持固定工具栏，并在 jquerymobile.com//test/docs/toolbars/bars-fixed.html 中提供有关此的详细说明。

切换固定工具栏的可见性

正如本文中已经提到的，您可以点击屏幕来切换固定工具栏的可见性。通过使用 fixedtoolbar 插件 的 tapToggle 属性（默认为 true），可以控制此点击行为的变化。要启用或禁用点击，请使用以下代码片段，该代码片段使用 jQuery 选择器来找到工具栏：

// to disable tap to toggle toolbars use
$("[data-position='fixed']").fixedtoolbar({ tapToggle: false });

// to enable tap to toggle toolbars use
$("[data-position='fixed']").fixedtoolbar({ tapToggle: true });

使用 JavaScript 切换固定工具栏的可见性

你也可以使用 JavaScript 调用 fixedtoolbar 插件上的 show 或 hide 方法来切换固定工具栏的可见性，如下面的代码所示。代码片段使用 jQuery 选择器来找到工具栏。

$("[data-position='fixed']").fixedtoolbar('show');
// or
$("[data-position='fixed']").fixedtoolbar('hide');

参见

在工具栏中使用持久性导航栏 食谱

在工具栏中使用持久性导航栏

Navbar widget 可用于在您的应用程序中提供导航链接。Persistent Navbar 保持在您的应用程序中的同一位置固定，就像一个固定的选项卡栏一样，在您页面之间导航时不会移动。本文向您展示如何在工具栏中使用持久性导航栏来创建一个简单的电视菜单 UI。

准备工作

从 code/03/persistent-navbar 源文件夹中复制此处食谱的全部代码。可以使用 URL http://localhost:8080/03/persistent-navbar/main.html 来启动此代码。

如何操作...

在 main.html 中创建一个简单的电视菜单 UI，其中包含三个页面，分别是 "#movies"、"#songs" 和 "#serials"。在下面的代码中，添加带有导航栏的 #movies 页面，其页眉和页脚如下所示：

<div id="movies" data-role="page" >
 <div data-role="header" data-id="persistheader" data-position="fixed">
    <h1>Movies</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-role="button" 
 class="ui-btn-active ui-state-persist">
            Movies</a></li>
        <li><a href="#songs" data-role="button">Songs</a></li>
        <li><a href="#serials" data-role="button">Serials</a></li>
      </ul>
    </div>
  </div>
  <div data-role="content">
    <h3>This is the Movies Page</h3>
  </div>
 <div data-role="footer" data-id="persistfooter" data-position="fixed" >
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-role="button">New</a></li>
        <li><a href="#" data-role="button">Popular</a></li>
        <li><a href="#" data-role="button">Classics</a></li>
      </ul>
    </div>
  </div>
</div>

接下来，按照以下代码添加 #songs 页面，内容相似：

<div id="songs" data-role="page" >
 <div data-role="header" data-id="persistheader" data-position="fixed">
    <h1>Songs</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#movies" data-role="button">Movies</a></li>
        <li><a href="#" data-role="button"
 class="ui-btn-active ui-state-persist">
            Songs</a></li>
        <li><a href="#serials" data-role="button">Serials</a></li>
      </ul>
    </div>
  </div>
  <div data-role="content">
    <h3>This is the Songs Page</h3>
  </div>
 <div data-role="header" data-id="persistheader" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-role="button">New</a></li>
        <li><a href="#" data-role="button">Popular</a></li>
        <li><a href="#" data-role="button">Classics</a></li>
      </ul>
    </div>
  </div>
</div>

最后，按照以下代码添加 #serials 页面：

<div id="serials" data-role="page" >
 <div data-role="header" data-id="persistheader" data-position="fixed">
    <h1>Serials</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#movies" data-role="button">Movies</a></li>
        <li><a href="#songs" data-role="button">Songs</a></li>
        <li><a href="# " data-role="button"
 class="ui-btn-active ui-state-persist">
            Serials</a></li>
      </ul>
    </div>
  </div>
  <div data-role="content">
    <h3>This is the Serials Page</h3>
  </div>
 <div data-role="header" data-id="persistheader" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-role="button">New</a></li>
        <li><a href="#" data-role="button">Popular</a></li>
        <li><a href="#" data-role="button">Classics</a></li>
      </ul>
    </div>
  </div>
</div>

它的工作原理...

创建main.html并向其添加三个页面：#movies、#songs和#serials。在#main页面中，通过指定data-position="fixed"来添加一个固定页眉。为了在所有页面中保持此页眉不变，请设置属性data-id="persistheader"。现在添加一个具有三个链接的navbar，如前面的代码所示。第一个链接指向相同的页面，因此对于href标签，使用#。还要添加属性class="ui-btn-active ui-state-persist，表示当您进入此页面时，此按钮应处于活动状态。接下来，在页面底部添加一个带有三个链接的页脚，分别为New、Popular和Classics，如前面的代码所示。添加属性data-id="persistfooter"和data-position="fixed"，以指示这是一个固定的页脚，并且要在所有页面中保持不变。您应该为所有三个页面的页眉使用相同的data-id值。同样，页脚的三个页面应使用相同的data-id。使用相同的值将创建一个粘性的navbar，在页面转换时保持不动。

接下来，添加#songs页面，其内容与Movies页面相似。与之前提到的相同，将标题和页脚的data-id值设置为相同。现在，在页眉navbar中将第二个按钮设置为活动状态，将属性class="ui-btn-active ui-state-persist"设置为它。最后，添加带有固定持久页眉和页脚的"#serials"页面，就像之前的页面一样。在这里，将页眉navbar中的第三个按钮设置为活动状态。当您启动应用程序时，您可以使用页眉导航栏导航到这三个页面。这三个页面都有相同的页眉和页脚。

您可以在三个页面的页脚中随机选择不同的按钮。当您在页面之间来回导航时，您会看到页脚按钮的状态被保持和记住了。屏幕显示如下截图所示：

注意

在菜单驱动的应用程序中，持续的导航栏非常方便，通常用于页面之间的导航。

还有更多...

您可以通过添加data-icon属性为navbar按钮设置图标。可以使用data-iconpos属性将图标位置设置为top、bottom、right或left，如下面的代码所示：

<a href="#" data-role="button" data-icon="home" data-iconpos="right">Home</a>

具有固定持久工具栏的 3D 页面过渡

如果您将具有 3D 页面过渡的持久固定工具栏与页面一起使用，则可能会遇到定位问题。性能也可能较慢。因此，最好将这些页面转换为使用 2D 动画，例如slide、slidup、slidedown、fade或none。

另请参见

使用全屏固定工具栏配方

自定义具有多个按钮的页眉

当您将按钮添加到页面标题时，它们会排列到标题的左侧，并且默认情况下只能将一个按钮定位到右侧。本配方向您展示如何将四个按钮添加到标题中，并且其中两个按钮位于右侧。

准备工作

从code/03/multiple-header-buttons源文件夹复制此配方的完整代码。可以使用 URLhttp://localhost:8080/03/multiple-header-buttons/main.html启动此代码。

如何做...

创建一个名为jqm.css的新样式表，并根据以下代码中的给定内容定义两个新的自定义样式：

.ui-btn-nexttoleft {
  position: absolute; 
  left: 80px; 
  top: .4em; 
}
.ui-btn-nexttoright {
  position: absolute; 
  right: 80px; 
  top: .4em; 
}

在main.html的<head>标签中包含前一个样式表，如下所示：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
<link rel="stylesheet" href="jqm.css" />
<script src="img/jquery-1.7.1.min.js"></script>
<script src="img/jquery.mobile-1.1.1.min.js"></script>

现在，使用 jQuery Mobile 框架提供的默认样式向页面标题添加四个按钮，同时也使用您的自定义样式，如下代码所示：

<div id="main" data-role="page">
  <div data-role="header">
    <a href="#" data-role="button" data-theme="c" 
 class="ui-btn-left">
        Button1</a>
    <a href="#" data-role="button" data-theme="c" 
 class="ui-btn-nexttoleft">
        Button2</a>
    <h1>Custom Header</h1>
    <a href="#" data-role="button" data-theme="c" 
 class="ui-btn-nexttoright">
        Button3</a>
    <a href="#" data-role="button" data-theme="c" 
 class="ui-btn-right">
        Button4</a>
  </div>
  <div data-role="content">
   This page has a custom styled Header with multiple buttons
  </div>
</div>

工作原理...

创建jqm.css样式表，并定义两个新类.ui-btn-nexttoleft和.ui-btn-nexttoright，以指定按钮将使用的绝对位置。创建main.html并在包含jquery.mobile.css文件的链接之后包含对前一个样式表的链接，如前述代码所示。

接下来，在页眉中添加一个带有<h1>文本的页眉，并在其两侧添加两个锚按钮。将属性class="ui-btn-left"添加到第一个按钮，使其出现在左上角。将属性class="ui-btn-nexttoleft"添加到第二个按钮。类似地，将属性class="ui-btn-nexttoright"添加到第三个按钮，最后将class="ui-btn-right"添加到第四个按钮，它将出现在右上角。第二和第三个按钮使用您定义的自定义类。现在，当您启动页面时，按钮将按照以下屏幕截图中所示的方式在页眉中定位：

注意

在样式表中使用绝对值时要小心；如果文本大小或布局发生变化，可能需要修改绝对位置。

另请参阅

第二章中的自定义样式对话框配方，页面和对话框
在页眉中添加自定义圆形按钮配方
在页眉中添加图像配方

在页眉中添加自定义圆形按钮

jQuery Mobile 框架允许您向页面的页眉中添加自定义控件。本配方向您展示如何向应用程序的页眉中添加自定义圆形按钮。

准备工作

从 code/03/round-button-header 源文件夹中复制此配方的完整代码。此代码可使用 URL http://localhost:8080/03/round-button-header/main.html 启动。

如何做...

创建名为 jqm.css 的新样式表，并在其中定义一个自定义的 roundbtn 类：

.roundbtn  {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  -webkit-border-radius: 20px; 
  -moz-border-radius: 20px; 
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}

创建 main.html，在 <head> 标签中包含先前的样式表：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
<link rel="stylesheet" href="jqm.css" />
<script src="img/jquery-1.7.1.min.js"></script>
<script src="img/jquery.mobile-1.1.1.min.js"></script>

使用新定义的 roundbtn 样式，在 #main 页面的页眉中添加一个 About 按钮，如下面的代码所示：

<div id="main" data-role="page" >
 <div data-role="header" style="height: 50px" >
    <h1 style="margin: 15px">Custom Round Button</h1>
    <a href="#about" data-rel="dialog" data-role="button"
 class="roundbtn ui-btn ui-shadow ui-btn-up-c ui-btn-left">
      <br>About</a>
  </div>
  <div data-role="content">
    This page has a Round button in the Header
  </div>
</div>

将 #about 对话框添加如下代码中：

<div id="about" data-role="page" >
  <div data-role="header" >
    <h1>About</h1>
  </div>
  <div data-role="content">
    Round Button Demo
  </div>
</div>

它是如何工作的...

创建 jqm.css 样式表，并在其中定义一个名为 roundbtn 的新类，其中包含 width、height 和 border-radius 属性，如前面的代码所示。要创建一个圆形按钮，将 border-radius 属性的值设置为 width 属性值的一半。最后，添加供应商特定的属性以确保边框半径在各种浏览器上正常工作。

创建 main.html，在包含链接到 jquery.mobile.css 文件之后，包含上述样式表的链接，如前面的代码所示。接下来创建 #main 页面，并在其中添加带有 <h1> 文本的页眉。使用样式属性将页眉的 height 设置为 50px，以确保圆形按钮的 height（如 CSS 中指定的）适合页眉。接下来，在页眉中添加一个锚链接，其属性为 data-role="button" 和 data-rel="dialog"，以将 "#about" 页面作为对话框打开。使用 class 属性为此按钮添加 roundbtn 样式。还要添加框架在将锚链接增强为按钮时添加的其他类。您可以通过使用浏览器的开发者工具检查锚元素来获取这些类的列表。您必须手动添加这些类，以确保圆形按钮获得正确的样式，因为它已被定制。

最后，根据前面的代码定义 #about 页面。当您启动应用程序时，页眉中现在会显示一个圆形按钮，如下面的屏幕截图所示。单击圆形按钮将打开 #about 对话框。

还有更多...

您的浏览器应支持 CSS 中的 border-radius 或相应的供应商特定前缀 border-radius 属性。如果不支持，则会看到一个矩形按钮而不是一个圆形按钮。

另请参见

第二章中的 使用 CSS 创建弹跳页面过渡 配方，页面和对话框，关于供应商前缀的注意事项
第二章中的 自定义样式对话框 配方，页面和对话框
使用多个按钮自定义页眉 配方
在页眉中添加图像 配方

在页眉中添加图像

jQuery Mobile 页面的页眉通常包含要用作页面页眉的文本。您还可以向页眉添加其他内容和标记。本配方向您展示如何向应用程序的页眉添加图像。

准备工作

从code/03/header-image源文件夹中复制此配方的全部代码。可以使用 URLhttp://localhost:8080/03/header-image/main.html来启动这段代码。

如何做…

在这个配方中，图像ABC.png被用作一个虚构公司 ABC Inc.的标志图像。

创建main.html并将上述图像添加到其页眉。图片链接到对话框，代码如下所示：

<div id="main" data-role="page" data-theme="a">
  <div data-role="header" data-theme="a">
    <h1>ABC Company</h1>
 <a href="#about" data-rel="dialog" data-theme="a" class="ui-btn ui-shadow ui-btn-up-a">
 <img src="img/ABC.png" width="24" height="24" alt="About ABC" /></a>
  </div>
  <div data-role="content">
    This page has an Image in the Header
  </div>
</div>

如下代码所示，添加#about对话框：

<div id="about" data-role="page" >
  <div data-role="header" >
    <h1>About ABC</h1>
  </div>
  <div data-role="content">
    <img src="img/ABC.png" width="24" height="24" alt="ABC" style="margin-right:5px" />ABC Company Inc.
  </div>
</div>

工作原理…

在main.html中，创建一个#main页面，并在其中添加一个带有<h1>文本的页眉。现在，使用属性data-rel="dialog"在页眉中添加一个锚点链接，以打开#about页面作为对话框。使用属性class="ui-btn ui-shadow ui-btn-up-a"指定锚点链接的自定义样式。请不要添加data-role="button"，因为框架会将此链接增强为按钮。接下来，如前面的代码中所示，添加指向ABC.png图像的<img>元素。通过使用width和height属性将该图像缩放到适当的大小。最后，如下代码中所示，定义#about页面。启动应用程序后，#main页面的页眉会显示左上角的ABC.png图像，如下截图所示。单击该图像将打开#about对话框页面。

还有更多…

您还可以为图像使用本机样式，避免在锚点元素上设置任何自定义样式以仅显示图像。使用属性data-role="none"即可实现，代码如下所示：

<a href="#about" data-role="none" data-rel="dialog" data-theme="a">
  <img src="img/ABC.png" widht="24" height="24"
      alt="About ABC" />
</a>

另请参阅

使用多个按钮自定义页眉的配方
在页眉中添加自定义的圆形按钮配方

添加一个定制的返回按钮

在应用程序中打开新页面时，jQuery Mobile 框架提供了一个选项，可以在页面的页眉中添加一个返回按钮，以帮助您导航回上一页。默认情况下，返回按钮是不可见的。本配方向您展示如何使用 JavaScript 动态添加和自定义应用程序中的返回按钮。

准备工作

从code/03/custom-back-button源文件夹中复制此配方的全部代码。可以使用 URLhttp://localhost:8080/03/custom-back-button/main.html来启动这段代码。

如何做…

创建main.html并在其中添加两个锚点链接。第一个链接打开一个带有页眉中返回按钮的页面，而第二个链接则打开一个没有返回按钮的页面。

同时在页面中添加一个提交按钮，如下代码所示：

<div id="main" data-role="page">
  <div data-role="header">
    <h1>Header of Main Page</h1>
  </div>
  <div data-role="content">
    <a href="page1.html" data-role="button">Page with Header Back Button</a>
    <a href="page2.html" data-role="button">Page without Header Back Button</a>
    <input type="submit" id="addbackbtns" value="Click to Add and Customize the Back Button" data-inline="true" data-role="button">
  </div>
</div>

将以下脚本添加到页面的<head>部分，并将其绑定到提交按钮的click事件：

$("#main").live("pageinit", function(event) {
  $("#addbackbtns").bind("click", function(event, ui) {
    $.mobile.page.prototype.options.addBackBtn = true;
    $.mobile.page.prototype.options.backBtnText = "Prev";
    $.mobile.page.prototype.options.backBtnTheme = "e";
  });});

在页面页眉中创建带有返回按钮的page1.html，如下所示的代码：

<div id="page1" data-role="page" data-add-back-btn="true">
  <div data-role="header">
    <h1>Header with Back Button</h1>
  </div>
  <div data-role="content">
    This page has a Header with the Default Back Button
  </div>
</div>

创建page2.html，默认情况下没有返回按钮：

<div id="page2" data-role="page">
  <div data-role="header">
    <h1>Header without Back Button</h1>
  </div>
  <div data-role="content">
    This page has a Header without any buttons
    <a href="main.html" data-rel="back" data-direction="reverse" data-role="button">Back</a>
  </div>
</div>

工作原理...

创建main.html并向其添加两个锚链接，分别打开page1.html和page2.html。创建page1.html并在页面div容器中添加属性data-add-back-btn="true"，如前面的代码所示。现在，当你点击main.html中的第一个按钮时，它会打开page1.html，你可以看到页面页眉中显示了返回按钮。点击它返回到main.html。

创建page2.html，并且不要添加data-add-back-btn属性。现在，当你点击main.html中的第二个按钮时，它会打开page2.html，而页眉中没有返回按钮。你可以在页面内容中添加一个锚链接来返回main.html。

现在，在main.html中，添加一个提交按钮，带有id="addbackbtns"和文本点击添加和自定义返回按钮。在页面初始化后启动的pageinit事件处理程序中，将提交按钮的click事件绑定到回调函数。在这里，像前面的代码中所示，将$.mobile.page.prototype对象的addBackBtn选项设置为true。这将自动在应用程序的所有页面上启用返回按钮。此外，您还可以通过设置backBtnText和backBtnTheme选项进一步自定义返回按钮的文本和主题，如前面的代码所示。

现在你可以从main.html访问这两个页面，并看到返回按钮现在可用且样式相同。两者都是黄色的，文本设置为Prev，如下图所示：

还有更多...

如食谱中所述，你可以设置以下属性并在应用程序的所有页面上全局启用返回按钮：

$.mobile.page.prototype.options.addBackBtn = true;

当所有页面默认启用返回按钮时，你可以通过将属性data-add-back-btn="false"添加到其页面div容器中来关闭特定页面的按钮：

<div id="page3" data-role="page" data-add-back-btn="false">

另请参阅

使用多个按钮自定义页眉的方法
在页眉中添加自定义的圆形按钮的方法

在页脚中添加布局网格

布局网格允许您在相邻的列中放置控件。这个食谱向您展示了如何使用布局网格在页脚添加多个表单控件。

准备工作

从code/03/footer-layoutgrid源文件夹复制此食谱的完整代码。可以使用 URLhttp://localhost:8080/03/footer-layoutgrid/main.html启动此代码。

如何操作...

创建main.html并在其页面中添加一个页脚。向页面页脚添加布局网格，并像下面的代码中所示添加表单控件：

<div data-role="footer" data-position="fixed" class="ui-bar">
 <fieldset class="ui-grid-a">
    <div class="ui-block-a" data-role="fieldcontain">
      <label for="syncslider">Sync (mins):</label>
      <input type="range" name="syncslider" id="syncslider" value="5" min="1" max="60"/>
    </div>
    <div class="ui-block-b">
      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
          <legend>Share :</legend>
          <input type="radio" name="sharefile" id="shareFileNone" value="sharefile-1" checked="checked" data-theme="c"/>
          <label for="shareFileNone">None</label>
          <input type="radio" name="sharefile" id="shareFileFriends" value="sharefile-2" data-theme="c"/>
          <label for="shareFileFriends">Friends</label>
          <input type="radio" name="sharefile" id="shareFilePublic" value="sharefile-3" data-theme="c"/>
          <label for="shareFilePublic">Public</label>
        </fieldset>
      </div>
    </div>
  </fieldset>
</div>

工作原理...

创建main.html并向其添加一个页脚。通过指定属性class="ui-bar"来样式化页脚。这将创建一个水平栏，您可以在其中添加自定义控件。现在通过创建一个具有属性class="ui-grid-a"的fieldset元素向页脚添加一个两列布局网格。

在布局网格的第一列添加一个带有属性data-role="fieldcontain"的div容器。必须添加属性class="ui-block-a"，以指示该div容器放置在网格的第一列中。现在通过添加一个带有type="range"属性的input元素将滑块小部件添加到此列。

类似地，添加一个带有属性data-role="fieldcontain"和class="ui-block-b"的div容器，以指示该div容器应放置在布局网格的第二列中。通过添加属性data-role="controlgroup"将三个单选按钮添加到单个组中，还添加属性data-type="horizontal"将单选按钮放置在水平行中（默认情况下，它们是垂直排列在彼此下方）。

现在页脚的外观如下图所示：

还有更多...

可以通过为网格添加相应的类来指定布局网格中的最多五列，如下面的代码所示：

两列网格 - 使用ui-grid-a类
三列网格 - 使用ui-grid-b类
四列网格 - 使用ui-grid-c类
五列网格 - 使用ui-grid-d类

注意

鉴于移动设备的屏幕空间有限，要有选择地使用四列或五列的布局网格。界面可能会显得拥挤，可能没有足够的空间来填充表单控件。

布局网格中控件的大小

向布局网格列添加表单控件或小部件将导致该控件占据整个列的宽度。如果不想要这种行为，您将需要修改控件的样式。

注意

按钮和选择表单控件支持data-inline="true"属性。您可以将此属性设置为控件，它们将保持其实际的紧凑大小，并且不会调整大小以占据整个列的宽度。

在布局网格中换到下一行

如果您的布局网格有多行，您必须将各种控件添加到它们自己的div容器中，从第一列开始为class="ui-block-a"，移动到第五列为class="ui-block-e"。在任何时候添加第六个ui-block或在中间使用class="ui-block-a"的div容器将导致列换行，新添加的div容器现在移至下一行。

注意

从ui-block-a类开始一行，按正确的顺序向ui-block-e移动。

不要在同一行中重复相同的 ui 块。

另请参阅

在工具栏中使用持久性导航栏方法
在第四章的创建自定义布局网格配方，按钮和内容格式化

第四章：按钮和内容格式化

在本章中，我们将涵盖：

编写动态添加按钮的脚本
在按钮中使用自定义图标
添加自定义图标精灵
替换默认的图标精灵
在可折叠区域中使用替代图标
创建嵌套的手风琴
创建自定义布局网格
使用 XML 内容
使用 JSON 内容

介绍

在 jQuery Mobile 应用中，你可以将按钮、表单控件和列表添加为应用的页面内容。页面内容是一个带有属性data-role="content"的div容器。你可以使用框架提供的就绪样式和布局显示数据并格式化数据。你可以以可折叠块和可折叠集或手风琴的形式分组和显示数据。你可以使用布局网格在多列中显示数据。你还可以在你的应用程序中使用表格和其他 HTML 元素。

编写动态添加按钮的脚本

按钮是标准的 HTML 表单元素，在 jQuery Mobile 框架中通过按钮插件进行增强，使其易于触摸操作，并在各种移动设备上具有良好的外观。你可以使用 <button> 标签或 <input> 标签向你的应用程序中添加按钮。你也可以通过将data-role="button"属性添加到锚元素来将锚元素样式化为按钮。本配方向你展示了如何使用 JavaScript 动态添加按钮到页面并绑定动作到这个新添加的按钮。

准备工作

从code/04/dynamic-button源文件夹复制此配方的全部代码。你可以使用网址http://localhost:8080/04/dynamic-button/main.html来启动此代码。

如何做...

在main.html中，创建#main页面并添加一个按钮。当你点击这个按钮时，使用 JavaScript 创建第二个按钮并为其分配一个动作：

在main.html中创建#main页面，并将以下代码内容添加到其中：

<div data-role="content">
 <input type="submit" id="addContentBtn" data-inline="true"
 value="Click to add new button"><br>
 <div id="newcontent"></div>
</div>

将以下脚本添加到处理按钮的click事件中。在回调函数中，创建新按钮并为其分配一个动作。

$("#main").live("pageinit", function(event) {
  $("#addContentBtn").bind("click", function(event, ui) {
    var str="<a href='#page2' data-role='button' data-inline='true'>"
           +"Disable 1st button and Go to Page 2</a>";
 $("#newcontent").html(str).trigger("create")
 .bind("click", function(event, ui) {
      $("#addContentBtn").button("disable");
    });
  });
});

根据以下代码添加#page2。这是一个多页面文档。当你点击动态添加的按钮时，此页面将被打开。

<div id="page2" data-role="page" data-add-back-btn="true">
  <div data-role="header">
    <h1>Page2 Header</h1>
  </div>
  <div data-role="content">
    <h3>This is Page 2</h3>
  </div>
</div>

工作原理...

在main.html中创建一个带有页面#main的页面，并在页面内容中添加一个带有id="addContentBtn"的按钮。还在页面上添加一个空的div容器，id="newcontent"。当你加载这个页面时，你只会看到一个按钮，上面显示着点击添加新按钮的文本。

接下来添加给定的脚本。添加一个pageinit事件处理程序，该处理程序在页面初始化后被调用。在这里，将按钮的click事件绑定到一个回调函数。在回调函数中，将具有data-role="button"的锚链接添加到空的"#newcontent" div 中。由于页面已经初始化，你必须显式调用create方法来触发框架重新访问此链接并将其增强为按钮。现在当你点击第一个按钮时，你会看到第二个按钮，禁用第一个按钮并转到第 2 页，被创建并显示。在脚本中还添加代码来绑定新按钮的click事件到一个回调函数。在这里，调用第一个按钮的disable方法。

最后创建一个id="page2"的新页面，当你点击新按钮时会打开该页面。将#page2添加data-add-back-btn="true"以提供一个返回按钮，帮助导航回#main页面。现在当你点击第二个按钮时，动态添加的脚本会被调用，第一个按钮被禁用，并且页面导航到打开page2。你可以点击page2上的返回按钮回到#main页面。你会发现，你之前添加的动态脚本已经禁用了第一个按钮。

还有更多...

按钮插件还提供了enable、disable和refresh按钮的方法：

$(buttonselector).button("enable");
$(buttonselector).button("disable");
$(buttonselector).button("refresh");

按钮选项

按钮使用data-属性提供许多标记选项。它们是corners（data-corners）、icon（data-icon）、iconpos（data-iconpos）、shadow（data-shadow）、iconshadow（data-iconshadow）、inline（data-inline）和theme（data-theme）。

你可以调用buttonMarkup方法来增强锚链接以将其作为按钮使用。以下代码行接受原生锚链接，并将按钮角色添加到它，并设置data-icon="alert"和data-inline="true"属性：

$("a").buttonMarkup({ icon: "alert", inline: "true"});

在按钮中使用自定义图标

按钮可以包含文本、图标或两者兼有。图标可以在按钮内的四个方向中的一个位置。jQuery Mobile 框架提供了一组标准图标，你可以在你的应用中使用。这个示例向你展示了如何向按钮添加自定义图标以及框架提供的标准图标。

准备工作

从code/04/custom-icon源文件夹中复制这个示例的完整代码。你可以使用 URLhttp://localhost:8080/04/custom-icon/main.html启动这个代码。

操作方法...

在这个示例中，使用了名为square.png的自定义图标：

创建一个新的样式表jqm-icon.css，并按照以下代码定义自定义图标样式：

.ui-icon-square {
  background: #fff;
  background: rgba(0,0,0,.4);
 background-image: url("../../resources/images/square.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5), 
    only screen and (min-resolution: 240dpi) {
 .ui-icon-square {
 background-image: url("../../resources/images/square-HD.png");
    background-size: 18px 18px;
  }
}

在main.html的<head>部分包含 CSS，如下所示：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
<link rel="stylesheet" href="jqm-icon.css" />

使用自定义图标与提交按钮，并使用以下不同的主题。也添加默认的"home"图标以进行比较。

<div data-role="content">
  <h3>Default Icon with text</h3>	
  <input type="submit" data-inline="true" value="Home" data-icon="home" data-theme="a"/>
  <h3>Custom Icon with text</h3>
 <input type="submit" data-inline="true" value="Square" data-icon="square" data-theme="a"/>
  <h3>Default Icon without text</h3>	
  <input type="submit" data-inline="true" data-iconpos="notext" data-icon="home" data-theme="a"/>
  <h3>Custom Icon without text</h3>
 <input type="submit" data-inline="true" data-iconpos="notext" data-icon="square" data-theme="a"/>
</div>

工作原理...

创建一个 jqm-icon.css 样式表，并在其中添加一个新的图标类 ui-icon-square。指定 background-image 属性并将其指向要使用的图像文件。为图标指定 background 颜色，并为具有透明度的 图标圆盘 指定背景颜色，如所示。这里，前缀文本 ui-icon 表示按钮插件，这是一个自定义图标，并生成一个 square 类。现在，您可以在按钮中使用 data-icon="square" 属性，框架将获取并显示按钮上的 square 图标。

创建 main.html，使用 input 标签添加提交按钮，并使用 data-icon 属性为这些按钮设置图标。首先使用默认的 home 图标，然后使用新添加的自定义 square 图标，有时带文本，有时不带文本。为了进行详细比较，您可以添加多个按钮，使用不同的主题色板（data-theme="a" 到 data-theme="e"）。最终结果如下图所示。自定义图标看起来和默认图标一样好。

还有更多内容...

CSS 中定义的图标 .ui-icon-square 是标准分辨率的。今天大多数新设备都支持高清分辨率。因此，为了在高清分辨率上正常工作，您可以创建一个新的高分辨率图像，square-HD.png，尺寸为 36 x 36 像素。在 CSS 中使用这个图像，并在 @media 查询中指定此高分辨率图标应该适用的目标设备分辨率。有关 @media 查询的更多详细信息，请参见 jquerymobile.com/demos/1.1.1/docs/buttons/buttons-icons.html。

对于标准分辨率的自定义图标，请使用尺寸为 18 x 18 像素的图片，以 PNG-8 格式保存，并设置透明度为 0.4，背景颜色为 #666。现在你的图标将看起来与框架提供的默认图标类似。

使用 data-inline

默认情况下，按钮会拉伸以适应其容器的宽度。您可以指定属性 data-inline="true" 来显示按钮的紧凑模式。您还可以在同一行中相邻放置多个内联按钮。

使用 data-iconpos

通过使用 data-icon="home" 属性，按钮可以与图标图像关联。这里，"home" 是所使用的图标的名称。data-iconpos 属性可用于指定图标应显示在按钮的何处。可能的值为 top、bottom、left 和 right。使用 data-iconpos="notext" 属性完全隐藏文本，并调整按钮大小以仅显示图标。

使用阴影和按钮的圆角

按钮默认使用圆角，可以使用布尔属性data-corners进行控制。阴影也默认启用了按钮及其图标。这可以通过使用属性data-shadow和data-iconshadow进行控制。data-corners、data-shadow和data-iconshadow属性都是布尔类型的，可以取true或false值。

另请参阅

添加自定义图标精灵示例
替换默认图标精灵示例

添加自定义图标精灵

jQuery Mobile 框架使用默认的图标精灵并从中派生所有图标。本示例向您展示如何向默认标准图标集中添加一个自定义图标精灵，其中包含除法和等于图标，形成一个计算器的键。标准图标集已经包含加、减和删除（乘）图标。

准备工作

从code/04/add-icon-sprite源文件夹中复制此示例的完整代码。您可以使用 URLhttp://localhost:8080/04/add-icon-sprite/main.html启动此代码。

如何实现...

在这个示例中，下面的图像calc-sprite.png提供了除法和等于图标：

创建一个新的jqm-sprite.css样式表，并为从自定义图标精灵派生的新图标定义类.ui-icon-divide和.ui-icon-equals：

.ui-icon-divide, .ui-icon-equals {
  background: #fff;
  background: rgba(0,0,0,.4);
 background-image: url("../../resources/images/calc-sprite.png");
  background-repeat: no-repeat;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  -o-border-radius: 9px;
  border-radius: 9px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5), 
    only screen and (min-resolution: 240dpi) {
 .ui-icon-divide, .ui-icon-equals {
 background-image: url("../../resources/images/calc-sprite- 
 HD.png");
      -moz-background-size: 36px 18px;
      -o-background-size: 36px 18px;
      -webkit-background-size: 36px 18px;
      background-size: 36px 18px;
  }
}
.ui-icon-divide { background-position: -0px 50%; }
.ui-icon-equals { background-position: -18px 50%; }

将 CSS 包含在main.html的<head>部分中，如以下代码所示：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
<link rel="stylesheet" href="jqm-sprite.css" />

使用从自定义图标精灵派生的新图标以及默认图标，如以下代码所示。首先显示带有文本的按钮：

<div data-role="content">
  <h3>Default and Custom Icons with Text</h3>
  <input type="submit" data-inline="true" value="plus" data-icon="plus" />
  <input type="submit" data-inline="true" value="minus" data-icon="minus" />
  <input type="submit" data-inline="true" value="delete" data-icon="delete" />
 <input type="submit" data-inline="true" value="divide" data-icon="divide" />
 <input type="submit" data-inline="true" value="equals" data-icon="equals" />

然后，显示没有文本的按钮以进行比较：

<h3>Default and Custom Icons without Text</h3>
  <input type="submit" data-inline="true" data-iconpos="notext" data-icon="plus" />
  <input type="submit" data-inline="true" data-iconpos="notext" data-icon="minus" />
  <input type="submit" data-inline="true" data-iconpos="notext" data-icon="delete" />
 <input type="submit" data-inline="true" data-iconpos="notext" data-icon="divide" />
 <input type="submit" data-inline="true" data-iconpos="notext" data-icon="equals" />
</div>

工作原理...

创建一个样式表jqm-sprite.css，并在其中添加新的图标类.ui-icon-divide和.ui-icon-equals。指定background-image属性并将其指向要用作图标精灵的图像文件。接下来指定图标和图标圆盘的background颜色，并指定透明度，如所示。还为图标指定border-radius为9px。添加供应商前缀以确保它在各种浏览器平台上工作。最后，在 CSS 文件的最后两行中定义每个新图标在图标精灵中的位置。添加@media查询以指定图标应在其中工作的目标设备分辨率；这在本章早期的在按钮中使用自定义图标示例中已经解释过了。

这里，前缀文本ui-icon指示按钮插件这些是自定义图标，这将生成相应的类，不带前缀文本。现在，您可以使用属性data-icon="divide"或data-icon="equals"在按钮上使用新图标，框架将获取并显示正确的自定义图标。

在main.html中，通过添加使用输入标签的提交按钮创建一个简单计算器的按钮。使用data-icon属性设置这些按钮的图标，如下所示。为了比较，显示有文本和无文本的按钮。这里，加，减和删除图标来自默认图标精灵。自定义图标精灵贡献了除以和等于图标。屏幕显示如下图所示：

还有更多...

为了创建一个图标精灵，使用高度为18px的 PNG 图像。总宽度是图标精灵中图标数量乘以18px的倍数。默认图标精灵使用0.4的 alpha 值和#666的背景颜色。为了与默认图标保持一致的外观，使用相同的设置来创建您的自定义图标精灵。将图像保存为带有 alpha 透明度的PNG-8格式。

指定无效的图标名称

在代码中，如果指定一个无效的图标名称，比如data-icon="random"，框架会在文本前面添加.ui-icon-并尝试在样式表中查找该类。如果这不能解析为有效的图标，则框架现在会从默认图标精灵中选择第一个图标并显示出来。默认精灵中的第一个图标是plus图标，并且在无法解析图标名称的所有位置都使用它。

另请参阅

替换默认图标精灵配方
在按钮中使用自定义图标配方

替换默认图标精灵

本配方向您展示了如何替换 jQuery Mobile 提供的默认图标精灵并使用您自己的图标精灵。此处使用的自定义图标精灵包含形成骰子六个面的图标。

准备工作

从code/04/replace-icon-sprite源文件夹中复制此配方的完整代码。您可以使用 URL http://localhost:8080/04/replace-icon-sprite/main.html启动此代码。

如何操作...

在这个配方中，下面的图像，dice.png是一个包含六个骰子面图标的图标精灵。这个图标精灵用于替换默认图标精灵。

创建一个新的样式表jqm-sprite.css，并重新定义 jQuery Mobile 框架中可用的默认.ui-icon类。将默认图标类替换为从自定义图标精灵派生的新类，如下所示的代码所示：

.ui-icon {
  background: #fff;
  background: rgba(0,0,0,.4);
 background-image: url("../../resources/images/dice.png");
  background-repeat: no-repeat;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  -o-border-radius: 9px;
  border-radius: 9px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
  only screen and (min--moz-device-pixel-ratio: 1.5), 
  only screen and (min-resolution: 240dpi) {
 .ui-icon-one, .ui-icon-two, .ui-icon-three, .ui-icon-four, .ui-icon-five, .ui-icon-six {
 background-image: url("../../resources/images/dice-HD.png");
      -moz-background-size: 108px 18px;
      -o-background-size: 108px 18px;
      -webkit-background-size: 108px 18px;
      background-size: 108px 18px;
  }
}
.ui-icon-one { background-position: -0px 50%; }
.ui-icon-two { background-position: -18px 50%; }
.ui-icon-three { background-position: -36px 50%; }
.ui-icon-four { background-position: -54px 50%; }
.ui-icon-five{ background-position: -72px 50%; }
.ui-icon-six{ background-position: -90px 50%; }

在main.html的<head>部分包含 CSS，如下所示的代码：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
<link rel="stylesheet" href="jqm-sprite.css" />

使用替换的图标精灵派生的新图标来显示骰子的六个面，如下所示的代码。显示带文本的按钮：

<div data-role="content">
  <input type="submit" data-inline="true" value="one" data-icon="one" />
  <input type="submit" data-inline="true" value="two" data-icon="two" />
  <input type="submit" data-inline="true" value="three" data-icon="three" />
  <input type="submit" data-inline="true" value="four" data-icon="four" />
  <input type="submit" data-inline="true" value="five" data-icon="five" />
  <input type="submit" data-inline="true" value="six" data-icon="six" />

然后显示无文本的按钮以进行比较：

<h3>This is how they look without Text</h3>
  <input type="submit" data-inline="true" data-iconpos="notext" data-icon="one" />
  <input type="submit" data-inline="true" data-iconpos="notext" data-icon="two" />
  <input type="submit" data-inline="true" data-iconpos="notext" data-icon="three" />
  <input type="submit" data-inline="true" data-iconpos="notext" data-icon="four" />
  <input type="submit" data-inline="true" data-iconpos="notext" data-icon="five" />
  <input type="submit" data-inline="true" data-iconpos="notext" data-icon="six" />
</div>

它是如何工作的...

创建一个样式表 jqm-sprite.css，并从 jquery.mobile.css 文件中直接复制代码片段以保持不变。将图标精灵的 background-image URL 更改为指向自定义图标精灵 dice.png 图像。添加名为 .ui-icon-one 到 .ui-icon-six 的单个图标类。指定这些图标在图标精灵中的位置。类 .ui-icon 已经为图标指定了 background 颜色。它还为需要的供应商前缀指定了图标的 border radius 为 9px。修改 @media 查询并更新新图标的名称，而不是默认图标，如所示。

这里，前缀文本 ui-icon 表示按钮插件，这些是自定义图标，这将生成相应的类而不包含前缀文本。您现在可以使用属性 data-icon="one" 至 data-icon="six" 在按钮上使用替换的图标，框架将获取并显示正确的自定义图标。

在 main.html 中，通过使用 input 标签添加提交按钮来创建骰子的六个面的按钮。使用 data-icon 属性为这些按钮设置图标，如所示。显示带文本和不带文本的按钮进行比较。骰子的六个面的按钮现在显示如下屏幕截图所示，首先是带有文本的，然后是不带文本的：

还有更多...

本配方向您展示如何用自己的自定义图标精灵替换默认的图标精灵。您将不能再在您的应用程序中使用默认的图标。所以，只有在您有充分的理由并且您的应用程序需要定制所有图标时才替换默认图标集。一个更好的方法是在默认精灵的基础上添加一个自定义精灵，就像前面的配方中所示的那样。

另请参阅

在按钮中使用自定义图标 配方
添加自定义图标精灵 配方

在可折叠块中使用替代图标

可折叠块 是带有 data-role="collapsible" 属性的容器。您可以在可折叠内容中添加标题和其他控件，当可折叠块折叠时，只显示标题。您可以单击可折叠块旁边的 + 图标来展开它。本配方向您展示如何在可折叠块中使用替代图标。

准备工作

从 code/04/collapsible 源文件夹复制此配方的完整代码。您可以使用 URL http://localhost:8080/04/collapsible/main.html 启动此代码。

如何做...

在 main.html 中使用 data-role="collapsible" 添加两个可折叠块，如下所示的代码。默认情况下，第一个可折叠块使用标准图标（加号和减号）。

<div data-role="content">
 <div data-role="collapsible" data-collapsed="false"
      data-theme="c" data-content-theme="c">
    <h3>Header of the collapsible element</h3>
    The header uses the default plus/minus icons
  </div>
 <div id="collapser" data-role="collapsible" 
data-collapsed="false" data-theme="d" data-content-theme="d">
    <h3>Header of the collapsible element</h3>
    The header uses the alternate expand/collapse icons
  </div>
</div>

将以下脚本添加到页面的 <head> 部分，以为第二个可折叠块设置替代箭头图标：

//on initial load
$("#main").live("pagebeforeshow", function(event, data) {      
  $("#collapser").find( ".ui-icon-plus" )
    .toggleClass("ui-icon-arrow-r");
  $("#collapser").find( ".ui-icon-minus")
    .toggleClass("ui-icon-arrow-d");
});
// handle expand and collapse events below
$("#main").live("pageshow", function(event, data) {      
 $("#collapser").bind("expand collapse", function(event) {
    var isCollapse = (event.type === "collapse");
    $(this).find( ".ui-icon" )
      .toggleClass( "ui-icon-arrow-d", !isCollapse )
      .toggleClass( "ui-icon-arrow-r", isCollapse );
  });
});

它是如何工作的...

在 main.html 中，添加两个可折叠块；它们在加载时具有默认的加号和减号图标。添加脚本并为 pagebeforeshow 事件创建事件处理程序以更改第二个可折叠块（带有 id="collapser"）的图标。使用 jQuery 的 find() 方法查找类 .ui-icon-plus（加号图标）并使用 toggleClass() 方法将其替换为类 .ui-icon-arrow-r（右箭头）。类似地，将类 .ui-icon-minus（减号图标）替换为类 .ui-icon-arrow-d（向下箭头）。在可折叠块上设置 data-collapsed="false" 属性以展开显示。当页面显示时，第二个可折叠块现在具有箭头图标而不是默认图标：

当可折叠块展开或折叠时，框架会使用标准图标切换图标。您可以通过为 pageshow 事件添加事件处理程序来覆盖此行为。根据可折叠块上的事件（expand 或 collapse），找到 .ui-icon 类并将其替换为 .ui-icon-arrow-d 或 .ui-icon-arrow-r 类以显示向下或向右箭头。折叠的块现在如下图所示：

还有更多...

您可以使用 data-content-theme 属性为可折叠内容设置主题。标题不受影响。以下代码将可折叠内容主题设置为 e：

<div data-role="collapsible" data-content-theme="e">

为可折叠标题设置主题

使用 data-theme 属性并将主题设置为包括标题在内的整个可折叠块。现在，您可以使用 data-content-theme 属性为可折叠内容设置不同的主题。现在，它看起来好像您单独为标题设置了样式。以下代码片段将标题主题设置为 a，正文主题设置为 e：

<div data-role="collapsible" 
  data-theme="a" data-content-theme="e" >

另请参阅

创建嵌套手风琴 配方

创建嵌套手风琴

手风琴 或 可折叠集 是一个带有 data-role="collapsible-set" 的容器中的可折叠块组。一次只能展开一个可折叠块，其他可折叠块会返回到折叠状态。您不能直接嵌套手风琴。本配方向您展示如何在一个简单的应用程序中创建一个 嵌套手风琴，该应用程序显示了可购买的各种房地产属性。

准备工作

从 code/04/nested-accordion 源文件夹中复制此配方的完整代码。您可以使用 URL http://localhost:8080/04/nested-accordion/main.html 启动此代码。

如何操作...

在 main.html 中添加一个嵌套手风琴，使用 data-role="collapsible-set" 如下所示：

<div data-role="content">
  <h4>Our current housing projects</h4>
 <div data-role="collapsible-set" data-theme="d" data-content-
 theme="d"> 
    <div data-role="collapsible" data-collapsed="false">
      <h3>Villas and Row Houses</h3>
 <div data-role="collapsible-set" data-theme="e" data-
 content-theme="e">
        <div data-role="collapsible">
          <h3>ABC Lake View</h3>
          Premium Villas with each villa having its own private 
          beach
        </div>
        <div data-role="collapsible">
          <h3>ABC Nest</h3>
          Serene row houses amidst acres of trees
        </div>
      </div>
    </div>
    <div data-role="collapsible">
      <h3>Apartments</h3>
      <div data-role="collapsible" data-theme="e" data-content-
      theme="e">
        <h3>ABC Sky Rise</h3>
        Luxury 3 bedroom apartments 2 blocks away from ABC Mall
      </div>
    </div>
  </div>
</div>

工作原理...

在main.html中，创建一个折叠集，其中包含两个可折叠块。第一个可折叠块显示别墅和排屋，第二个显示公寓。您现在可以在别墅和排屋可折叠块下嵌套另一个可折叠块，如前面的代码片段所示。

添加两个可折叠块，将它们嵌套在第一个可折叠块内以列出两个属性。使用 data-theme 和 data-content-theme 属性将嵌套内容与其父可折叠块进行不同主题设置。嵌套可折叠块显示如下截屏所示：

现在，为第二个可折叠块公寓添加内容以完成代码。在此嵌套手风琴中，任何时候只有一个可折叠块是展开的，如下截屏所示：

还有更多内容...

在可折叠集中的两个可折叠块之间引入任何其他元素或内容都会破坏该集合。当您展开或折叠它们时，可折叠块不再同步，并且它们变得彼此独立。

注意

正如名称所示，可折叠集必须仅包含可折叠块。

另请参阅

在可折叠块中使用替代图标 配方

创建自定义布局网格

您可以使用布局网格将控件放置在应用程序中相邻的位置。默认情况下，布局网格创建具有相等宽度的列单元格。本配方向您展示如何自定义此功能，并创建具有不同高度和宽度的单元格。

准备工作

从code/04/layoutgrid源文件夹中复制此配方的完整代码。您可以使用 URL http://localhost:8080/04/layoutgrid/main.html 启动此代码。

如何执行...

如下代码所示，在main.html中添加布局网格，使用 ui-grid 和 ui-block 类：

<div data-role="content">
 <fieldset class="ui-grid-a">
 <div class="ui-block-a" style="width: 25%">
      <div class="ui-bar ui-bar-e">Col A</div>
    </div>
    <div class="ui-block-b" style="width: 50%">
      <div class="ui-bar ui-bar-e">Col B</div>
    </div>
    <div class="ui-block-c" style="width: 25%">
      <div class="ui-bar ui-bar-e">Col C</div>
    </div>
 <div class="ui-grid-solo">
      <div style="height: 40px" class="ui-bar ui-bar-e">A    Single Cell</div>
    </div>
  </fieldset>
</div>

如何运作...

通过添加带有属性 class="ui-grid-a" 的 fieldset 元素来在其页面中为 main.html 添加布局网格。这将默认创建具有相等宽度的两列。但是，您可以通过添加如代码所示的 ui-block-a、ui-block-b 和 ui-block-c divs 来添加三个单元格。每个 div 的宽度不同，其中 Col B 的宽度为 50%，另外两列的宽度分别为 25%。总宽度总和为 100%，框架会自动将它们排列在单行中。如果总和超过 100%，则额外的单元格将移到下一行。

现在在第二行添加一个带有类ui-grid-solo的单个div，这将使单元格的宽度达到 100%。您可以像代码中所示使用style="height:"属性来更改此单元格的高度。 ui-bar 和 ui-bar-e 类样式的单元格具有边框和渐变颜色，并使用 swatch e对其进行主题化。网格布局现在如下截屏所示：

还有更多内容...

你可以通过向其添加 data-theme 属性来使单个单元格 ui-block 与其他单元格不同的主题化。要使整行与网格中的其他行不同主题化，你需要将相同的 data-theme 属性添加到该行的所有单元格。

添加内容到布局网格单元格

你可以在布局网格的 ui-block 单元格中添加任何类型的元素。你甚至可以在此单元格中添加一个布局网格。你必须明智地选择你想要的屏幕外观，记住移动设备的有限屏幕尺寸。

向任何容器添加网格布局

通过将 ui-grid 类添加到任何容器中，你可以向任何容器添加网格。以下代码片段将整个页面样式化为两列网格：

<div id="main" data-role="page" class="ui-grid-a">

另请参见

向页脚添加布局网格的方法见第三章, 工具栏

使用 XML 内容

你可以在应用程序中显示从各种格式和来源获得的数据。此示例向你展示如何显示从 XML 文件中获取的一组示例学生记录。

准备工作

从 code/04/xml-content 源文件夹中复制此方法的完整代码。你可以使用 URL http://localhost:8080/04/xml-content/main.html 启动此代码。

如何做...

创建带有具有属性 name 和 age 的学生节点的 student.xml 文件。每个 student 节点有多个 course 子元素。每个 course 元素都有一个 name 属性和一个如下所示的子 marks 元素：

<?xml version="1.0" encoding="utf-8" ?>
<students>
 <student name="Alex" age="22">
    <course name="HTML5">
      <marks>89</marks>
    </course>
    <course name="CSS3">
      <marks>88</marks>      
    </course>
    <course name="JavaScript">
      <marks>80</marks>      
    </course>
  </student>
  . . . . 
</students>

创建 main.html 文件并添加一个隐藏的 div 容器。你可以将 XML 数据读取到这个 div 中，然后格式化并显示它：
```
<div id="content" data-role="content" data-theme="b">
  <div id="hiddendiv" hidden="true">hi</div>
</div>
```

在 main.html 的 <head> 部分中包含以下 JavaScript 代码，以加载 XML 文件，格式化数据，然后显示它：

$("#main").live("pageinit", function(event) {
  var str="";
 $("#hiddendiv").load("student.xml", function() {
    $("#hiddendiv").find("student").each(function() {
      str += "<div data-role='collapsible' data-theme='d'
        data-content-theme='d'>";
      str += "<h3>" + $(this).attr("name") + ", "
          + $(this).attr("age") +" years</h3>";
      str += "<ul data-role='listview'>";
      var i=0;
      $(this).find("course").each(function() {
        str += "<li>" + $(this).attr("name") + " : " 
            + $(this).children("marks").html() + "</li>";
      });
      str += "</ul></div>";
    });
 $("#content").html(str).trigger("create");
  });
});

工作原理...

在 main.html 中，添加一个带有 id="hiddendiv" 的 div 容器，并通过设置属性 hidden="true" 来隐藏它。为 pageinit 事件创建事件处理程序，以便在页面初始化和内存可用时处理 XML 数据的加载。使用 jQuery Ajax 的 load() 方法将 XML 数据加载到 hiddendiv 中。加载成功后，使用 jQuery 的 find() 方法找到每个 student 节点。对于每个 student，通过创建可折叠项（使用 data-role="collapsible"）生成 HTML 代码。将可折叠项标题设置为学生的 name 和 age。你可以使用 jQuery 的 attr() 方法从 student 节点的属性中获取这些值。接下来，找到 student 节点内的每个课程并获取 course 的 name 和 marks。通过使用 children() 调用读取 marks 值，该调用提取 course 节点的第一个子元素。将 course 元素添加到无序列表中（使用 data-role="listview"）。

一旦 HTML 内容构建完成，将其设置为"#content"页面内容 div，并触发"create"方法，让 jQuery Mobile 框架发挥其作用并生成增强控件，如下面的屏幕截图所示：

还有更多...

本教程向您展示如何通过 Ajax 从位于相同文件夹中的 XML 文件中读取内容。您也可以向服务器发送 Ajax 请求，获取此 XML 作为响应。jQuery 库有一大堆选择器和操作器，可以用来读取和写入 XML 数据。访问docs.jquery.com了解更多信息。

注意

XML 结构需要结束标记，这使它变得臃肿。尽量使用更多的属性，而不是子节点，尽量使您的 XML 尽可能轻巧。您还可以使用诸如gzip之类的算法来压缩 XML。

使用本机浏览器渲染 XML

几乎所有浏览器都知道如何直接渲染和显示 XML 数据。如果 XML 内容有相关的样式表，还可以对 XML 内容进行格式化和样式化。在您的 jQuery Mobile 应用程序中，您可以在可以使用target属性在锚链接上打开内容的情况下，利用此功能，如下面的代码所示：

<a href="student.xml" target="student" data-role="button">Open Student details</a>

另请参阅

使用 JSON 内容教程

使用 JSON 内容

JSON代表JavaScript 对象表示法。它是一种轻量级的数据交换格式，非常容易使用。本教程向您展示如何从 JSON 文件中显示贵金属的价格。

准备工作

从code/04/json-content源文件夹中复制此教程的完整代码。您可以使用 URL http://localhost:8080/04/json-content/main.html 来启动此代码。

如何做...

创建包含五种贵金属数组的precious.json文件。名称、符号以及日内open，close，high和low价格也可用，如下面的代码所示：

[
  {
    "name": "Gold",
    "symbol": "Au",
    "price": { "open": 1642.46, "close": 1682.42, "high": 1699.66, "low": 1638.51 }
  },
  {
    "name": "Silver",
    "symbol": "Ag",
    "price": { "open": 31.24, "close": 33.11, "high": 33.65, "low": 31.21 }
  },
  {
    "name": "Platinum",
    "symbol": "Pt",
    "price": { "open": 1621.15, "close": 1623.87, "high": 1624.45, "low": 1620.98 }
  },
  {
    "name": "Paladium",
    "symbol": "Pd",
    "price": { "open": 656.05, "close": 657.35, "high": 657.75, "low": 655.25 }
  },
  {
    "name": "Rhodium",
    "symbol": "Rh",
    "price": { "open": 1434.38, "close": 1434.68, "high": 1434.98, "low": 1434.12 }
  }
]

创建main.html，并向其中添加一个带有id="preciousdata"的空的div。您可以在这里读取 JSON 文件，格式化并显示数据：
```
<div id="content" data-role="content" data-theme="b">
  <div id="preciousdata"></div>
</div>
```
在main.html的<head>部分中包含以下 JavaScript 代码，以获取和加载 JSON 文件，格式化数据，并在布局网格中显示贵金属的价格表：
```
$("#main").live("pageinit", function(event) {
 $.getJSON("precious.json", function(metal) { 
```

接下来，将用于创建布局网格的 HTML 字符串存储在本地变量中：

    var blocka = "<div class='ui-block-a' style='width: 40%'>";
    var blockb = "<div class='ui-block-b' style='width: 15%'>";
    var blockc = "<div class='ui-block-c' style='width: 15%'>";
    var blockd = "<div class='ui-block-d' style='width: 15%'>";
    var blocke = "<div class='ui-block-e' style='width: 15%'>";
    var title = "<div class='ui-bar ui-bar-a' style='text-align: right'>";
    var uibarc = "<div class='ui-bar ui-bar-c' style='text-align: right'>";
    var uibare = "<div class='ui-bar ui-bar-e' style='text-align: right'>";

使用上面定义的本地变量构建布局网格标题的 HTML 内容：

    var str="<div class='ui-grid-d'>";
    str += blocka + title + "Precious Metal (USD)</div></div>";
    str += blockb + title + "Open</div></div>";
    str += blockc + title + "High</div></div>";
    str += blockd + title + "Low</div></div>";
    str += blocke + title + "Close</div></div>";

现在为每个金属创建包括其价格详细信息的 HTML 内容：

    for (var i in metal) {
      str += blocka + uibare + metal[i].name 
          + " (" + metal[i].symbol + ")</div></div>";
      str += blockb + uibarc + metal[i].price.open 
          + "</div></div>";
      str += blockc + uibare + metal[i].price.high 
          + "</div></div>";
      str += blockd + uibarc + metal[i].price.low 
          + "</div></div>";
      str += blocke + uibare + metal[i].price.close 
          + "</div></div>";
    }
    str += "</div>";

最后，将这些数据添加到#preciousdata div 中，并触发"create"方法来显示格式化的 JSON 数据：
```
 $("#preciousdata").html(str).trigger("create");
  });
});
```

它是如何工作的...

在 main.html 中，添加一个空的 div 容器，其 id="preciousdata"。您可以使用此容器稍后显示格式化的 JSON 数据。为 pageinit 事件创建事件处理程序，以在页面初始化并在内存中可用时处理 JSON 数据的加载。使用 $.getJSON() jQuery 调用通过 GET 请求从服务器获取 JSON 编码的数据。现在，JSON 数据可用在 metal 对象中。

在 getJSON 方法的回调函数中，使用 ui-grid-d 类创建一个五列布局网格的 HTML 内容。五列标题分别是 贵金属（美元）、开盘价、最高价、最低价 和 收盘价。使用 ui-block 类为每个列单元格创建标题行。接下来，循环遍历 metal 中的对象，并构造列单元格，如下所示。

使用样式 e 和样式 c 交替为列设置主题。您可以使用样式 a 不同地设置标题。最后，将生成的 HTML 内容设置为 #preciousdata div，并触发 create 方法以让 jQuery Mobile 增强布局网格。现在，以以下截图所示的方式显示了包含贵金属价格数据的 JSON：

还有更多...

本方法向您展示如何使用 jQuery.getJSON() 方法从服务器获取 JSON 数据。jQuery 库还提供了一个 jQuery.parseJSON() 方法，您可以使用它将 JSON 字符串直接解析为 JavaScript 对象，如下面的代码所示：

var preciousobject= jQuery.parseJSON('{"name":"Gold"}');

用于数据存储和数据传输的 JSON

JSON 在今天非常流行，用于存储和传输数据。JSON 是 JavaScript 的一个子集，正如本示例所示，使用 JavaScript 读取 JSON 数据非常简单。与 XML 相比，JSON 轻量且使用的带宽较少（例如，没有开始和结束标记）。JSON 还得到了许多面向文档的数据库的原生支持，如 CouchDB 和 MongoDB。

JSON 解析器

JSON 数据也可以使用 JavaScript 的 eval() 方法加载。但是，只有在绝对必要且非常确定 JSON 文本文件的来源时才能这样做。使用 JSON 解析器 加载数据始终更安全，因为这将仅接受有效的 JSON 数据，并防止潜在的恶意代码运行。有关更多详细信息以及访问各种可用的 JSON 解析器，请参阅 www.json.org。通常首选 jQuery JSON 方法，因为它们非常方便且安全可靠。

注意

始终使用正确实现的 JSON 解析器来读取和写入 .json 文件。避免使用 eval() 方法，这是不安全的。

另请参见

使用 XML 内容的方法

第五章：表单

在本章中，我们将介绍：

表单控件的原生样式
禁用文本控件
在网格中分组单选按钮
自定义复选框组
创建动态翻转开关和滑块控件
使用选项来自动初始化选择菜单
验证表单
使用 POST 提交表单
使用 GET 获取数据
创建一个可访问的表单

介绍

jQuery Mobile 框架默认增强标准 HTML 表单元素，使其触摸友好，同时在多个设备和平台上运行。表单可以包含多个控件，而你可以使用在其上设置 data-role='controlgroup' 的 fieldset 来对这些控件进行分组。默认情况下，控件以垂直方式列出。你可以使用 data-type='horizontal' 属性将它们水平排列。表单支持 HTTP GET ，POST 和其他操作。在适当的情况下，使用 Ajax 进行表单提交。

表单控件的原生样式

jQuery Mobile 框架默认增强表单及其控件。这个配方向你展示了设置表单控件原生样式的不同方法，以及如何自动初始化这些控件。

准备工作

从 code/05/native-style 源文件夹中复制此配方的全部代码。可以使用 URL http://localhost:8080/05/native-style/main.html 启动此代码。

如何进行...

在 <head> 部分中，向 main.html 添加以下脚本以使所有按钮以原生样式呈现：

$(document).bind('mobileinit', function() {
 $.mobile.page.prototype.options.keepNative = 'button';
});

在页面内容中添加一个表单，以设置控件的原生样式：

<form action='#' method='post'>
  <p><label for='button1'>Button 1</label></p>
  <button name='button1'>Button: keepNative configuration</button>
  <p><label for='button2'>Button 2</label></p>
 <button name='button2' data-role='button'>Button: data-role='button'</button>
  <p><label for='button3'>Button 3</label></p>
  <button id='button3' name='button3'>Button: buttonMarkup()</button>
 <script>$('#button3').buttonMarkup(); </script>
  <p><label for='input1'>Input 1</label></p>
  <input type='submit' name='input1' value='Input: default'></input>
  <p><label for='input2'>Input 2</label></p>
  <input type='submit' name='input1' data-role='none' value="Input: data-role='none'"></input><p>
  <a href='#'>Default anchor link</a></p>
 <a href='#' data-role='button'>Anchor: data-role='button'></a>
</form>

它是如何工作的...

在 main.html 中，添加一个事件处理程序，处理应用程序启动时触发的 mobileinit 事件。在这里，将页面插件的 keepNative 属性设置为 'button'。现在，框架将不会增强按钮控件，而是以原生样式呈现它们。现在在表单中添加 button1 ，它将以原生样式呈现。要覆盖这种原生样式，添加 button2 并设置属性 data-role='button'。类似地，添加 button3 并在脚本中调用 buttonMarkup（） 方法，如前面的代码中所示。现在，button2 和 button3 都通过覆盖默认的原生样式来进行增强。

框架默认增强所有其他控件。添加一个输入按钮 input1，你会看到它已被增强。要使用原生样式控件，可以像上面代码中显示的那样使用 data-role='none' 属性来设置输入控件 input2。

对于锚链接，默认情况下使用原生样式。你可以用 data-role='button' 属性来增强锚链接。创建的表单如上所示。

还有更多...

如前所述，框架会增强表单控件，使其在所有平台上都能轻松使用手指操作。但这些控件可能在其他小容器（如工具栏）中使用时会显得稍大。您可以通过在控件上设置data-mini='true'属性，使用控件的迷你版本。控件现在变小了一点，但仍然是手指友好的。您可以直接在controlgroup上设置此属性，所有子元素将自动缩小。访问 jQuery Mobile 在线文档，查看各种控件的比较：jquerymobile.com/test/docs/forms/forms-all-compare.html。

设置多个控件使用原生样式

您可以使用页面插件指定多个控件以使用原生样式。下面一行代码会原生样式化表单中的所有按钮、输入控件和选择菜单：

$.mobile.page.prototype.options.keepNative = 'button, input, select';

`data-role='none'`属性

根据控件类型，框架通过使用相应的插件来初始化和增强控件。当指定data-role='none'时，控件不会被框架增强，并且控件会使用原生样式。使用data-theme属性设置控件主题等操作将被忽略。

注意

jQuery Mobile 提供的增强样式是轻触友好的，非常适合移动设备。尽量避免在应用程序中使用原生样式。

禁用文本控件

此教程向您展示了在表单中启用和禁用文本控件的不同方法。

准备就绪

从code/05/text-controls源文件夹中复制此教程的全部代码。可以使用 URL http://localhost:8080/05/text-controls/main.html启动此代码。

如何做...

在main.html中，在表单中创建以下文本控件：

<form action='#' method='post'>
  <input type='search' id='searchitem' name='searchitem' autofocus
      placeholder='Enter search text' value='' />
  <input type='text' id='textitem' name='textitem' 
      placeholder='Enter text item' value='' />
  <textarea id='textarea' name='textarea' 
      placeholder='Enter description'></textarea>
 <a href='#' data-role='button' class='ui-disabled'>More Details</a>
</form>

将以下脚本添加到<head>部分以禁用所有控件：

  $('#main').live('pageinit', function(event) {
 $('#textitem').prop('disabled', true);
 $('#textarea').textinput('disable');

然后处理搜索文本控件的change事件来启用所有表单控件：

   $('#searchitem').bind('change', function(event, ui) {
      var str = $(this).attr('value');
 $('#textitem').prop('disabled', true);
 $('#textarea').textinput('enable').append(str
 + ' is absolutely awesome!');
      $('a').removeClass('ui-disabled');
   });
});

它的运作方式...

在main.html中，添加一个带有type='search'的搜索控件，并添加一个带有type='text'的文本。现在，按照上面的代码添加一个空的textarea。添加一个链接并通过设置class='ui-disabled'属性来禁用它。在脚本中，添加一个pageinit事件处理程序，在页面初始化后调用。在这里，通过调用prop('disabled', true)方法来设置其disabled属性来禁用文本输入。然后通过调用textinput 插件的textinput('disable')方法来禁用textarea。现在，当应用程序加载时，除搜索输入外，表单上的所有控件都被禁用，如下面的屏幕截图所示：

注意

您不能在使用data-role='button'将增强为按钮的锚链接上使用disabled属性。此属性会被忽略。

现在，为了启用控件，将搜索控件的 change 事件绑定到事件处理程序上。在这里，通过调用 prop('disabled', false) 方法来启用 textitem 控件。接下来，在 textarea 上调用 textinput('enable') 方法来调用其 textinput 插件 上的 enable 方法。在 textarea 上调用 append() 方法以向其添加文本。最后，在锚链接上调用 jQuery removeClass() 方法来移除 'ui-disabled' 类。现在，一旦您在搜索字段中输入内容，表单控件都会被启用，如下图所示：

将单选按钮分组到网格中

jQuery Mobile 框架允许您在水平或垂直方向上分组单选按钮。本示例向您展示如何在简单的座位预订表单中将单选控件分组为 3 x 3 网格。

准备工作

从 code/05/radiobutton-grid 源文件夹中复制此示例的完整代码。此代码可使用 URL http://localhost:8080/05/radiobutton-grid/main.html 运行。

如何执行...

在 main.html 中，使用 3 x 3 布局网格创建九个单选控件。这些单选按钮是同一个控件组的一部分。

<form action='#' method='post'>
  <fieldset data-role='controlgroup' data-type='horizontal' 
      class='ui-grid-a'>
    <div class='ui-block-a' style='width: 30%'>
        <legend>First Row</legend></div>
    <div class='ui-block-b' style='width: 70%'>
      <input type='radio' name='radio-1' id='radio-11' value='Seat-A1' checked />
      <label for='radio-11'>A-1</label>
      <input type='radio' name='radio-1' id='radio-12' value='Seat-A2' />
      <label for='radio-12'>A-2</label>
      <input type='radio' name='radio-1' id='radio-13' value='Seat-A3'/>
 <label id='l-13' for='radio-13' class='ui-corner-right'>A-3</label>
    </div>
    <div class='ui-block-a' style='width: 30%'>
        <legend>Mid Row</legend></div>
    <div class='ui-block-b' style='width: 70%'>
      <input type='radio' name='radio-1' id='radio-21' value='Seat-B1' />
 <label id='l-21' for='radio-21' class='ui-corner-left'>B-1</label>
      <input type='radio' name='radio-1' id='radio-22' value='Seat-B2' />
      <label for='radio-22'>B-2</label>
      <input type='radio' name='radio-1' id='radio-23' value='Seat-B3'/>
 <label id='l-23' for='radio-23' class='ui-corner-right'>B-3</label>
    </div>
    <div class='ui-block-a' style='width: 30%'>
        <legend>Last Row</legend></div>
      <div class='ui-block-b' style='width: 70%'>
        <input type='radio' name='radio-1' id='radio-31' value='Seat-C1' />
 <label id='l-31' for='radio-31' class='ui-corner-left'>C-1</label>
        <input type='radio' name='radio-1' id='radio-32' value='Seat-C2' />
        <label for='radio-32'>C-2</label>
        <input type='radio' name='radio-1' id='radio-33' value='Seat-C3'/>
        <label for='radio-33'>C-3</label>
    </div>
  </fieldset>
</form>

将以下脚本添加到 <head> 部分以修复边缘单选按钮的样式：

$('#main').live('pageshow', function(event) {
  $('#l-13').children('span').addClass('ui-corner-right ui-controlgroup-last');
  $('#l-23').children('span').addClass('ui-corner-right ui-controlgroup-last');
  $('#l-21').children('span').addClass('ui-corner-left');
  $('#l-31').children('span').addClass('ui-corner-left');
});

工作原理...

在 main.html 中，通过指定 data-role='controlgroup' 和 data-type='horizontal' 来添加水平单选控件组。现在将 ui-grid-a 类添加到此 fieldset 容器中，以创建两列布局网格。对于每一行，通过将 class='ui-block-a' 指定给 div 容器，在第一列添加图例，并通过 class='ui-block-b' 在第二列添加单选按钮。根据上述代码，添加九个具有适当标签的单选按钮，每行包含三个单选按钮。这将创建一个 3 x 3 单选按钮组的网格。

在上面的代码中，你会发现网格中的第一个和最后一个单选按钮样式正确，但所有其他边缘单选按钮（带有标签 l-13、l-21、l-23 和 l-31）样式不正确。它们具有矩形边缘而不是圆角。为了解决这个问题，你需要将框架为第一个单选按钮的标签生成的样式（class='ui-corner-left'）复制到标签 l-21 和 l-31 的内部span中。同样地，将框架为最后一个单选按钮的标签生成的样式（class='ui-corner-right ui-controlgroup-last'）复制到标签 l-13 和 l-23 的内部span中。现在单选按钮网格的样式已经正确，如下截图所示，你现在可以一次仅选择整个网格中的一个单选按钮：

还有更多...

当框架遇到一个带有type='radio'的input控件时，它会自动使用checkboxradio 插件将其增强为样式化的单选按钮。你可以通过在初始化期间使用data-theme属性来为单选按钮设置主题。你可以通过使用data-role='none'属性来关闭自动初始化并使用原生样式。

另请参阅

自定义复选框控件组 示例

自定义复选框控件组

默认的水平分组复选框控件没有图标，垂直分组的复选框控件不使用活动状态主题。这个示例向你展示了如何自定义复选框并添加这些样式。它还向你展示了如何调整布局以处理不同的屏幕尺寸。在这个示例中，你将创建一个简单的博客订阅表单。

准备工作

从code/05/custom-checkbox源文件夹中复制这个示例的全部代码。你可以使用http://localhost:8080/05/custom-checkbox/main.html网址来运行这段代码。

如何实现...

首先创建一个包含水平和垂直复选框控件组的表单。通过 JavaScript 在pageshow事件处理程序中向水平复选框控件添加图标来自定义水平复选框控件。复选框控件的change事件指示复选框checked状态是否已更改。使用change事件处理程序来添加和切换复选框的活动状态。

在main.html中，创建一个带有垂直复选框控件组的表单：

<form action='#' method='post'>
  <div data-role='fieldcontain'>
    <fieldset data-role='controlgroup'>
      <legend>Subscribe to:</legend>
      <input type='checkbox' name='posts' id='posts' />
 <label for='posts' id='postslbl'>New Posts</label>
      <input type='checkbox' name='comments' id='comments' />
 <label for='comments' id='commentslbl'>Comments</label>
    </fieldset>
  </div>

接下来添加两个水平切换集或复选框组：

  <div data-role='fieldcontain'>
    <fieldset data-role='controlgroup' data-type='horizontal'>
      <legend>Notify Me:</legend>
      <input type='checkbox' name='notify' id='notify' />
      <label for='notify'>Immediate</label>
      <input type='checkbox' name='digest' id='digest' />
      <label for='digest'>Daily Digest</label>
    </fieldset>
  </div>
  <div data-role='fieldcontain'>
    <fieldset data-role='controlgroup' data-type='horizontal'>
      <legend>Share To:</legend>
      <input type='checkbox' name='twitter' id='twitter' />
 <label for='twitter' id='twitterlbl'>Twitter</label>
      <input type='checkbox' name='facebook' id='facebook' />
 <label for='facebook' id='facebooklbl'>Facebook</label>
    </fieldset>
  </div>
</form>

将以下脚本添加到<head>部分以向水平组添加图标：

$('#main').live('pageshow', function(event, data) {
  $('#twitterlbl').children('span').append("<span class='ui-icon ui-icon-shadow ui-icon-checkbox-off'>").trigger('create');
  $('#twitterlbl').addClass('ui-btn-icon-left').trigger('refresh');
  $('#facebooklbl').children('span').append("<span class='ui-icon ui-icon-shadow ui-icon-checkbox-off'>").trigger('create');
  $('#facebooklbl').addClass('ui-btn-icon-left').trigger('refresh');
  updatePosts();
  updateComments();
  $('#posts').bind('change', updatePosts);
  $('#comments').bind('change', updateComments);
});

接下来，绑定change事件来处理控件的checked状态变化：

function updatePosts(event, ui) {
 if($('#posts').prop('checked')) {
    $('#postslbl').addClass('ui-btn-active').trigger('refresh');
  } else {
    if($('#postslbl').hasClass('ui-btn-active'))
      $('#postslbl').removeClass('ui-btn-active').trigger('refresh');
  }
}

最后，根据垂直复选框的checked状态切换活动状态：

function updateComments(event, ui) {
 if($('#comments').prop('checked')) {
    $('#commentslbl').addClass('ui-btn-active').trigger('refresh');
  } else {
    if($('#commentslbl').hasClass('ui-btn-active'))
      $('#commentslbl').removeClass('ui-btn-active').trigger('refresh');
  }
}

工作原理...

在main.html中，向博客订阅表单添加三个具有data-role='controlgroup'的fieldset元素。向第一个fieldset元素添加一个垂直复选框组，其中包含文章和评论的复选框。第二个控制组是用于选择博客通知的水平切换集合（立即和作为每日摘要）。第三组复选框也是水平的，选项包括在Twitter和Facebook上分享。

默认情况下，水平切换集合不带图标。你可以自定义并向其添加图标。为pageshow事件创建事件处理程序，并将所需的样式添加到第三个水平切换集合的标签中。在具有id='twitterlbl'和id='facebooklbl'的标签中添加具有class='ui-icon ui-icon-shadow ui-icon-checkbox-off'的内部 span，并且还将ui-btn-icon-left类添加到标签中。这将在两个复选框的左侧添加一个图标，类似于垂直复选框控件提供的图标。将其与其他水平切换集合进行比较。

默认情况下，垂直复选框具有图标，并且在选中时这些图标显示为勾号。垂直复选框不会获得btn-active样式（与水平复选框不同）。要添加活动按钮样式，请为两个垂直复选框（具有id='posts'和id='comments'）创建change事件的事件处理程序。对于这两个复选框，使用prop('checked')调用来查找控件是否被checked，然后添加或删除ui-btn-active类以为垂直复选框设置样式，类似于水平复选框。屏幕显示如下截图所示：

另请参阅

在网格中对单选按钮进行分组 的方法

创建动态翻转开关和滑块控件

本方法向您展示了如何使用 JavaScript 将翻转开关和滑块控件动态添加到页面，并处理其事件。在这里，您将创建一个简单的音量控制表单，其中包含一个音量滑块，在音量非常高时会向用户发出警告。

准备就绪

从code/05/dynamic-slider源文件夹中复制这个配方的全部代码。可以使用 URL http://localhost:8080/05/dynamic-slider/main.html启动这段代码。

如何做...

在main.html中，向页面内容添加以下空表单：
```
<form id='volumeForm' action='#' method='post'></form>
```

在<head>部分添加以下脚本，动态添加一个开关和一个滑块：

$('#main').live('pageinit', function(event) {
  var str="<div data-role='fieldcontain' style='width: 50%'><label for='flipswitch'>Volume:</label>"
    + "<select name='flipswitch' id='flipswitch' data-role='slider' data-track-theme='d'>"
    + "<option value='no'>Off</option><option value='yes'>On</option></select></div>"
    + "<div id='volcontainer' data-role='fieldcontain' style='width: 100%'>"
    + "<input type='range' name='volume' id='volume' value='8' min='0' max='15' data-track-theme='b' disabled /></div>";
 $('#volumeForm').html(str).trigger('create');

处理翻转开关的change事件以启用音量滑块控件：

  $('#flipswitch').bind('change', function(event, data) {
 if ($(this).slider().val() == 'no') {
      $('#volume').slider('disable');
    } else {
      $('#volume').slider('enable');
    }
  });
});

处理音量滑块的change事件以根据其值设置滑块样式：

$('#main').live('pageshow', function(event) {
 $('#volume').bind('change', function(event, data) {
    if ($(this).slider().val() > 10) {
      $('#volcontainer').find('.ui-btn-down-b')
      .removeClass('ui-btn-down-b').addClass('ui-btn-down-e');
    } else {
      $('#volcontainer').find('.ui-btn-down-e')
      .removeClass('ui-btn-down-e').addClass('ui-btn-down-b');
    }
  });
});

它是如何工作的...

在main.html中添加一个空表单id='volumeForm'。为pageinit事件创建一个事件处理程序，该事件在页面初始化后触发。在这里，生成表单的 HTML 内容。使用带有data-role='slider'的选择控件添加一个翻转开关控件（id='flipswitch'）。这个翻转开关将切换音量On和Off。添加一个带有type='range'的输入控件以创建滑块控件（id='volume'）。在启动时将disabled属性添加到滑块上，以便控件在启动时被禁用。将此 HTML 内容设置为空表单并触发'create'方法以让框架初始化和增强控件。当页面加载时，您将看到音量控制表单，其中包含动态添加的翻转开关和禁用的滑块控件，如下图所示：

接下来添加代码来处理#flipswitch的change事件，在事件处理程序中，使用slider().val()调用检查翻转开关是on还是off。根据这个值，通过调用slider('enable')或slider('disable')来启用或禁用滑块音量控制。现在当你切换翻转开关的值时，你会看到滑块在屏幕截图中启用或禁用，如下所示：

在pageshow事件处理程序中绑定音量滑块控件的change事件，并在此处使用slider().val()调用检查滑块的值。如果值大于10的阈值音量，则将滑块设置为主题'e'，如果尚未设置样式，则设置。如果值低于10的阈值，则将主题设置回主题'b'。您可以使用 jQuery 的find()方法并将ui-btn-down-b类替换为ui-btn-down-e类，反之亦然。现在当您设置一个高音量时，滑块会变成黄色，如下图所示：

还有更多...

您可以使用data-theme属性为翻转开关和滑块控件设置主题，使用data-theme-track属性在初始化时使用滑块轨道。要在初始化后操作这些控件，您将不得不操作底层本机控件，然后在它们上调用'refresh'方法。

滑块的自动初始化

当框架遇到一个带有 type='range' 的 input 控件时，它会自动使用 滑块插件 将其增强为滑块控件。同样地，滑块插件会将带有 data-role='slider' 的选择控件增强为翻转开关。你可以通过使用 data-role='none' 属性关闭自动初始化并使用原生样式。

使用选项自动初始化选择菜单

原生 HTML 选择菜单被 jQuery Mobile 框架增强，使其对移动设备更加友好。本示例展示了如何通过 JavaScript 设置其控件选项以自动初始化 选择菜单。

准备工作

从 code/05/select-menu 源文件夹复制本示例的完整代码。可以使用 URL http://localhost:8080/05/select-menu/main.html 启动此代码。

怎样做...

在 main.html 中，添加以下代码以创建选择菜单：

<form action='#' method='post'>
  <div data-role='fieldcontain'>
    <label for='selectid' class='select'>Sample Select Menu</label>
    <select name='selectid' id='selectid' multiple data-native-menu='false' data-overlay-theme='e'>
      <option value='Sample Select Menu' data-placeholder='true'>Sample Select Menu</option>
      <option value='opt1'>Option 1</option>
 <option value='disabledopt' disabled>Disabled Option</option>
      <option value='opt2'>Option 2</option>
 <optgroup label='Options in Group1'>
        <option value='grp1'>&nbsp;&nbsp;&nbsp;&nbsp;Group Option1</option>
        <option value='grp2'>&nbsp;&nbsp;&nbsp;&nbsp;Group Option2</option>
      </optgroup>
 <optgroup label='Options in GroupA'>
        <option value='grpA'>&nbsp;&nbsp;&nbsp;&nbsp;Group OptionA</option>
        <option value='grpB'>&nbsp;&nbsp;&nbsp;&nbsp;Group OptionB</option>
      </optgroup>
    </select>
  </div>
</form>

将以下脚本添加到 <head> 部分以设置选择菜单控件选项：

$('#main').live('pageinit', function(event) {
 $('#selectid').selectmenu({ 
    theme: 'd', 
    inline: false, 
    corners: true,
    icon: 'star',
    iconpos: 'left',
    shadow: true,
    iconshadow: true
  });
});

它是如何工作...

在 main.html 中，创建一个表单，并向表单添加一个带有 multiple 属性的选择控件以启用多选。设置属性 data-native-menu='false' 表示选择菜单应由框架增强。还设置 data-overlay-theme='e' 属性以指定应该使用 e（黄色）的样式覆盖层。

添加第一个带有 data-placeholder 属性的选项元素，表示此选项元素的文本必须用作选择菜单的标题。现在按照前面的代码所示添加不同的选项元素。opt1 和 opt2 元素是常规选项项目。通过向选项元素添加 disabled 属性来禁用 disableopt 元素。然后使用 optgroup 元素添加两个选项组（Group1 和 GroupA），如前面的代码所示。这些可以包含子选项元素。选择菜单显示如下截图所示：

![它是如何工作的...](https://github.com/OpenDocCN/freelearn-fe-framework-zh/raw/master/docs/jqmobi-cb/img/7225_05_10.jpg)

在 pageinit事件处理程序中添加脚本，该事件处理程序在启动时初始化页面后被调用。在这里，通过将选项值传递给 **selectmenu 插件** 来设置选择菜单控件的初始配置选项。在代码中，设置选择菜单的theme、inline、corners、icon、iconpos、shadow和iconshadow 属性的值。现在当你点击选择菜单时，样式化的菜单选项如下截图所示：

![它是如何工作的...](https://github.com/OpenDocCN/freelearn-fe-framework-zh/raw/master/docs/jqmobi-cb/img/7225_05_11.jpg)

`更多内容...`

当框架遇到一个 select 元素时，它会自动使用 selectmenu 插件 将其增强为选择菜单。你可以通过使用 data-role='none' 属性关闭自动初始化并使用原生样式。

`打开和关闭选择菜单`

您可以调用selectmenu插件上的open和close方法，并以以下屏幕截图所示的方式以编程方式打开或关闭选择菜单：

$('#selectid').selectmenu('open'); // open select menu
$('#selectid').selectmenu('close'); // close select menu

`#验证表单

在提交到服务器之前验证表单可以节省带宽和时间，因为错误可以在客户端捕获。因此可以避免服务器请求。在 jQuery Mobile 应用程序中，可以使用 JavaScript 验证表单。此配方向您展示了如何验证博客评论表单中输入的条目。

准备就绪

从code/05/validate-form源文件夹中复制此配方的完整代码。可以使用 URL http://localhost:8080/05/validate-form/main.html启动此代码。

如何做...

在main.html中，添加以下代码以创建一个表单：

<form id='commentform' action='#' method='post'>
  <div data-role='fieldcontain'>
    <label for='username'>Name</label>
    <input id='username' name='username' type='text' required placeholder='Enter Name' />
  </div>
  <div data-role='fieldcontain'>
    <label for='email'>Email ID</label>
    <input id='email' name='email' type='email' required placeholder='Enter Email' />
  </div>
  <div data-role='fieldcontain'>
    <label for='comments'>Comments</label>
    <textarea id='comments' name='comments' required placeholder='Enter Comments <10-100 chars long>'></textarea>
  </div>
  <div id='errmsg' style='color: #f00'></div>
  <input id='submitid' type='submit' data-transition='pop' value='Submit Comment'/>
</form>

添加以下脚本来验证评论字段：

$('#main').live('pageinit', function(event) {
 $('#commentform').submit(function() {
    var len = $('#comments').val().length;
    if ( len < 10 || len > 100 ) {
      $('#errmsg').text('Invalid comments. Length must be between 10-100 chars').show().fadeOut(5000);
      return false;
    }
    else
      return true;
  });
});

它是如何工作的...

在main.html中，添加一个表单（id='commentform'），并向表单添加以下三个字段，用户名（type='text'），电子邮件（type='email'）和评论（textarea）。对所有三个字段添加required属性以将它们指定为必填项。通过使用placeholder属性添加适当的提示给用户，如前述代码所示。向表单添加一个空的 div（id='errmsg'）以在表单验证时显示任何错误消息。

当您加载表单并单击提交评论按钮而不输入姓名字段时，将显示以下错误消息：

单击提交按钮而不输入有效的电子邮件 ID时，将显示以下错误：

如上一个脚本中所示，添加pageinit事件处理程序。这将在页面在启动时被初始化后调用。在这里定义表单的submit()方法来验证评论的长度。如果评论长度无效，则在五秒后显示错误消息，然后淡出。现在因为有错误，所以从submit方法返回false；表单将不会被提交。

在成功验证后，从submit()方法返回true以成功将表单提交到服务器。

还有更多...

在此配方中，表单的action设置为#或与当前 HTML 页面相同的 URL。这种表单称为自提交表单。在这种情况下的默认响应是表单内容本身。如果表单由 Web 服务器提供，则可以自定义生成 post 的响应。如果您使用的是随本书源代码一起提供的 nodejs Web 服务器，则会得到自定义成功响应，而不是表单内容。

表单中的唯一 ID

在 jQuery Mobile 应用程序中，由于多个页面可以同时存在于 DOM 中，因此应确保表单控件的 ID 是唯一的。ID 应该在整个应用程序中是唯一的，而不仅仅是在单个页面中。如果不遵循此规则，查找和表单行为可能会失败或表现不同。一些浏览器可能仍然在一定程度上支持重复的 ID，但这并不保证。

另请参阅

使用 POST 提交表单的方法
使用 GET 获取数据 的方法

使用 POST 提交表单

这个方法向你展示了如何使用 Ajax POST 并提交表单，也展示了不使用 Ajax 时如何提交同一个论坛。在上一个方法中使用的博客评论表单在此用于提交。

准备工作

从 code/05/submit-form 源文件夹中复制此方法的完整代码。此代码可以使用 URL http://localhost:8080/05/submit-form/main.html 启动。要尝试此方法，您还需要启动随本书源代码一起提供的简单 nodejs web 服务器。使用以下命令启动服务器：

node jqmserver.js

怎么做...

在 main.html 中，按照以下代码创建博客评论表单：

<form id='commentform' action='/postComment' data-transition='pop' method='post'>
  <div data-role='fieldcontain'>
    <label for='username'>Name</label>
    <input id='username' name='username' type='text' required placeholder='Enter Name' />
  </div>
  <div data-role='fieldcontain'>
    <label for='email'>Email ID</label>
    <input id='email' name='email' type='email' required placeholder='Enter Email' />
  </div>
  <div data-role='fieldcontain'>
    <label for='comments'>Comments</label>
    <textarea id='comments' name='comments' required placeholder='Enter Comments <10-100 chars long>'></textarea>
  </div>
  <div id='errmsg' style='color: #f00'></div>
  <input id='submitid' type='submit' value='Submit Comment'/>
</form>

将以下脚本添加到 <head> 部分以验证评论字段：

$('#main').live('pageinit', function(event) {
 $('#commentform').submit(function() {
    var len = $('#comments').val().length;
    if ( len < 10 || len > 100 ) {
      $('#errmsg').text('Invalid comments. Length must be between 10-100 chars').show().fadeOut(5000);
      return false;
    }
    else
      return true;
  });
});

如何运作...

在 main.html 中，创建博客评论表单。将表单的 action 设置为 '/postComment'，并且还要指定 data-transition='pop' 属性。其余的代码和表单验证与前一个方法中的相同，并在那里详细解释。当你启动应用程序时，表单会显示如下截图所示：

填写表单，然后点击提交评论按钮。如果没有发现错误，表单将通过 Ajax 提交。自定义的 nodejs web 服务器响应 /postComment 请求，生成以下 HTML 内容作为带有 mime 类型 'text/html' 的响应：

<div data-role='page' data-theme='a'>
  <div data-role='header'>
    <h1>Comments Added</h1>
  </div>
  <div data-role='content'>
    Hi {User name entered}!
    <p>Your Email ID: {Email ID entered}</p>
    <p>Added your comment: {Comments entered}</p>
    <a href='#' data-role='button' data-rel='back'>Back</a>
  </div>
</div>

框架渲染响应如下截图所示：

页面过渡平稳，使用了 pop 动画。你可以点击返回按钮并导航回原始页面，因为也指定了 data-rel='back' 属性。

还有更多...

你可以通过向表单元素指定 data-ajax='false' 属性来提交此表单而不使用 Ajax。此代码在与 main.html 相同文件夹中的 non-ajax.html 文件中提供：

<form id='commentform' action='/postComment' method='post' data-ajax='false'>

当不使用 Ajax 时，响应会触发整个页面的刷新。在此方法中，服务器响应仅返回页面 div 容器，并且不返回具有任何链接到 jQuery Mobile 样式表的 <head> 元素。此外，响应中缺少对 jQuery 和 jQuery Mobile 库的引用。因此，结果页面如下截图所示。在此响应页面中没有样式，如果点击返回链接，它不起作用。

Ajax 响应

通过 Ajax 的服务器响应会替换请求表单的内容，就像本篇食谱中所示。您可以通过使用 DOM 检查器来查看此响应。但是，如果您查看页面源代码，则仍会显示原始页面。POST 请求不能被书签标记，因为它们在哈希中不包含任何查询参数。对 POST 请求的响应将返回与请求相同的 URL，并且不会更新 URL 哈希。

其他非 Ajax 提交表单的方式

本篇食谱向您展示了如何通过设置属性 data-ajax='false' 来提交表单，而不使用 Ajax。另一种不使用 Ajax 的方法是向表单指定一个 target 属性，如下所示：

<form id='commentform' action='/postComment' method='post' target='sometarget'>

这适用于 POST 和 GET 服务器请求。

Ajax 还可以通过使用 mobileinit 事件处理程序中以下代码中显示的全局配置来关闭应用程序：

$.mobile.ajaxEnabled = false;

参见

验证表单 食谱
使用 GET 获取数据 食谱
在第七章中的配置 ajaxEnabled* 食谱，配置

使用 GET 获取数据

本篇食谱向您展示了如何使用 Ajax GET 请求并从服务器获取数据。在本篇食谱中，服务器会通过来自 足球联赛分数 表单的 GET 请求返回足球比分。

准备工作

从code/05/get-request源文件夹中复制本篇食谱的完整代码。这段代码可以通过 URL http://localhost:8080/05/get-request/main.html 运行。要尝试这个食谱，您需要启动随本书源代码一起提供的简单 nodejs web 服务器。使用以下命令启动服务器：

node jqmserver.js

如何操作...

在main.html中，添加以下代码以创建一个表单：

<div id='scores' data-role='fieldcontain'>
 <form id='scoreform' action='/getScores' method='get'>
    The latest scores are now available!
    <input id='submitid' type='submit' name='submitid' data-inline='true' value='Fetch Scores' />
  </form>
</div>

将以下脚本添加到 <head> 部分以使用 Ajax 获取并显示分数：

$('#main').live('pageshow', function(event) {
  $('#scoreform').submit(function() {
 $.get('/getScores').success(showScores).error(errMsg);
    return false; // cancel the default submit
  });
});
function showScores(data) { // on success
 $('#scores').html(data).trigger('create');
}
function errMsg() { // on error
  $('#scores').html('Unable to fetch scores, try later');
}

它是如何工作的...

在main.html中，添加一个<div>容器，其id='scores'，并设置其属性data-role='fieldcontain'。这个<div>容器将显示分数。向页面添加一个表单（id='scoreform'），并将其action设置为'/getScores'，method设置为'get'。在表单中添加一个文本为 获取分数 的提交按钮，以从服务器获取分数。您可以向页面添加一个装饰的页脚，使用class='ui-bar ui-bar-e'。加载应用程序后，显示以下屏幕：

如前面代码所示，添加pageshow事件处理程序。当您单击submit按钮时，它调用 jQuery submit()方法。默认表单submit()的服务器响应将用新的内容替换整个页面。要获取部分页面更新，请调用 jQuery 的.get() Ajax 方法来从'/getScores'服务器 URL 获取数据。然后通过返回false取消默认的submit()方法。.get()方法指定了success和error的回调函数，如前面的代码所示。在成功的回调函数showScores()中，用从服务器获得的 HTML 响应替换#scores div 的内容。触发'create'方法以让 jQuery Mobile 框架初始化和增强新添加的内容。任何错误都由errMsg()错误处理程序处理，如前面的代码所示。

自定义的 Nodejs Web 服务器通过生成以下 HTML 内容作为响应来响应/getScores get 请求，MIME 类型为'text/html'：

<ul data-role='listview'>
  <li data-role='list-divider'>Group A</li>
    <li>Team A beat Team B [ 5 - 3 ]</li>
    <li>Team C lost to Team D [ 1 - 2 ]</li>
  <li data-role='list-divider'>Group B</li>
    <li>Team E drew Team F [ 0 - 0 ]</li>
    <li>Team G lost to Team H [ 3 - 4 ]</li>
</ul>

现在，仅通过此服务器响应替换了#scores <div>容器的内容。标题和页脚保持不变。结果显示如下截图所示：

还有更多...

您可以通过向表单元素指定data-ajax='false'属性来提交不使用 Ajax 的表单，如下代码所示。当不使用 Ajax 时，响应会触发完整页面刷新。因此确保服务器响应中返回一个正确的 jQuery Mobile 页面，否则结果页面可能存在样式和其他问题。

<form action='/someAction' method='get' data-ajax='false'>

Ajax 响应

服务器通过 Ajax 响应完全替换了请求表单的内容。您可以使用 DOM 检查器查看响应。但如果您查看页面源代码，原始页面仍然会显示。GET 请求可以被收藏夹添加为它们支持哈希中的查询参数。GET 响应允许更新 URL 哈希。

表单提交默认值

您也可以提交一个没有指定任何动作或方法属性的表单，如下代码中所示：

<form>

表单将使用动作和方法属性的默认值。方法将默认为'get'，动作将默认为当前页面的相对路径。您可以通过调用$.mobile.path.get()方法访问此路径。

注意

始终为表单指定action和method属性。

另请参阅

验证表单 配方
使用 POST 提交表单的配方
第七章中配置 ajaxEnabled 配方，配置

创建一个可访问的表单

jQuery Mobile 框架对无障碍功能（如WAI-ARIA）提供了很好的支持。这为无障碍工具（如屏幕阅读器）提供了支持。这使得您的应用程序屏幕可以被依赖这些辅助技术的用户阅读。此外，现在一些浏览器（如使用 Webkit 引擎的 Chrome）已经提供了语音输入控件。这些控件接受语音输入。本文介绍了如何生成支持语音输入并支持屏幕阅读器的无障碍表单控件。

准备工作

从 code/05/accessible-controls 源文件夹中复制本文的完整代码。您可以使用 URL http://localhost:8080/05/accessible-controls/main.html 启动此代码。

如何做…

在 main.html 中，添加以下代码以创建一个表单：

<form action='#' method='post'>
 <div data-role='fieldcontain' class='ui-hide-label'>
    <input type='text' name='username' id='username' placeholder='Enter Name' speech x-webkit-speech/>
    <label for='username'>Name</label>
  </div>
  <div data-role='fieldcontain'>
 <input type='number' name='age' id='age' placeholder='Enter Age' speech x-webkit-speech/>
    <label for='age' class='ui-hidden-accessible'>Age</label>
  </div>
  <div data-role='fieldcontain'>
    <input type='text' name='city' id='city' placeholder='Enter City' class='custom' speech x-webkit-speech/>
 <label for='city' class='ui-hidden-accessible'>City</label>
  </div>
  <input type='submit' name='submit' id='submit' value='Submit' />
</form>

它是如何工作的…

在 main.html 中，按如下方式添加三个字段，用户名（输入 type='text'）、年龄（输入 type='number'）和城市（输入 type='text'）。为每个字段关联一个标签，并为每组标签和输入控件添加一个 div 容器，该容器具有属性 data-role='fieldcontain'。这有助于框架根据平台和设置动态重新排列和调整布局。placeholder 属性用于为用户提供适当的输入提示。

要启用语音输入，请按照之前代码中所示为每个输入控件添加 speech 和 x-webkit-speech 属性。语音输入的支持完全取决于浏览器的实现，一些浏览器仍然没有实现它们。当页面加载时，您将看到以下截图：

您将在每个输入控件的右上角看到一个小麦克风图标。用户可以点击此图标，然后会提示用户为输入控件说出值。一旦用户说完，语音转文字引擎会将声音转换为文本，并在控件中显示输入值文本。虽然不是完全准确，但语音转文字技术正在日益改进。

还有更多…

正如前面提到的，jQuery Mobile 框架对 WAI-ARIA 等无障碍功能提供了很好的支持。因此，请为所有表单元素添加有意义的标签。当页面初始化时，框架会自动向屏幕阅读器公开这些标签。如果您已经使用占位符为用户提供提示，那么标签可能是多余的。但如果您希望建立一个支持无障碍功能的应用程序，那么您也应该定义标签。

如果你想使用占位符功能并支持辅助功能，jQuery Mobile 提供了一个简单的选项，通过在表单控件上使用样式'ui-hidden-accessible'隐藏标签。你也可以通过在表单字段容器中添加样式'ui-hide-label'来隐藏标签，代码中已经展示。现在标签不会显示在屏幕上，但依然可以被屏幕阅读器访问。你可以通过运行你喜欢的屏幕阅读器并访问创建的页面来验证这一点。

移动设备的受欢迎的语音阅读器

当今市场上有许多语音阅读器，你可以根据你的平台尝试任何受欢迎的语音阅读器。苹果手机有VoiceOver (见 www.apple.com/accessibility/iphone/vision.html), 安卓手机有TalkBack , Spiel , Mobile Accessibility for Android, 以及安卓应用商店中的其他应用。

桌面语音阅读器

对于 Chrome 桌面浏览器，可以从 code.google.com/p/google-axs-chrome 安装ChromeVox 扩展，一旦启用，它将开始为你朗读表单控件。你可以验证屏幕阅读器是否也读出了隐藏的标签内容。

第六章：列表视图

在本章中我们将涵盖：

使用嵌入式和非嵌入式列表
创建自定义编号列表
使用嵌套列表
使用只读的嵌套列表
格式化列表中的内容
使用分隔按钮列表
使用图标
创建自定义搜索过滤器
用 JavaScript 修改列表

介绍

通过以下代码创建 jQuery Mobile 中的简单列表：

<ul data-role='listview'>
  <li><a href='link1'>Item 1</a></li>
  <li><a href='link2'>Item 2</a></li>
</ul>

前面的代码是一个普通的 HTML 无序列表，你可以在其中添加属性data-role='listview'。框架现在可以增强、美化并移动端友好地呈现该列表。它为锚点元素添加了右箭头，并且当你点击列表中的任何项目时，链接的页面会被加载到 DOM 中，并在可能时使用 AJAX 过渡打开。

使用嵌入式和非嵌入式列表

嵌入式列表是嵌入在容器（页面、表单或其他列表）中的列表。本教程向你展示了如何创建嵌入式和非嵌入式列表，并强调了在使用非嵌入式列表与其他表单控件时需要注意的事项。

准备工作

从code/06/inset-list源文件夹中复制本教程的完整代码。该代码可通过以下 URL 启动：http://localhost:8080/06/inset-list/main.html。

如何实现...

按如下代码在main.html中创建三个列表和几个按钮：

<div data-role='content'>
  <a href='#' data-role=button data-theme='b'>Button 1</a>
 <ul data-role='listview' data-inset='true'>
    <li data-theme='e'><a href='#'>Item 1</a></li>
    <li data-theme='e'><a href='#'>Item 2</a></li>
  </ul>
  <a href='#' data-role=button data-theme='b'>Button 2</a>
 <ul data-role='listview'>
    <li data-theme='e'><a href='#'>Item A</a></li>
    <li data-theme='e'><a href='#'>Item B</a></li>
  </ul>
  <a href='#' data-role=button data-theme='b'>Button 3</a>
 <ul data-role='listview' style='margin: 15px'>
    <li data-theme='e'><a href='#'>Item 3</a></li>
    <li data-theme='e'><a href='#'>Item 4</a></li>
  </ul>
  <a href='#' data-role=button data-theme='b'>Button 4</a>
</div>

工作原理...

在代码中，第一个列表是嵌入式列表，其他两个是非嵌入式列表。你可以通过在列表中添加属性data-inset='true'来创建嵌入式列表。这样可以使列表的四周都有15px的美化边距。如果你将按钮或其他形式控件放在嵌入式列表旁边，布局会自动调整。

代码中的下一个列表是非嵌入式列表，没有data-inset属性。框架会给该列表加上-15px的填充，让它拉伸至整个屏幕宽度。如果你将按钮或其他表单控件放在该列表旁边，由于负填充，这些控件会重叠在一起。该列表具有矩形角落。

代码中的第三个列表也是非嵌入式列表。但这里通过使用属性style='margin: 15px'来处理控件重叠的问题。这样可以为列表增加15px的边距，并抵消默认填充。三个列表显示如下截图所示：

注意

当使用非嵌入式列表与其他表单控件时，添加额外的边距以避免控件重叠。

创建自定义编号列表

默认情况下，有序列表 在 jQuery Mobile 中使用十进制数。框架使用 CSS 添加编号。JavaScript 用于无法使用 CSS 的地方。本示例向您展示如何使用 JavaScript 为列表添加字母编号。

准备工作

从 code/06/custom-numbered-list 源文件夹中复制此示例的全部代码。可以使用 URL http://localhost:8080/06/custom-numbered-list/main.html 启动此代码。

如何做…

在 main.html 中，按照以下代码创建一个有序列表和一个无序列表：

<div data-role='content'>
 <ol data-role='listview' data-theme='e' data-inset='true'>
    <li>Soccer</li>
    <li>Basketball</li>
    <li>Hockey</li>
    <li>Tennis</li>
  </ol>
 <ul id='alphalist' data-role='listview' data-theme='e' data-inset='true'>
    <li>Soccer</li>
    <li>Basketball</li>
    <li>Hockey</li>
    <li>Tennis</li>
  </ul>
</div>

添加以下脚本以为无序列表添加字母编号：

$('#main').live('pageinit', function(event) {
  var alph = 'a';
  $('#alphalist').find('li').each(function() {
    var str = "<span style='font-weight: normal'>" + alph 
        + '.&nbsp;</span>' + $(this).html();
    $(this).html(str);
    alph = String.fromCharCode(alph.charCodeAt(0)+1);
  });
});

工作原理…

代码中的第一个列表是一个有序列表，默认情况下使用十进制数。接下来的列表具有 id='alphalist'，是一个无序列表。将给定的脚本添加到页面容器或 main.html 的 <head> 部分。

在脚本中，将 pageinit 事件绑定到一个函数，该函数注入字母编号。在这个函数中，使用 jQuery 的 find('li') 方法获取列表中的所有列表项。使用 jQuery 的 each() 方法循环遍历每个列表项。在 each() 的回调函数中，使用 $(this).html() 获取列表项的当前文本，并在此文本前添加字母（使用 normal 字体重量）。通过使用 $(this).html(str) 将这个新字符串（str）设置给列表项。最后，通过使用 JavaScript 的 charCodeAt() 和 fromCharCode() 方法在循环中增加字母。当页面显示时，两个列表现在显示如下截图中所示：

使用嵌套列表

嵌套列表 是一个嵌套在另一个列表项中的列表。默认情况下，列表项上显示右箭头图标，当您点击它时，框架会打开一个单独的子页面来显示嵌套列表。默认情况下，显示的子页面使用主题 b 作为页面标题。框架可以处理到 n 级的嵌套。本示例向您展示如何使用嵌套列表，并且还向您展示如何使用 JavaScript 获取嵌套列表的子页面。

准备工作

从 code/06/nested-list 源文件夹中复制此示例的全部代码。可以使用 URL http://localhost:8080/06/nested-list/main.html 启动此代码。

如何做…

在 main.html 中，添加以下代码以创建作者列表。将书名添加到某些作者的嵌套列表中。

<div data-role='content'>
  <ul data-role='listview' data-theme='b' data-inset='true'>
    <li><a href='#'>H.G. Wells</a></li>
    <li><a href='#'>Rabindranath Tagore</a>
 <ul data-role='listview' data-theme='a' data-inset='true'>
        <li><a href='#'>The Gardener</a></li>
        <li><a href='#'>Gitanjali</a></li>
      </ul>
    </li>
    <li><a href='#'>William Shakespeare</a>
 <ul data-role='listview' data-theme='a' data-inset='true'>
        <li><a href='#'>Merchant of Venice</a></li>
        <li><a href='#'>Romeo and Juliet</a></li>
      </ul>
    </li>
  </ul>
 <div id='nestedlists'></div>
</div>

添加以下脚本以获取嵌套列表的子页面：

$('#main').live('pageinit', function(event) {
  var str = '';
 $('ul').listview('childPages').each(function() {
    str = $(this).find("div[class$='ui-title']").html() + ', ' + str;
  });
  $('#nestedlists').html('Books available for authors : ' + str);
});

工作原理...

在代码中，使用作者姓名作为带有锚链接的列表项添加作者拉宾德拉纳特·泰戈尔和威廉·莎士比亚的书名的嵌套列表。作者H.G.威尔斯没有嵌套列表。

将给定的脚本添加到页面容器或main.html中的<head>标签中。在脚本中，将pageinit事件绑定到事件处理程序以调用listview 插件的childPages方法。使用 jQuery 的each()方法遍历子页面数组。在each()的回调函数中，使用 jQuery 的find()方法获取子页面的标题文本。查找具有属性class='ui-title'的标题 div。将此文本连接到字符串中，一旦获取了所有作者子页面，将此字符串设置为空的'nestedlists' div 的内容。这将显示具有书籍嵌套列表的作者列表。作者H.G.威尔斯没有嵌套列表，不会显示。

嵌套列表嵌入在列表项<li>标签中的锚链接<a>标签之后。当您单击此列表项时，它会打开子页面，如以下屏幕截图所示。锚链接文本被设置为子页面的标题，并且标题默认使用主题b。

另请参阅

使用只读嵌套列表 示例
第十章中的 主题化嵌套列表 示例，主题框架

使用只读嵌套列表

只读列表是包含非交互式项目或不包含锚链接的项目的列表。框架将只读项目与常规项目样式不同。只读项目具有主题颜色较浅的颜色，并且它们的大小也较小，因为预期用户不会点击它们。

此配方演示了如何创建只读嵌套列表，并使用选项配置列表视图。它还演示了如何将嵌套列表显示为插入式列表。

准备工作

从code/06/read-only-list源文件夹复制此配方的完整代码。可以使用 URL http://localhost:8080/06/read-only-list/main.html 启动此代码。

它的操作方法...

在main.html中，添加以下代码以创建作者列表。为一些作者添加嵌套的书名列表。

<div data-role='content'>
  <ul data-role='listview'>
    <li>H.G. Wells</li>
 <li><a href='#'>Mark Twain</a></li>
    <li>Rabindranath Tagore
 <ul data-role='listview'>
        <li>The Gardener</li>
        <li>Gitanjali</li>
      </ul>
    </li>
    <li>William Shakespeare
 <div><ul data-role='listview'>
          <li>Merchant of Venice</li>
          <li>Romeo and Juliet</li>
 </ul></div>
    </li>
  </ul>
</div>

将以下脚本添加到页面以配置列表视图选项:

<script>
 $.mobile.listview.prototype.options.theme = 'e';
 $.mobile.listview.prototype.options.headerTheme = 'a';
 $.mobile.listview.prototype.options.inset = true;
</script>

工作原理...

在代码中，将作者名字作为无锚链接的列表项添加。为拉宾德拉纳特·泰戈尔和威廉·莎士比亚添加嵌套书籍列表。作者H.G.威尔斯没有嵌套列表。作者马克·吐温有一个锚链接。该列表使用主题e，即黄色。没有嵌套列表或锚链接的项目以浅一些的色调和较小的字体显示。具有嵌套列表或锚链接的项目以常规颜色显示，并具有更大的字体。

将上述脚本添加到页面或main.html的<head>标签中，如代码所示。该脚本配置了listview插件的默认选项。在此配方中，配置了theme，headerTheme和inset选项。使用headerTheme选项将子页面头的主题设置为a，如上面的代码所示。现在，当您单击列表项拉宾德拉纳特·泰戈尔时，嵌套列表的子页面将打开。具有头部主题a的嵌套列表如下图所示:

还有更多...

有时，您可能想要将嵌套列表显示为插入式列表。您可以通过将内部列表包装在<div>标签中来实现这一点。框架现在不会为嵌套列表创建子页面。

注

在listview插件上调用childPages方法将不返回嵌入了<div>标签的列表。

威廉·莎士比亚的书籍列表在此配方中嵌入在<div>标签中，因此没有创建嵌套列表。

注

使用插入嵌套列表会使您的列表垂直拉伸，用户将不得不滚动页面以查看所有内容。因此，请有选择地使用它们。

另请参阅

使用嵌套列表 配方
第十章中的 主题化嵌套列表 配方, 主题框架

在列表中格式化内容

这个配方向你展示了如何在列表项中格式化文本。它还向你展示了如何使用可折叠项目和计数气泡在列表项中。

准备工作

从code/06/format-content源文件夹中复制此配方的完整代码。可以使用 URL http://localhost:8080/06/format-content/main.html启动此代码。

怎么做...

在main.html中，添加以下代码以创建一个交通方式列表：

<div data-role='content'>
  <ul data-role='listview'>
    <li>
 <p class='ui-li-aside' style='font-size: 15px'>
          <strong>High Speed</strong></p>
      <div data-role='collapsible' data-theme='e'>
        <h2>Air</h2>
        <ul data-role='listview'>
          <li>Aeroplane</li><li>Helicopter</li>
        </ul>
      </div>
 <p class='ui-li-count'>2</p>
    </li>
    <li  data-theme='e'>
      <p class='ui-li-aside' style='font-size: 15px'>
          <strong>Moderate Speed</strong></p>
      <div data-role='collapsible' data-theme='e'>
        <h2>Land</h2>
        <ul data-role='listview'>
          <li>Bus</li><li>Car</li><li>Bike</li><li>Train</li>
        </ul>
      </div>
 <p class='ui-li-count'>4</p>
    </li>
    <li>
      <p class='ui-li-aside' style='font-size: 15px'>
          <strong>Slow Speed</strong></p>
      <div data-role='collapsible' data-theme='e'>
        <h2>Water</h2>
        <ul data-role='listview'>
          <li>Ship</li><li>Submarine</li><li>Boat</li>
        </ul>                
      </div>
 <p class='ui-li-count'>3</p>
    </li>
  </ul>
</div>

将以下脚本添加到页面以配置列表视图选项：

<script>
 $.mobile.listview.prototype.options.theme = 'e';
 $.mobile.listview.prototype.options.countTheme = 'a';
 $.mobile.listview.prototype.options.inset = true;
</script>

它是如何工作的...

将上一个代码中显示的三种交通方式作为列表项添加。为每个列表项添加一个data-role='collapsible'的可折叠块。为每个可折叠块添加一个标题文本，并创建一个带有不同车辆类型的列表作为其内容。添加一个样式设置为class='ui-li-aside'的字符串。这将创建一个字符串，并将其位置设置在列表项的右上角。最后，通过使用class='ui-li-count'将所列车辆的数量设置为计数气泡的样式。对每个列表项都这样做。

将代码中显示的脚本添加到页面或main.html的<head>标签中，以配置列表选项theme，inset和countTheme的默认值。现在列表显示如下所示：

以下图片显示了展开了一个可折叠块的列表：

还有更多...

您可以使用countTheme选项对计数气泡进行主题设置，如本配方中已提到的。您还可以在列表上设置属性data-count-theme，如下面的代码所示：

<ul data-role='listview' data-count-theme='a'>

在列表项中使用表单控件

这个配方向你展示了如何向列表项添加具有列表的可折叠内容。您还可以像下面的代码中所示向列表项添加任何表单控件。框架通过在列表项内添加所需的填充和边距来增强表单控件，并使表单控件更易于点击。

<li><input type='text' name='username' placeholder='Enter name'/></li>

请参阅

使用分隔按钮列表配方

使用分隔按钮列表

分隔按钮列表是一个为同一列表项提供两种不同操作的列表。这是通过向列表项添加两个锚链接来创建的。然后，框架会自动将列表项转换为分隔按钮。添加到第一个链接的任何图像都会缩小为80 x 80px大小的缩略图。第二个链接将替换为一个称为分隔图标的图标，并位于分隔按钮的右上角。这个配方向你展示了如何创建一个分隔按钮列表来显示列表中的图像。

准备工作

从code/06/split-button-list源文件夹中复制此配方的完整代码。可以使用 URL http://localhost:8080/06/split-button-list/main.html启动此代码。

怎么做...

将main.html作为多页面模板应用程序创建。在#main页面中添加一个分隔按钮列表，如下面的代码所示：

<div data-role='content'>
 <ul data-role='listview' data-inset='true' data-theme='b' 
 data-split-theme='e' data-split-icon='arrow-d'>
    <li>
 <a href='#viewphoto' data-rel='dialog'>
        <img style='margin: 10px' 
            src='../../resources/images/img1.png' />
        <h3>Lal Bagh</h3>
        <p>Bangalore, India</p>
      </a>
 <a href='#download' data-rel='dialog'>Lal Bagh, Bangalore</a>
    </li>
    <li>
      <a href='#viewphoto' data-rel='dialog'>
        <img style='margin: 10px' 
            src='../../resources/images/img2.png' />
        <h3>Peacock</h3>
        <p>Mysore, India</p>
      </a>
      <a href='#download' data-rel='dialog'>Peacock, Mysore</a>
    </li>
    <li>
      <a href='#viewphoto' data-rel='dialog'>
        <img style='margin: 10px' height=75%
          src='../../resources/images/img3.png' />
        <h3>Ganesha</h3>
        <p>Bangalore, India</p>
      </a>
      <a href='#download' data-rel='dialog'>Ganesha, Bangalore</a>
    </li>
  </ul>
</div>

添加将在点击拆分按钮左侧时打开的#viewphoto页面。

<div id='viewphoto' data-role='page' data-theme='e' >
  <div data-role='header' data-theme='e'>
    <h1>Photo View</h1>
  </div>
  <div data-role='content'>
    Showing photo here ...
  </div>
</div>

添加将在点击拆分图标时打开的#download页面。

<div id='download' data-role='page' data-theme='e' >
  <div data-role='header' data-theme='e'>
    <h1>Download</h1>
  </div>
  <div data-role='content'>
      Downloading file ...
  </div>
</div>

工作原理...

在#main页面的列表中添加列表项，如前面的代码所示。每个列表项都有两个链接，通过设置data-rel='dialog'属性，这两个链接都会作为对话框打开。将第一个链接指向#viewphoto页面。添加指向照片的图像，并为锚链接文本添加格式化描述。根据缩略图像的大小，您可以像前面的代码所示添加填充。

将第二个链接指向#download页面。第二个链接会自动转换为拆分图标。默认情况下，拆分图标使用右箭头。您可以通过在列表视图上使用data-split-icon属性来配置这一点。使用data-split-theme属性对拆分图标进行主题设置。拆分按钮列表显示如下图所示：

点击照片图像或列表项中的左按钮会打开照片查看对话框，如下图所示：

点击拆分图标会打开下载对话框，如下图所示：

另请参见

在列表中格式化内容 配方
使用图像图标配方
第九章 方法和实用程序 中的 使用 changePage( )更改页面 配方

使用图像图标

jQuery Mobile 框架将图标添加到交互式列表项（具有链接的列表项）的右侧。您还可以将图标添加到列表项文本中，框架会将此图标大小调整为40 x 40px。此配方向您展示如何在列表项中显示图标。

准备工作

从code/06/list-icons源文件夹中复制此配方的完整代码。可以使用 URL http://localhost:8080/06/list-icons/main.html 启动此代码。

如何操作...

在main.html中，添加一个包含如下代码的列表：

<div data-role='content'>
  <ul data-role='listview' data-theme='b' data-inset='true'>
    <li data-icon='star'>
      <a href='#'>
 <img src='../../resources/images/img1.png' class='ui-li-icon'
 alt='Lal Bagh'/>
        <h3 style='margin-left: 25px'>Lal Bagh, Bangalore</h3>
      </a>
    </li>
    <li data-icon='star'>
      <a href='#'>
 <img src='../../resources/images/img2.png' class='ui-li-icon' 
 alt='Peacock'/>
        <h3 style='margin-left: 25px'>Peacock, Mysore</h3>
      </a>
    </li>
    <li data-icon='star'>
      <a href='#'>
 <img src='../../resources/images/img3.png' class='ui-li-icon'            alt='Ganesha'/>
        <h3 style='margin-left: 25px'>Ganesha, Bangalore</h3>
      </a>
    </li>
  </ul>
</div>

工作原理...

在列表项的锚链接中为每个列表项添加图像。将 class='ui-li-icon' 属性设置为此图像元素。这会指示框架将图像样式化为图标，并且图像会自动缩小以适应列表项内。您可以设置所需的边距以便文本在调整图像大小后正确显示。列表显示如下截图所示：

还有更多...

对于具有链接的交互式列表项，默认情况下，框架会在列表项的右侧添加一个右箭头图标。可以使用列表项上的 data-icon 属性进行更改。本步骤中的代码使用 star 图标作为列表项。

另请参阅

在列表中格式化内容 的步骤
使用分割按钮列表 的步骤

创建自定义搜索过滤器

当使用 列表搜索过滤器 时，框架会遍历列表项并显示与过滤文本匹配的项。备用文本也可以与搜索过滤器一起使用。当使用备用文本时，将忽略列表项文本。搜索是一种通用匹配，文本中的任何出现都将显示在结果中。

本步骤向您展示如何使用可以同时搜索列表项文本和备用文本的搜索过滤器。它还向您展示了如何配置搜索过滤器，以及如何实现使用自定义搜索逻辑的自定义搜索回调函数。

准备工作

从 code/06/custom-search 源文件夹复制此步骤的完整代码。可以使用 URL http://localhost:8080/06/custom-search/main.html 启动此代码。

如何做...

在 main.html 中，创建以下移动平台列表。列表项还包含属性 data-filtertext 中的操作系统制造商名称。

<div data-role='content' data-theme='e'>
  <ul id='oslist' data-role='listview'>
 <li data-role='list-divider'>Open Source</li>
    <li data-filtertext='Google'>Android</li>
    <li data-filtertext='HP'>WebOS</li>
    <li data-filtertext='Samsung Intel'>Tizen</li>
    <li data-filtertext='Linux Foundation'>LiMo</li>
    <li data-filtertext='Mozilla'>Boot2Gecko</li>    
 <li data-role='list-divider'>Closed</li>
    <li data-filtertext='Apple'>iOS</li>
    <li data-filtertext='Nokia'>Symbian</li>
    <li data-filtertext='Nokia'>S40</li>
    <li data-filtertext='RIM'>Blackberry OS</li>
    <li data-filtertext='Microsoft'>Windows Phone</li>
    <li data-filtertext='Samsung'>Bada</li>
  </ul>
</div>

将以下脚本添加到页面以配置默认列表选项：

$.mobile.listview.prototype.options.theme = 'e';
$.mobile.listview.prototype.options.inset = true;      
$.mobile.listview.prototype.options.dividerTheme = 'e';
$.mobile.listview.prototype.options.filter = true;
$.mobile.listview.prototype.options.filterTheme = 'e';
$.mobile.listview.prototype.options.filterPlaceholder = 'Search for ...';
$.mobile.listview.prototype.options.filterCallback = customFilter;

以下代码片段包含搜索文本中的列表项文本：

$('#main').live('pageinit', function(event) {
  $('#oslist').find('li').each(function() {
    $(this).attr('data-filtertext', 
        $(this).attr('data-filtertext') + ' ' + $(this).html());
  });
});

自定义搜索回调定义如下代码：

function customFilter(text, searchValue) {
  var regx='\\b'+searchValue;
 return !(text.match(new RegExp(regx, 'i')));
}

工作原理...

在 main.html 中，创建一个带有 id='oslist' 的列表。按照代码所示为各种移动操作系统平台添加列表项。使用属性 data-role='list-divider' 创建列表项，并将列表项分为开源和闭源。使用 data-filtertext 属性将操作系统制造商名称作为备用搜索文本。

将给定的脚本添加到页面或 main.html 的 <head> 标签中。设置各种列表视图配置选项，如 theme='e' 和 inset='true'。这是一个 只读列表，列表项着以浅黄色阴影。使用 dividerTheme='e' 选项来对列表分隔符项进行主题化。列表分隔符项由框架以较深色调样式化。

接下来，添加 filter='true' 和 filterTheme='e' 选项，为列表添加搜索过滤器，并使用 e 主题对其进行主题化。使用 filterPlaceholder 选项指定搜索过滤器文本控件的自定义文本（默认为 'Filter Items...'）。最后，通过设置选项 filterCallback=customFilter 设置自定义搜索回调函数。列表显示如下所示：

列表中的默认搜索功能匹配文本中搜索字符串的任何出现。要覆盖此行为，请按照前面的代码所示定义自定义过滤器回调。该函数接受两个参数，text 和 searchValue。创建一个正则表达式来搜索给定文本中单词开头处的 searchValue 出现。忽略单词之间的搜索值出现。使用 match() 方法将正则表达式与文本进行匹配。参数 i 使其大小写不敏感。

如果使用 filtertext 属性与列表项，那么默认搜索仅使用此文本，忽略列表项文本。要同时使用列表项文本和过滤文本，请添加 pageinit 事件处理程序，如前面的代码所示。在此函数中，使用 jQuery find('li).each() 方法找到每个列表项，并在 each() 的回调中，获取列表项文本并将其添加到过滤文本中。这不会对列表项产生任何可见影响。但是列表项文本现在是过滤文本的一部分，因此可供搜索过滤器使用。因此，搜索 a 将列出 Android 和 iOS（filtertext 的值为 Apple）。但这不会列出 Symbian 或 Bada，因为它们的单词中间包含 a，如下屏幕截图所示：

如果搜索 Bo，则仅将 Boot2Gecko 作为候选项，如下屏幕截图所示：

还有更多...

搜索回调函数返回一个布尔值，指示是否应通过搜索过滤器隐藏文本。因此，搜索过滤器回调应为所有匹配元素返回 false。不匹配的文本元素返回 true，并由搜索过滤器隐藏。

使用数据属性配置列表分隔主题

该示例使用 dividerTheme 选项对列表分隔项进行主题化。您还可以使用 data-divider-theme 属性，如下面的代码所示：

<ul data-role='listview' data-theme='e' data-divider-theme='e'>

使用数据属性配置列表搜索过滤器

该示例向您展示如何使用 filter、filterTheme 和 filterPlaceholder 选项来配置列表视图。这些选项也可以使用 data-filter、data-filter-theme 和 data-filter-placeholder 属性进行设置，如下面的代码所示：

<ul data-role='listview' data-filter='true' data-filter-theme='e' data-filter-placeholder='Search for...'>

使用 JavaScript 修改列表

您可以使用 JavaScript 动态修改列表及其内容。本示例向您展示如何使用 JavaScript 在只读列表中添加或删除列表项。

准备工作

从 code/06/scripting-lists 源文件夹复制此配方的完整代码。此代码可以使用网址 http://localhost:8080/06/scripting-lists/main.html 运行。

如何做...

在 main.html 中，添加以下代码以在布局网格中创建一个空列表：

<div data-role='content'>
  <div data-role='fieldcontain'>
    <fieldset class='ui-grid-b'>
      <div class='ui-block-a' style='width: 65%'>
 <ul id='numlist' data-role='listview' data-theme='e' 
 data-inset='true'>
 </ul>
      </div>
      <div class='ui-block-b'>
        <button data-theme='b' id='addBtn'>Add</button>
        <button data-theme='b' id='removeBtn'>Remove</button>
      </div>
    </fieldset>
  </div>
</div>

添加以下脚本以动态添加或删除列表项：

var count = 0;
$('#main').live('pagecreate', function(event) {
 $('#numlist').listview({create: function(event, ui) {
    $('#addBtn').bind('click', function(event, ui) {
      var str = "<li><a href='#'>Item " + (++count) + '</a></li>';
      $('#numlist').append(str);
 $('#numlist').listview('refresh');
    });
    $('#removeBtn').bind('click', function(event, ui) {
      if (--count < 0) {
        count = 0;
        return;
      }
      $('#numlist').find('li').last().remove();
 $('#numlist').listview('refresh');
    });
  }});
});

它是如何工作的...

在 main.html 中使用 class='ui-grid-b' 属性在 fieldset 容器上添加一个两列布局网格。在第一列中添加一个空列表，其 id='numlist'。在第二列中添加两个按钮，ID 分别为 addBtn 和 removeBtn。单击这些按钮时，列表项会动态更新到第一列的空列表中。

将给定的脚本添加到页面或 main.html 的 <head> 部分。在脚本中，为 pagecreate 事件创建一个事件处理程序，在页面完全初始化之前触发。在此处，为 listview 元素的 create 事件添加一个事件处理程序。当创建 listview 元素时，将触发此事件。在其回调函数中，绑定 addBtn 和 removeBtn 按钮的 click 事件，如前述代码所示。

按下 addBtn 时，将一个列表项添加到列表中。列表项文本保存在内存中，并在添加新元素时递增。按下 removeBtn 时，通过调用 jQuery 的 find('li').last() 方法获取最近添加的列表项元素。通过调用 remove() 方法移除此最后一个元素。在对列表进行任何修改后，调用 listview 插件 上的 refresh() 方法来更新列表。

当启动应用时，显示如下截图所示，其中包含一个空列表：

按下添加按钮会向列表中添加新的列表项，如下面的截图所示：

按下删除按钮会删除最近添加的列表项。

还有更多...

正如此配方中所述，您必须在对列表进行任何修改后调用 listview 插件 上的 refresh() 方法。在添加新列表项或删除列表项时，refresh() 方法会触发列表的更新，并在列表项上应用必要的样式和增强效果。

$('#numlist').listview('refresh');

第七章：配置

本章将涵盖以下内容：

配置活动类
配置ajaxEnabled
配置autoInitializePage
配置默认转换
配置ignoreContentEnabled
配置页面加载和错误消息
配置默认命名空间
配置hashListeningEnabled和subPageUrlKey
配置pushStateEnabled和linkBindingEnabled

介绍

jQuery Mobile 框架会在文档加载后立即增强标记和元素。您可以通过在文档对象上设置mobileinit事件处理程序中的值来调整用于这些增强的默认配置。本章向您展示了如何使用框架中提供的各种配置。

配置活动类

jQuery Mobile 框架默认使用 CSS 类activeBtnClass来为主题为b的活动状态的按钮设置样式。activeBtnClass类具有默认字符串值ui-btn-active。为了为活动页面（正在查看或正在过渡的页面）设置样式，框架使用 CSS 类activePageClass，该类具有默认字符串值ui-page-active。本配方向您展示如何配置框架以使用这些默认类的自定义类。

准备就绪

从code/07/active-class源文件夹中复制此配方的完整代码。您可以使用以下网址启动此代码：http://localhost:8080/07/active-class/main.html。

如何实现...

在main.html中，将以下样式添加到页面的<head>标签中，以定义自定义的活动按钮类和活动页面类：

<link rel="stylesheet" 
  href="http://code.jquery.com/mobile
  /1.1.1/jquery.mobile-1.1.1.min.css" />
<style>
 .ui-custom-btn-active {
    background: #53C584;
    background-image: -webkit-gradient(linear, left top, 
      left bottom, from( #53C584 ), to( #6FD598 ));
    background-image: -webkit-linear-gradient( #53C584 , 
      #6FD598 );
    background-image: -moz-linear-gradient( #53C584 , 
      #6FD598 );
    background-image: -ms-linear-gradient( #53C584 , 
      #6FD598 );
    background-image: -o-linear-gradient( #53C584 , 
      #6FD598 );
    background-image: linear-gradient( #53C584 , 
      #6FD598 );
  }
 .ui-mobile .ui-custom-page-active {
    border: 3px;
    border-style: dotted;
    width: 99%;
    display: block;
    overflow: visible;
  }
</style>

在包含 jQuery Mobile 脚本之前添加以下脚本：

$(document).bind("mobileinit", function() { 
 $.mobile.activePageClass = "ui-custom-page-active"; 
 $.mobile.activeBtnClass = "ui-custom-btn-active";
});

创建带有链接以打开#page1的#main页面，如下所示：

<div id="main" data-role="page" data-theme="e">
  <div data-role="header" data-theme="e">
    <h1>Active Classes</h1>
  </div>
  <div data-role="content">
    <a href="#page1" data-role="button">Open Page 1</a>
  </div>
</div>

创建#page1，并添加一个链接以返回到#main页面，如下所示；这是一个多页文档：

<div id="page1" data-role="page" data-theme="e">
  <div data-role="header" data-theme="e">
    <h1>Page 1</h1>
  </div>
  <div data-role="content">
    <a href="#main" data-rel="back" data-role="button">
      Go Back
    </a>
  </div>
</div>

工作原理...

在main.html中，添加一个样式标签并定义类ui-custom-btn-active，以在活动按钮上设置不同的渐变背景（绿色阴影）。默认的活动按钮背景是明亮的蓝色阴影。还添加一个ui-custom-page-active类，该类为页面设置3px厚的虚线边框。接下来，在包含对jquery.mobile.js引用之前，添加给定的脚本。在脚本中，为mobileinit事件添加一个事件处理程序，该事件在应用程序启动时触发。在这里，将$.mobile.activePageClass和$.mobile.activeBtnClass属性设置为这两个新类。最后，添加#main和#page1页面容器。当您启动应用程序时，#main页面现在将显示为带有虚线边框，如下面的屏幕截图所示：

当您点击打开页面 1按钮时，按钮的活动状态在按下时显示绿色阴影，如下面的屏幕截图所示：

接下来，页面 #page1 打开，它也有虚线边框：

单击时，返回按钮也会变成绿色：

还有更多...

你可以使用 mobileinit 事件处理程序来自定义和配置 jQuery Mobile 框架的默认设置。你必须在包含 jquery.mobile.js 脚本之前添加此自定义脚本，以确保框架使用你的设置进行初始化。

使用 jQuery 的 `.extend()` 调用

你也可以使用 .extend() jQuery 调用来扩展 $.mobile 对象，而不是直接在 $.mobile 上设置属性，如下所示：

$.extend( $.mobile, {
  $.mobile.activeBtnClass = "ui-custom-btn-active";
});

另请参阅

第二章, 页面和对话框, 使用 CSS 创建弹跳页面转换：此教程提供了供应商前缀的概述

配置 ajaxEnabled

在可能的情况下，jQuery Mobile 框架会自动使用 Ajax 处理链接点击和表单提交。这可以使用 $.mobile.ajaxEnabled 属性进行配置，默认情况下其布尔值为 true。如果禁用了 Ajax 或不支持它，则使用普通的 HTTP 请求并进行完整页面加载。URL 散列监听也被禁用。这个教程向你展示了如何配置 $.mobile.ajaxEnabled 属性。

准备就绪

从 code/07/ajax-enabled 源文件夹中复制此教程的完整代码。你可以使用以下 URL 启动此代码：http://localhost:8080/07/ajax-enabled/main.html。

怎么做...

在 main.html 中，在包含 jquery.mobile.js 之前添加以下脚本：

$(document).bind("mobileinit", function() {
 $.mobile.ajaxEnabled = true;
});

创建包含链接以打开 page1.html 的主页面：

<div id="main" data-role="page" data-theme="e">
  <div data-role="header" data-theme="a">
    <h1>Ajax Enabled</h1>
  </div>
  <div data-role="content">        
    <p>This is the main page</p>
    <a href="page1.html" data-role="button">
      <p>Open Page 1</p>
    </a>
  </div>
</div>

最后，创建 page1.html，其中包含一个返回到 main.html 的链接，如下所示：

<div data-role="page" data-theme="e" data-add-back-
  btn="true">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role=content>    
    <p>Sub Page Contents</p>
    <a href="main.html" data-role="button">Go back</a>
  </div>
</div>

如何运作...

在包含对 jquery.mobile.js 的引用之前，在代码中添加给定的脚本。在脚本中，添加一个用于在应用程序启动时触发的 mobileinit 事件的事件处理程序。在这里，设置配置 $.mobile.ajaxEnabled=true。

注意

由于 $.mobile.ajaxEnabled 默认为 true，因此您不必在代码中明确设置它。它包含在此教程中，因为您将在代码中稍后将此值更改为 false。

添加 #main 页面。按照代码中所示创建 page1.html（请注意，page1.html 中没有 <head> 元素）。显示 #main 页面，如下图所示：

单击 打开第一页 按钮以打开 page1.html，如下所示。此页面通过 Ajax 加载，并且框架增强了控件。

然后，在 main.html 中将 ajaxEnabled 属性设置为 false，然后重新加载页面。现在，当打开 page1.html 时，元素不会被增强，如下图所示：

还有更多...

当禁用 Ajax 时，将加载整个页面。在page1.html中，由于缺少指向 jQuery Mobile 框架库的链接的<head>元素，因此页面不会获得任何样式或增强效果。

配置 autoInitializePage

当您导航到新页面或将页面加载到 DOM 中时，框架会初始化页面并使其可见。这由$.mobile.intializePage属性控制，默认情况下其布尔值为true。如果将其设置为false，则不会显示页面。您将不得不手动将其设置回true以显示页面。本示例向您展示了如何执行相同操作。

准备就绪

从code/07/auto-initialize源文件夹中复制此示例的全部代码。您可以通过使用 URL 启动此代码：http://localhost:8080/07/auto-initialize/main.html。

如何操作...

在main.html中，在包含jquery.mobile.js之前，添加以下脚本：

$(document).bind("mobileinit", function() {
 $.mobile.autoInitializePage = false;
});

创建具有以下内容的主页：

<div data-role="content">
  <a href="#" data-role="button">A button</a>
  <script>
 $.mobile.autoInitializePage = true;
  </script>
</div>

工作原理...

在包含对jquery.mobile.js的引用之前，将给定的autoInitializePage脚本添加到代码中。在脚本中，添加一个在应用程序启动时触发的mobileinit事件处理程序。在这里，将配置$.mobile.autoInitializePage=false。最后，添加#main页面。页面内容将类似于以下屏幕截图：

初始化内容并将其设置为$mobile.autoInitializePage的值手动设置为true，如代码所示。您可以注释此行（在页面内容部分）并重新加载页面，以发现什么也没有显示。

还有更多...

您可以使用此功能延迟显示页面，同时在后台执行一些后台工作或从服务器后台获取数据时。在手动处理页面更改时很有用。

配置默认过渡效果

默认情况下，jQuery Mobile 框架在使用 Ajax 加载页面时使用fade过渡。在使用 Ajax 打开对话框时，默认使用pop过渡。本示例向您展示了如何为您的应用设置不同的默认过渡效果。

准备就绪

从code/07/default-transitions源文件夹中复制此示例的全部代码。您可以使用以下 URL 启动此代码：http://localhost:8080/07/default-transitions/main.hml。

如何操作...

在main.html中，在包含jquery.mobile.js之前，添加以下脚本：

$(document).bind("mobileinit", function() {
 $.mobile.defaultDialogTransition = "flow";
 $.mobile.defaultPageTransition = "turn";
});

创建#main页面如下：

<div id="main" data-role="page" data-theme="e">
  <div data-role="header">
    <h1>Configure Transitions</h1>
  </div>
  <div data-role=content>
    <a href="#page1" data-role="button">Open as Page</a>
    <a href="#page1" data-rel="dialog" data-role="button">Open as Dialog</a>
  </div>
</div>

创建#page1如下；这是一个多页面文档：

<div id="page1" data-role="page" data-theme="e" data-add-back-btn="true">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role=content>
    <p>Page 1 Content</p>
  </div>
</div>

工作原理...

创建main.html并在代码中包含给定的脚本，然后再包含对jquery.mobile.js的引用。在脚本中，添加一个在应用程序启动时触发的mobileinit事件处理程序。在这里，使用$.mobile.defaultDialogTransition和$.mobile.defaultPageTransition属性设置页面和对话框的默认过渡效果。最后，如所示，添加#main和#page1页面容器。

在#main中，有两个按钮。第一个按钮将#page1作为页面打开，第二个按钮将其作为对话框打开。您将看到默认转换已更改。页面现在使用turn转换，对话框使用flow转换。

还有更多...

您还可以将页面和对话框的默认转换都设置为none。这将只是加载页面或对话框而不使用任何转换：

$.mobile.defaultDialogTransition = "none";
$.mobile.defaultPageTransition = "none";

使用自定义转换

你可以配置框架以使用自定义转换作为默认转换。您必须按以下方式设置转换名称：

$.mobile.defaultDialogTransition = "myDialogTransition";
$.mobile.defaultPageTransition = "myPageTransition";

转换回退

fade转换是默认转换，它使用 2D。所有其他转换都使用 3D。不支持 3D 变换的旧浏览器和设备将退回到使用fade。您可以将此默认回退转换配置为none，或者您可以将其设置为自己的自定义 2D 转换。可以为每个单独的 3D 转换执行此操作，如下所示：

$.mobile.transitionFallbacks.slideout = "none";
$.mobile.transitionFallbacks.flip = "myCustom2DTransition";

另请参阅

第二章, 使用 CSS 创建弹跳页面转换
第二章, 使用 JS 创建滑动'淡出'转换

配置 ignoreContentEnabled

jQuery Mobile 框架会自动增强页面中找到的控件和标记。要跳过增强某些标记部分，您可以使用$.mobile.ignoreContentEnabled配置（默认为false）。此示例向您展示如何执行相同操作。

准备工作

从code/07/content-enabled源文件夹中复制此示例的完整代码。您可以使用以下网址启动此代码：http://localhost:8080/07/content-enabled/main.html。

如何做...

在main.html中，在包含jquery.mobile.js之前添加以下脚本：

$(document).bind("mobileinit", function() {
 $.mobile.ignoreContentEnabled = true;
});

创建带有以下内容的#main页面：

<div data-role="content">
 <div data-enhance="false">
    <input type="checkbox" name="chkbox1" id="chkbox1" 
      checked />
    <label for="chkbox1">Checkbox</label>
    <input type="radio" name="radiobtn1" id="radiobtn1" 
      checked />
    <label for="radiobtn1">Radio Button</label>
 </div>
  <div>
    <input type="checkbox" name="chkbox2" id="chkbox2" 
      checked />
    <label for="chkbox2">Enhanced Checkbox</label>
    <input type="radio" name="radiobtn2" id="radiobtn2" 
      checked />
    <label for="radiobtn2">Enhanced Radio Button</label>
  </div>
</div>

它是如何工作的...

创建main.html并在包含对jquery.mobile.js的引用之前添加代码中的给定脚本。在脚本中，为在应用程序启动时触发的mobileinit事件添加事件处理程序。在这里，将属性$.mobile.ignoreContentEnabled=true设置为true。在#main中，添加两个 div。在每个div中添加一个复选框和一个单选按钮。将属性data-enhance=false设置为第一个div。现在，框架不会增强添加到此div中的元素。第二个div中的元素会自动增强。页面显示如下截图所示：

还有更多...

当您使用$.mobile.ignoreContentEnabled=true配置时，它告诉框架避免增强某些标记部分。通过使用data-enhance="false"属性来执行此操作，如此示例所示。现在，当框架遇到每个控件或标记时，它首先检查父元素是否将data-enhance属性设置为false。如果是，则跳过将样式或任何增强应用于控件。

注意

使用 $.mobile.ignoreContentEnabled 和 data-enhance 可能会在页面增强时导致性能下降。

配置页面加载和错误消息

默认情况下，jQuery Mobile 框架在加载新页面时显示一个带有主题 a 的旋转动画，不带任何文本。如果出现错误，页面加载超时，将显示错误消息 Error Loading Page，带有主题 e。本教程向你展示如何更改和自定义页面加载和错误消息。

准备工作

从 code/07/load-message 文件夹的源文件中复制此教程的全部代码。要尝试此教程，请使用该文件夹中可用的简单 nodejs web 服务器，使用以下命令：

node jqmserver.js

然后，您可以使用以下 URL 启动代码：http://localhost:8080/07/load-message/main.hml。

如何做...

在 main.html 中，添加以下脚本以在包含 jquery.mobile.js 之前使用：

$(document).bind("mobileinit", function() {
 $.mobile.loadingMessage = "Fetching it...";
 $.mobile.loadingMessageTextVisible = true;
 $.mobile.loadingMessageTheme = "b";
 $.mobile.pageLoadErrorMessage = "Oops, it's missing!";
 $.mobile.pageLoadErrorMessageTheme = "b";
});

创建以下内容的 #main 页面：

<div data-role="content">
 <a href="/delay" data-role="button">Dummy page</a>
</div>

它是如何工作的...

创建 main.html，并在包含对 jquery.mobile.js 的引用之前添加给定脚本。在脚本中，为 mobileinit 事件添加一个事件处理程序，该事件在应用程序启动时触发。在这里，设置默认的页面加载消息和错误消息如代码所示。

在 #main 中，有一个尝试打开 "/delay" 页面的链接。这是对 nodejs 服务器的 GET 操作。服务器处理此请求，并在暂停几秒钟后返回错误代码。在此持续时间内显示带有文本消息的旋转控件，如下截图所示：

错误响应会导致以下错误消息显示：

配置默认命名空间

本教程向你展示如何配置 jQuery Mobile 框架以使用你自定义的命名空间作为 data- 属性。

准备工作

从 code/07/namespace 源文件夹中复制此教程的全部代码。您可以使用以下命令启动此代码：http://localhost:8080/07/namespace/main.html。

如何做...

在 main.html 中，添加以下脚本以在包含 jquery.mobile.js 之前使用：
```
$(document).bind("mobileinit", function() {
 $.mobile.ns = "my-";
});
```

在 <head> 标签中添加以下样式：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<style>
 .ui-mobile [data-my-role=page], .ui-mobile [data-my-role=dialog], 
 .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; 
 position: absolute; display: none; border: 0; } 
</style>

创建主页面如下所示：

<div id="main" data-my-role="page" data-my-theme="e">
  <div data-my-role="header" data-my-theme="a">
    <h1>Configure Namespace</h1>
  </div>
 <div data-my-role="content"> 
    <p>This is the main page</p>
    <a href="#dialog" data-my-role="button">
      Open Dialog
    </a>
  </div>
</div>

创建 #dialog 页面如下；这是一个多页面文档：

<div id="dialog" data-my-role="dialog" data-my-theme="e">
  <div data-my-role="header" data-my-theme="a">
    <h1>Dialog</h1>
  </div>
  <div data-my-role="content">
    <p>This is a dialog</p>
 <a href="#" data-my-role="button" data-my-
 rel="back">Go Back</a>
  </div>
</div>

它是如何工作的...

要使用自定义命名空间，您必须在 jquery.mobile.css 文件中覆盖一个特定的选择器，即 .ui-mobile [data-my-role=page] 和 .ui-mobile [data-my-role=dialog] 选择器。按照代码中所示覆盖此样式。使用 data-my-role 意味着命名空间设置为 my。

创建 main.html，并在包含对 jquery.mobile.js 的引用之前添加前述脚本以设置此配置。在脚本中，为 mobileinit 事件添加一个事件处理程序，该事件在应用程序启动时触发。在这里，使用 $.mobile.ns="my-" 配置设置默认命名空间。添加 #main 和 #dialog 页面。

以下截图显示了通过 DOM 检查器看到的页面：

您会注意到代码还使用了data-my-属性。您还会观察到框架已添加增强功能，甚至这些增强功能在整个页面上都使用自定义命名空间。

注意

对于自定义命名空间，使用尾随连字符，例如"my-"。这样增强代码更易读。

配置`hashListeningEnabled`和`subPageUrlKey`

当您使用嵌套listview时，jQuery Mobile 框架会生成一个子页面，形式为pagename.html&ui-page=subpageidentifier。在子页面 URL 键(&ui-page)之前的哈希段由框架用于导航。本示例向您展示了如何使用自定义子页面 URL 键。它还向您展示了如何使用$.mobile.hashListeningEnabled配置。

准备工作

从源文件夹code/07/sub-page中复制此示例的完整代码。您可以使用以下 URL 启动此代码：http://localhost:8080/07/sub-page/main.html。

如何做...

在main.html中，在包含jquery.mobile.js之前添加以下脚本：

$(document).bind("mobileinit", function() {
 $.mobile.subPageUrlKey = "my-page";
 $.mobile.hashListeningEnabled = false; 
});

在其内容中创建带有嵌套列表的#main页面如下所示：

<div data-role="content">
 <ul data-role="listview" data-theme="e">
    <li>Main Page Item 1</li>
    <li>Sub Page Items
 <ul data-role="listview">
        <li>Sub Page Item A</li>
        <li>Sub Page Item B</li>
      </ul>
    </li>
  </ul>
</div>

它是如何工作的...

创建main.html，并在包含对jquery.mobile.js的引用之前在代码中添加给定的脚本。在脚本中，添加一个在应用程序启动时触发的mobileinit事件的事件处理程序。在这里，设置$.mobile.subPageUrlKey="my-page"和$.mobile.hashListeningEnabled=false配置。最后，在代码中添加#main页面与嵌套列表一样。输出将类似于以下截图：

点击子页面项，并在子页面中打开嵌套列表。地址栏显示自定义的子页面 URL 键my-page，如下面的截图所示：

现在，使用浏览器的返回按钮返回。地址栏中的 URL 会更新，但页面不会返回到上一个屏幕，如下面的代码所示：

这是因为在启动时将hashListeningEnabled配置为false。这将阻止框架监听和处理位置哈希更改。如果将hashListeningEnabled设置为true（默认值）并重新加载页面，则页面导航将正常工作，并且主列表将再次显示为嵌套列表。

注意

只有在想要自定义管理哈希更改而不是允许框架处理它时，才配置hashListeningEnabled。

另请参阅

第七章，配置，配置pushStateEnabled和link**BindingEnabled

配置`pushStateEnabled`和`linkBindingEnabled`

当您单击链接时，将进行导航并更新 URL 散列。框架允许您在支持 history.replaceState API 的浏览器中将 URL 散列替换为完整路径。此示例向您展示了如何使用 $.mobile.pushStateEnabled 配置来实现此目的。它还向您展示了如何使用 $.mobile.linkBindingEnabled 配置，该配置允许框架自动绑定文档中锚链接的单击事件。这两者默认值均为 true。

准备工作

从 code/07/push-state 文件夹中复制此示例的完整代码。您可以使用以下 URL 启动此代码：http://localhost:8080/07/push-state/main.html。

如何操作...

在 main.html 中，在包含 jquery.mobile.js 前添加以下脚本：

$(document).bind("mobileinit", function() {
 $.mobile.linkBindingEnabled = true;
 $.mobile.pushStateEnabled = false; 
});

创建以下内容的 #main 页面：

<div data-role="content">
  <a href="page1.html" data-role="button">Go to Page 1</a>
</div>

创建 page1.html 如下：

<div id="page1" data-role="page" data-theme="e">
  <div data-role="header">
    <h1>Header of Page 1</h1>
  </div>
  <div data-role="content">
    <a href="#" data-role="button" data-rel="back">Go Back</a>
  </div>
</div>

它的工作原理...

创建 main.html，并在引用 jquery.mobile.js 之前在代码中添加给定的脚本。在脚本中，为在应用程序启动时触发的 mobileinit 事件添加事件处理程序。在这里，设置 $.mobile.pushStateEnabled=false 和 $.mobile.linkBindingEnabled=true 配置。最后，根据代码中所示添加 #main 页面内容和 page1.html。输出将类似于以下屏幕截图：

当您打开 页面 1 时，URL 地址栏将完整路径附加到 main.html，如下截图所示：

这是因为在启动时将 pushStateEnabled 设置为了 false。如果您将其设置为 true（默认值）并重新加载页面，URL 散列将被替换，并显示为 http://localhost:8080/07/push-state/page1.html。

注意

当应用程序中未使用 Ajax 或者大量使用外部链接时，将 pushStateEnabled 配置设置为 false。

还有更多...

在本示例中，在启动时将 linkBindingEnabled 配置设置为了 true（其默认值）。如果您将其设置为 false 并重新加载页面，您将注意到单击 转到页面 1 按钮时它未获得活动状态。在这种情况下，框架不会自动绑定链接点击。

注意

仅在您希望您的自定义代码（或其他库）处理链接点击时，使用 linkBindingEnabled 配置。

参见也

第七章, 配置, 配置 hashListeningEnabled 和 subPageUrlKey

第八章：事件

在本章中，我们将涵盖：

使用方向事件
使用滚动事件
使用触摸事件
使用虚拟鼠标事件
使用页面初始化事件
使用页面加载和移除事件
使用页面切换事件
使用页面过渡和动画事件
使用布局事件

介绍

jQuery Mobile 框架不仅提供了默认的本机事件，还为桌面和移动平台提供了特定的事件。它允许你使用 jQuery 的 bind() 或 live() 方法绑定到这些事件，并允许你执行自定义操作。本章将向您展示如何使用 jQuery Mobile 框架中提供的事件。

使用方向事件

当移动设备的方向（纵向或横向）改变时，jQuery Mobile 框架会触发一个 orientationchange 事件。这个示例向您展示如何使用 orientationchange 事件。

准备工作

从 code/08/orientation 源文件夹中复制此示例的完整代码。您可以通过使用 URL http://localhost:8080/08/orientation/main.html 启动此代码。

如何实现...

执行以下步骤：

创建 main.html 如下所示：

<div id="main" data-role="page" data-theme="e">
  <div data-role="header" data-theme="a">
 <h1>Orientation Events</h1>
  </div>    
  <div data-role="content">
    <p>Change orientation</p>
  </div>
</div>

在 <head> 部分添加处理 orientationchange 事件的脚本：

$(window).bind("orientationchange", function(event, data) {
 $("h1").html(data.orientation);
});

工作原理...

创建 main.html，其中包含页面内容，如前面的代码片段所示。添加给定的脚本，并将 orientationchange 事件绑定到回调函数。在这里，将设备的当前方向设置为页面的 h1 标题。您可以通过回调函数的 data.orientation 属性获取设备的方向。

当页面加载时，改变设备的方向；头部文本将根据当前方向显示纵向或横向。

使用滚动事件

当您滚动时，jQuery Mobile 框架会触发 scrollstart 事件。当您停止滚动时，会触发 scrollstop 事件。这个示例向您展示如何使用这两个事件。

准备工作

从 code/08/scroll 源文件夹中复制此示例的完整代码。您可以通过使用 URL http://localhost:8080/08/scroll/main.html 启动此代码。

如何实现...

执行以下步骤：

创建 main.html，其中页面内容的 div 元素使用一个较大的高度值进行样式设置，以便出现滚动条：

<div id="main" data-role="page" data-theme="e">
  <div data-role="header" data-theme="a" data-
  position="fixed">
 <h1>Scroll Events</h1>
  </div>    
  <div data-role="content">
    <div style="height: 1000px">Scroll now</div>
  </div>
</div>

在 <head> 部分添加以下脚本来处理 scroll 事件：

$(window).bind("scrollstart", function(event) {
  $("h1").html("Scrolling now...");
});
$(window).bind("scrollstop", function(event) {
  $("h1").html("Scrolling done!");
});

工作原理...

在前面的代码中创建main.html。在页面内容中添加一个高度为1000px的div容器。这将使垂直滚动条出现。现在，在页面的<head>部分添加给定的脚本。将scrollstart事件绑定到一个回调函数，该函数更新页面头部文本。类似地，将scrollstop事件绑定到一个回调函数，该函数更新头部文本。现在，保持垂直滚动条手柄，滚动页面。您可以看到页面头部文本显示为"正在滚动..."，当您停止或暂停滚动时，文本更新为"滚动完成!"。

还有更多...

在 iOS 设备上，scrollstart事件的工作方式存在问题。在滚动期间不允许 DOM 操作，并且事件被排队，一旦滚动停止就会触发。因此，在处理 iOS 设备上的滚动事件时，请记住这一点。您将不得不在滚动开始之前进行更改，而不是一开始就进行更改。

使用触摸事件

jQuery Mobile 框架提供了五个触摸事件。它们是tap、taphold、swipe、swipeleft和swiperight事件。当您点击屏幕时，将触发tap事件。如果点击持续时间较长，则首先触发taphold事件，然后在您放开手指后触发tap事件。当您在屏幕上滑动时，首先触发swipe事件，然后根据您滑动的方向触发swipeleft或swiperight事件。本配方向您展示了如何使用这些触摸事件。

在这个配方中，显示一个黄色框，显示您最后点击屏幕的位置。每次您点击并保持时，都会创建一个绿色框。您还可以通过将蓝色条拉到屏幕的左侧或右侧来查看滑动操作的工作方式。

准备工作

从code/08/touch源文件夹复制此配方的完整代码。您可以通过使用 URL http://localhost:8080/08/touch/main.html 来启动此代码。

如何操作...

应该遵循的步骤是

在main.html中，在<head>标签中定义以下样式：

<style>
  .box { width:60px; height:60px; position:fixed }
  .yellow { background-color:yellow; z-index:1 }
  .green { background-color:green; z-index:2 }
  .blue { background-color: blue; z-index:3; height:100% }
</style>

使用两个带有蓝色条和黄色框样式的<div>标签添加页面内容：

<div id="content" data-role="content">
  <div id="movingbox" class="box yellow" style="top:0px; left:0px"></div>
  <div id="edgebar" class="box blue" style="top:0px; left:0px"></div>
</div>

在<head>部分添加以下脚本，以处理tap和taphold事件：

var tapholdflag = false;
$("#main").live("tap", function(event) {
  var stylestr = "left:" + event.clientX + "px; top:" 
    + event.clientY + "px;"
  if (tapholdflag) {
    var str = "<div class=''box green'' style=''" + 
      stylestr + "''></div>";
    $("#content").append(str).trigger("create");
  } else {
    $("#movingbox").attr("style", 
      stylestr).trigger("refresh");
  }
  tapholdflag = false;
});
$("#main").live("taphold", function(event) {
  tapholdflag = true;
});

最后，处理swipe、swipeleft和swiperight事件：

$("#main").live("swipe", function(event) {
  $.event.special.swipe.scrollSupressionThreshold = 15;
  $.event.special.swipe.durationThreshold = 1250;
  $.event.special.swipe.horizontalDistanceThreshold = 25;
  $.event.special.swipe.verticalDistanceThreshold = 50;
});  
$("#main").live("swipeleft", function(event) {
  $("#edgebar").attr("style", "top:0px; 
    left:0px").trigger("refresh");
});
$("#main").live("swiperight", function(event) {
  $("#edgebar").attr("style", "top:0px; 
    right:0px").trigger("refresh"); 
});

它是如何工作的...

在main.html中，添加style标签，并定义box、yellow、green和blue类。添加一个空的div标签，设置属性id="movingbox"，并设置属性class="box yellow"。这将创建一个60px宽的黄色方块。接下来，添加一个空的div标签，设置属性id="edgebar"，并设置属性class="box blue"。这将在屏幕边缘创建一个60px宽的蓝色条，如下面的截图所示。黄色框隐藏在蓝色条下面，因为它具有较低的z-index值。

![它是如何工作的...](https://github.com/OpenDocCN/freelearn-fe-framework-zh/raw/master/docs/jqmobi-cb/img/7225_08_01.jpg)

现在将给定的脚本添加到main.html的<head>部分。将五个触摸事件中的每一个绑定到如所示的回调函数。如果触摸持续时间长，则为taphold。因此，定义一个布尔值tapholdflag来跟踪tap事件是否为taphold。在taphold事件处理程序中将其设置为true，并在触发tap事件后将其清除。

在tap事件的回调中，首先检查 tapholdflag是否已设置。如果是，则这是一个taphold事件。创建一个新的绿色框并调用"create"方法，如所示。如果tapholdflag为false，则这是一个简单的点击。更新黄色框的新位置，并触发"refresh"方法。最后，清除tapholdflag并将其设置为false。

通过使用event.clientX和event.clientY参数，可以获取触摸位置。将这些值设置为盒子的left和top样式属性，以更新其位置。在几次tap和taphold事件后，屏幕看起来类似于以下截图：

现在，将swipe事件绑定到回调函数，并按照代码中所示配置swipe事件属性。代码向您展示如何配置scrollSupressionThreshold、durationThreshold、horizontalDistanceThreshold和verticalDistanceThreshold属性。

将swipeleft事件绑定到回调以设置蓝色条的left和top样式属性，并调用"refresh"方法。这将将条移到屏幕的左边缘。类似地，将swiperight事件绑定到回调以设置蓝色条的right和top样式属性，并调用"refresh"。这将把条移到屏幕的右边缘。现在，当您向屏幕的右侧滑动时，该条将移动到右边缘，如以下截图所示；向左侧滑动，则该条将移回左边缘：

还有更多...

在代码中，swipe事件的回调向您展示了如何配置swipe事件属性。可用的配置如下：

scrollSupressionThreshold（默认为10px）：必须滑动距离超过此值才能触发事件，否则就是scroll事件。
durationThreshold（默认为1000ms）：如果滑动持续时间超过此值，则阻止swipe事件的触发。
horizontalDistanceThreshold（默认为30px）：水平滑动距离必须超过此值才能触发事件。
verticalDistanceThreshold（默认为75px）：垂直滑动距离必须小于此值才能触发事件。

`tapholdThreshold`属性

每当您点击屏幕时，将触发 tap事件。如果点击持续时间超过一定值（默认为750ms），则将其视为 taphold事件。您可以通过设置$.event.special.tap.tapholdThreshold 属性来配置此持续时间，如下所示：

$("#main").live("tap", function(event) {
  $.event.special.tap.tapholdThreshold = 1000;
});

`注意`

默认 tap 事件配置对大多数平台都很有效。因此，只有在有非常强烈的理由时才修改它们。

`另请参阅`

使用虚拟鼠标事件 示例

`# 虚拟鼠标事件

jQuery Mobile 框架提供虚拟 mouse 或 vmouse 事件来抽象鼠标和触摸事件。

您无需为每个受支持的平台或设备的触摸和鼠标事件编写单独的处理程序。您只需为 vmouse 事件编写事件处理程序，它将在各种平台上正常工作。框架支持七个 vmouse 事件：vmousemove、vmouseover、vmouseout、vmousedown、vmouseup、vclick 和 vmousecancel。此示例向您展示如何使用这些 vmouse 事件。

准备工作

从 code/08/vmouse 源文件夹中复制此示例的完整代码。您可以通过以下 URL http://localhost:8080/08/vmouse/main.html 启动此代码。

如何实现...

应遵循以下步骤：

创建包含七个 div 标签的 main.html，用于展示七个 vmouse 事件，如下所示：

<div data-role="content">
  <div id="move"></div>
  <div id="over"></div>        
  <div id="out"></div>        
  <div id="down"></div>
  <div id="up"></div>
  <div id="click"></div>
  <div id="cancel"></div>
</div>

将以下脚本添加到 <head> 部分以处理 vmousemove、vmouseover 和 vmouseout 事件：

$("#main").live("pageinit", function(e) {
 $("#main").bind("vmousemove", function(e) {
    $("#move").html("<p>Move: " + e.clientX + ", " 
      + e.clientY + "</p>");
  });
 $("#main").bind("vmouseover", function(e) {
    $("#over").html("<p>Over: " + e.clientX + ", " 
      + e.clientY + "</p>");
  });
 $("#header").bind("vmouseout", function(e) {
    $("#out").html("<p>Out: " + e.clientX + ", " + 
      e.clientY + "</p>");
  });

接下来，按如下方式处理 vmousedown、vmouseup 和 vclick 事件：

 $("#main").bind("vmousedown", function(e) {
    var whichbtn;
    switch (e.which) {
      case 1: whichbtn = "Left Button"; break;
      case 2: whichbtn = "Center Button"; break;
      case 3: whichbtn = "Right Button"; break;
      default: whichbtn = "Tap"; break;
    }                        
    $("#down").html("<p>Down: " + e.clientX + ", " 
      + e.clientY + " - " + whichbtn + " </p>");
  });
 $("#main").bind("vmouseup", function(e) {
    $("#up").html("<p>Up: " + e.clientX + ", " + 
      e.clientY + "</p>");
  });
 $("#main").bind("vclick", function(e) {
    $("#click").html("<p>Click: " + e.clientX + ", 
      " + e.clientY + "</p>");
  });

最后，按如下方式处理 vmousecancel 事件：

 $("#main").bind("vmousecancel", function(e) {
    $("#cancel").html("<p>Cancel: " + e.clientX + ", 
      " + e.clientY + "</p>");
  });
});

工作原理...

创建 main.html，并添加七个空的 divs 来显示七个 vmouse 事件的位置。添加给定的脚本，并绑定每个 vmouse 事件的回调函数，如 pageinit 事件处理程序所示。使用传递给回调函数的事件参数的 e.clientX 和 e.clientY 值来获取 vmouse 事件的位置。当您加载页面并执行描述的各种鼠标操作时，屏幕显示如下：

当鼠标移动（或在 touchmove 事件上）时，将触发 vmousemove 事件。当移动操作在事件绑定的元素上完成时，将触发 vmouseover 事件。当移动操作移出事件绑定的元素时，将触发 vmouseout 事件。在上述代码中，vmouseout 事件绑定到 h1 标题上。将鼠标移动到标题上，然后移出，以查看屏幕上的此参数是否更新。当鼠标点击（或在 touchstart 事件上）时，将触发 vmousedown 事件。当点击结束时（touchend 事件），vmouseup 事件紧随 down 事件。在点击或触摸动作时，将同时触发 vclick 事件和 vmousedown、vmouseup 事件。在 vmousedown 事件处理程序中，您可以使用 event.which 属性来查找点击了哪个鼠标按钮。对于 tap 事件，此值为 0。您可以尝试点击鼠标上的不同按钮，以相应地查看屏幕更新。最后，当存在被取消的鼠标或触摸事件时，将触发 vmousecancel 事件。

还有更多...

框架为 vmouse 事件提供了以下三个配置：

$.vmouse.moveDistanceThreshold（默认为 10px）：如果移动超过此值，则为 scroll 事件。将调用 vmousecancel 事件并取消 TouchMove 事件。
$.vmouse.clickDistanceThreshold（默认为 10px）：如果已捕获 vmouse 点击事件，则它在阻止列表中。然后，所有小于此距离的 vmouse 点击都将被忽略。
$.vmouse.resetTimerDuration（默认为 1500ms）：如果 vmouse 点击之间的间隔大于此持续时间，则不是触摸事件。Scroll、TouchMove 和 TouchEnd 事件使用此值。阻止列表将被清除。

注意

默认的 vmouse 配置适用于大多数平台。因此，只有在有很强的理由时才修改它们。

鼠标坐标

此配方向您展示如何使用 event.clientX 和 event.clientY 属性获取鼠标坐标。您还可以使用 event.pageX、event.pageY、screen.pageX 和 screen.pageY 属性获取屏幕和页面坐标。

在触摸设备上使用 vclick 事件

在触摸设备上，webkit 浏览器会在触发 touchend 事件后大约 300 毫秒的延迟后处理点击事件。如果在此间隙内更改底层对象或背景，则可能选择不同的目标。另一个问题是由于时间延迟而将事件与相应目标匹配；例如，当使用 event.preventDefault() 时。为了避免这些问题，在触摸设备上使用 click 事件而不是 vclick 事件。

另请参阅

使用触摸事件 配方

页面初始化事件

jQuery Mobile 框架提供了页面插件，它自动处理页面初始化事件。 pagebeforecreate事件在页面创建之前触发。 pagecreate事件在页面创建后但在小部件初始化之前触发。 pageinit事件在完全初始化后触发。此示例向您展示如何使用这些事件。

准备工作

从code/08/pageinit源文件夹中复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/08/pageinit/main.html启动此代码。

如何操作...

执行以下步骤：

创建main.html，其中包含三个空的<div>标签，如下所示：

<div id="content" data-role="content">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>

将以下脚本添加到<head>部分以处理pagebeforecreate事件：

var str = "<a href='#' data-role='button'>Link</a>";
$("#main").live("pagebeforecreate", function(event) {
  $("#div1").html("<p>DIV1 :</p>"+str);
});

接下来，处理pagecreate事件：

$("#main").live("pagecreate", function(event) {
  $("#div1").find("a").attr("data-icon", "star");
});

最后，处理pageinit事件：

$("#main").live("pageinit", function(event) {
  $("#div2").html("<p>DIV 2 :</p>"+str);
  $("#div3").html("<p>DIV 3 :</p>"+str);
  $("#div3").find("a").buttonMarkup({"icon": "star"});
});

工作原理...

在main.html中，如下所示将三个空的divs添加到页面内容中。将给定的脚本添加到页面中。在脚本中，str是一个具有data-role="button"属性的创建锚链接的 HTML 字符串。

添加pagebeforecreate事件的回调，并将str设置为div1容器。由于页面尚未创建，因此div1中的按钮会自动初始化和增强，如下图所示。

添加pagecreate事件的回调。使用 jQuery 的find()方法选择div1中的前一个锚按钮，并设置其data-icon属性。由于此更改是在页面初始化之后但在按钮初始化之前进行的，所以div1按钮自动显示为star图标，如下图所示。最后，添加pageinit事件的回调，并将str添加到div2和div3容器中。此时，页面和小部件已经初始化和增强。现在添加一个锚链接将仅显示为div2的原生链接，如下图所示。但是，对于div3，找到锚链接，并在按钮插件上手动调用buttonmarkup方法，并将其图标设置为star。现在当您加载页面时，div3中的链接将被增强如下所示：

还有更多...

您可以在插件上触发"create"或"refresh"，以让 jQuery Mobile 框架增强对页面或小部件进行的动态更改后的初始化。

页面初始化事件仅触发一次

页面初始化事件仅触发一次。因此，这是进行任何特定初始化或添加自定义控件的好地方。

不要使用$(document).ready()

$(document).ready()处理程序仅在加载第一个页面或 DOM 首次准备就绪时起作用。如果通过 Ajax 加载页面，则不会触发ready()函数。而pageinit事件在页面创建或加载和初始化时触发。因此，这是在应用程序中进行后初始化活动的最佳位置。

$(document).bind("pageinit", callback() {…});

页面加载和移除事件

jQuery Mobile 框架在将外部页面加载到 DOM 时会触发页面加载事件。它会在加载页面之前触发pagebeforeload事件，然后根据页面加载的状态触发pageload或pageloadfailed事件。当页面从 DOM 中移除时会触发pageremove事件。本教程向您展示如何使用页面加载和页面移除事件。

准备工作

从code/08/pageload源文件夹中复制此配方的完整代码。您可以使用 URL http://localhost:8080/08/pageload/main.html启动此代码。

如何做...

执行以下步骤：

根据以下代码片段创建带有四个按钮和一个空的div元素的main.html：

<div id="content" data-role="content">
  <a href="page1.html" data-role="button" data-
    inline="true">Page 1</a>
  <a href="page2.html" data-role="button" data-
    inline="true">Page 2</a>        
  <a href="page3.html" data-role="button" data-
    inline="true">Page 3</a>
  <a href="page4.html" data-role="button" data-
    inline="true">Page 4</a>
  <div id="msgdiv"></div>
</div>

在<head>部分添加以下脚本来处理pagebeforeload事件：

$(document).bind("pagebeforeload", function(event, data) {
  var str = "<p>LOADING PAGE ...</p>"
    + "<p>url: " + data.url + "</p>"
    + "<p>absUrl : " + data.absUrl + "</p>"
    + "<p>dataUrl : " + data.dataUrl + "</p>"
    + "<p>options.type: " + data.options.type + "</p>";
  var re = /page2.html/;
  if ( data.url.search(re) !== -1 ) {
    str += "<p>ABORTED!!! page2.html does not 
      exist.</p>";
    event.preventDefault();
 data.deferred.reject( data.absUrl, data.options);
  }
  re = /page4.html/;
  if ( data.url.search(re) !== -1 ) {
    str += "<p>ABORTED!!! error dialog shown 
      instead.</p>";
    event.preventDefault();
 data.deferred.resolve( data.absUrl, data.options, 
 $("#subpage")); 
  }
  $("#msgdiv").html(str).trigger("refresh");
});

接下来，处理pageload事件：

$(document).bind("pageload", function(event, data) {
  var str = "<p>PAGE LOADED!</p><p>textStatus: " + data.textStatus 
    +   "</p><p>xhr.status : " + data.xhr.status + "</p>";
  $("#msgdiv").append(str).trigger("refresh");
});

接着，处理任何pageloadfailed事件中的错误：

$(document).bind("pageloadfailed", function(event, 
 data) {
  var str = "<p>PAGE LOAD FAILED!</p>"+ "<p>textStatus: " + data.textStatus + "</p>"
    + "<p>xhr.status : " + data.xhr.status + "</p>"
    + "<p>errorThrown : " + data.errorThrown + "</p>";
  $("#msgdiv").append(str).trigger("refresh");
});

同样处理pageremove事件：

$("#page1").live("pageremove", function(event) {
  $("#msgdiv").append("<p>PAGE 
    REMOVED!</p>").trigger("refresh");
});

现在，按照以下步骤创建带有id="dialog"的对话框：

<div id="dialog" data-role="dialog" data-theme="e" data-add-back-btn="true">
  <div data-role="header">
    <h1>Page Load Failed!</h1>
  </div>
  <div data-role="content">
    <p>There was an error</p>
  </div>      
</div>

最后，根据以下代码片段创建带有返回到#main按钮的page1.html：

<div id="page1" data-role="page" data-theme="e">
  <div data-role="header">
    <h1>Header of Page 1</h1>
  </div>
  <div data-role="content">
    <a href="#" data-role="button" data-
      rel="back">Go to Main Page</a>
  </div>
</div>

它是如何工作的...

在main.html中创建#main页面，并添加四个锚链接，带有data-role="button"和data-inline="true"属性，以创建四个内联按钮。这些链接指向page1.html、page2.html、page3.html和page4.html。同时添加一个空的div容器，带有id="msgdiv"用于显示消息。接着，在main.html中添加一个带有id="dialog"的对话框。最后，只创建page1.html，如下所示，其中包含一个返回主页的链接。其他三个页面不需要创建。将页面加载和页面移除事件绑定到脚本中给出的回调函数。这些回调函数有两个参数可用。第一个是event对象，第二个是data对象。

在pagebeforeload事件的回调中，从data对象中获取url、absUrl（绝对 URL）、dataUrl（数据 URL）和options.type属性。将它们显示在msgdiv容器中。options对象与传递给$.mobile.loadPage()调用的相同。

在pageload事件的回调中，获取xhr.status（jQuery XMLHttpRequest对象）和textStatus属性，指示页面加载成功，并在msgdiv容器中显示它们。

添加pageloadfailed回调函数以在页面加载错误时显示data.xhr.status和data.errorThrown属性。最后，添加pageremove回调函数并显示页面已被移除的消息。

现在，当您首次加载应用程序并点击页面 1按钮打开page1.html时，首先触发pagebeforeload事件，然后在完全加载页面之后触发pageload事件。返回主页时触发pageremove事件。您可以看到下面的屏幕截图中显示的这些消息：

接下来，在pagebeforeload事件处理程序中，使用正则表达式搜索来检查所请求的页面或data.url是否为page2.html（该页面不存在）。如果请求了page2.html，则显示自定义错误消息。还通过调用event.preventDefault()来阻止对此请求的进一步操作。最后必须调用data.deferred.reject()方法来拒绝数据对象中包含的延迟对象引用。现在，当您单击Page 2按钮时，不会触发pageloadfailed事件，如下面的屏幕截图所示，而是显示自定义错误消息ABORTED!!! page2.html 不存在。：

点击Page 3按钮；它现在尝试加载page3.html，但是找不到，并显示了默认的Error Loading Page错误消息，如下面的屏幕截图所示。您还可以在这里看到pageloadfailed事件处理程序的消息。在这种情况下没有进行自定义事件处理。

最后，在pagebeforeload回调函数中添加代码，以搜索data.url对象中的page4.html。如果找到字符串，则将请求重定向到加载#dialog对话框。还如果请求了page4.html，则显示自定义消息。现在，要阻止pagebeforeevent上的默认操作，请调用event.preventDefault()方法。还必须调用data.deferred.resolve()方法来解析data对象中包含的延迟对象引用。然后，通过将其作为参数传递给resolve方法，打开#dialog页面，如代码所示。现在，当您单击Page 4按钮时，将显示自定义错误对话框弹出窗口。当关闭对话框时，将显示您的自定义消息ABORTED!!!显示错误对话框。，如下面的屏幕截图所示。您会注意到pageloadfailed事件回调函数没有被调用。

还有更多...

如果通过调用event.preventDefault()方法来阻止默认的页面加载事件，那么在完成后，必须通知框架恢复处理其他changePage()请求。您可以通过在事件的回调函数中对传递给data.deferred对象调用reject()或resolve()方法来实现这一点。

另请参阅

在第九章方法和实用程序中的使用 loadPage()加载页面中的配方

页面更改事件

每当$.mobile.changePage()方法将页面加载到 DOM 中时，jQuery Mobile 框架都会触发页面更改事件。首先触发pagebeforechange事件，然后触发pagechange事件（成功时）或pagechangefailed事件（失败时）。本节介绍如何使用页面更改事件。

准备好了

从 code/08/pagechange 源文件夹中复制此配方的完整代码。你可以使用 http://localhost:8080/08/pagechange/main.html URL 启动此代码。

如何做...

执行以下步骤：

创建 main.html，其中包含两个链接以打开两个对话框，并在其页面内容中包含一个空的 div 元素，如下所示：

<div id="content" data-role="content">
  <a href="#dialog1" data-role="button">Dialog 1</a>
  <a href="#dialog2" data-role="button">Dialog 2</a>        
  <div id="msgdiv"></div>
</div>

将以下脚本添加到 <head> 部分以处理 pagebeforechange 事件：

$(document).bind("pagebeforechange", function(event, data) {
  var str = "<p>CHANGING PAGE ...</p><p>toPage: ";
  str += (!!data.toPage.attr)? data.toPage.attr("data-
    url") : data.toPage;
  str += "</p>";
  $("#msgdiv").html(str).trigger("refresh");
  $("#dialogdiv").html(str).trigger("refresh");
});

接下来，处理 pagechange 事件：

$(document).bind("pagechange", function(event, data) {
  var str = "<p>CHANGED PAGE ...</p><p>fromPage: ";
  str += (!!data.options.fromPage && !!data.options.fromPage.attr)? 
  data.options.fromPage.attr("data-url") : "none";
  str += "</p><p>options.transition: " + data.options.transition + "</p>";
  $("#msgdiv").append(str).trigger("refresh");
  $("#dialogdiv").append(str).trigger("refresh");
});

接下来，处理 pagechangefailed 事件中的任何错误：

$(document).bind("pagechangefailed", function(event, 
 data) {
  var str = "<p>PAGE CHANGE FAILED ...</p>";
  $("#msgdiv").append(str).trigger("refresh");
});

最后，按以下方式创建 #dialog1 对话框。第二个对话框 #dialog2 不会被创建。

<div id="dialog1" data-role="dialog" data-theme="e" 
  data-add-back-btn="true">
  <div data-role="header">
    <h1>Dialog Header</h1>
  </div>
  <div data-role="content">
    <div id="dialogdiv"></div>
  </div>
</div>

工作原理...

在 main.html 中，将两个锚链接添加到 #main 页面的内容中，这些链接指向 #dialog1 和 #dialog2 对话框。还添加一个带有 id="msgdiv" 的空 div 容器以显示消息。最后，只向 main.html 添加一个带有 id="dialog1" 的对话框。将一个空的带有 id="dialogdiv" 的 div 容器添加到此对话框中。另一个对话框不会被创建。将页面更改事件绑定到给定的脚本中的回调函数。这些回调函数有两个可用参数。第一个是 event 对象，第二个是 data 对象。

在 pagebeforechange 事件的回调中，获取 data.toPage（目标页面）属性。这可以是字符串或对象。检查这是否是一个对象（是否具有 toPage 属性），然后使用 data.toPage.data-url 字符串。在两个消息 div 容器中显示 toPage 消息。

在 pagechange 事件的回调中，获取 data.fromPage（源页面）属性。再次检查这是对象还是字符串，并在消息 div 容器中显示 data.fromPage.data-url 字符串，如果它是一个对象。另外，data.options 对象具有属性，例如 transition，你可以使用。

最后，在 pagechangefailed 事件的回调中，显示自定义错误消息。当页面首次加载时，可以看到以下图像。main 文本显示为 toPage；这里没有 fromPage：

单击 Dialog 1 按钮，将显示以下对话框。 toPage 值是 dialog1， fromPage 是 main。所使用的转换显示为 pop，这是对话框的默认转换：

关闭此对话框，然后打开 #main 页面，显示与以下截图中显示的消息类似的消息。 toPage 是 main， fromPage 是 dialog1。所使用的转换再次显示为 pop：

最后，单击 Dialog 2 按钮；由于 #dialog2 不存在，所以会显示自定义错误消息 PAGE CHANGE FAILED，如你在 pagechangefailed 回调中所见：

还有更多...

你可以在pagebeforechange事件处理程序中调用event.preventDefault()方法来阻止默认的页面更改操作。你可以使用$.mobile.changePage()方法将导航重定向到另一个页面。

页面转换事件的顺序

在触发pagebeforechange事件后, changePage() 请求将页面加载到 DOM 中，然后页面过渡发生。此刻触发pageshow和pagehide事件。最后，只有在此之后才会触发pagechange事件。

参见

第九章中的使用 changePage()来更改页面示例，方法和工具

页面过渡和动画事件

在页面导航期间，当前页面变换出去，新的活动页面变换进来。在支持的情况下会使用动画效果。jQuery Mobile 框架在页面导航期间会触发四个页面转换事件，如下所示：

pagebeforehide: 在当前页面隐藏之前触发此事件
pagehide: 当前页面隐藏后触发此事件
pagebeforeshow: 在新的活动页面显示之前触发此事件
pageshow: 一旦活动页面显示出来就会触发此事件

你也可以访问animationComplete插件，以便在动画完成后立即执行自定义操作。此示例向你展示如何使用页面过渡事件，以及如何使用animationComplete插件。

准备工作

从code/08/transition源文件夹中复制此示例的完整代码。你可以使用 URLhttp://localhost:8080/08/transition/main.html运行此代码。

如何做...

执行以下步骤：

创建main.html，并添加带有指向打开#page页面的链接和一个空的div容器#main页面的代码片段如下所示：

<div id="main" data-role="page" data-theme="e">
  <div data-role="header">
    <h1>Page Transition and Animation Events</h1>
  </div>
  <div id="content" data-role="content">
    <a href="#page" data-role="button" data-
      transition="slide">Page 1</a>
  <div id="msgdiv"></div>
</div>

创建#page页面，包括一个回到#main的按钮和一个空的div容器来显示消息：

<div id="page" data-role="page" data-theme="e">
  <div data-role="header">
    <h1>Page Header</h1>
  </div>
  <div data-role="content">
    <a href="#" data-rel="back" data-role="button">Go Back</a>
  <div id="pagediv"></div>
</div>

在<head>部分添加以下脚本，以便在点击链接时清除消息div容器：

$("#main").live("pageinit", function(event) {
  $("a").bind("click", function(event, ui) {
    $("#msgdiv").html("");
    $("#pagediv").html("");
  });
});

处理pagebeforeshow事件：

$(document).bind("pagebeforeshow", function(event, data) {
  var str = "<p>BEFORE PAGE SHOW ...</p><p>Previous 
    Page: ";
  str += (!!data.prevPage.attr)? 
    data.prevPage.attr("data-url") : "none";
  str += "</p>";
  $("#msgdiv").append(str).trigger("refresh");
  $("#pagediv").append(str).trigger("refresh");
});

处理pagebeforehide事件：

$(document).bind("pagebeforehide", function(event, 
 data) {
 $(data.nextPage).animationComplete(anim);
  var str = "<p>BEFORE PAGE HIDE ...</p><p>Current Page: ";
  str += (!!data.nextPage.attr)?
    data.nextPage.attr("data-url") : "none";
  str += "</p>";        
  $("#msgdiv").append(str).trigger("refresh");
  $("#pagediv").append(str).trigger("refresh");
});

处理pageshow事件：

$(document).bind("pageshow", function(event, data) {
  var str = "<p>PAGE SHOW!</p><p>Previous Page: ";
  str += (!!data.prevPage.attr)? 
    data.prevPage.attr("data-url") : "none";
  str += "</p>";
  $("#msgdiv").append(str).trigger("refresh");
  $("#pagediv").append(str).trigger("refresh");
});

处理pagehide事件：

$(document).bind("pagehide", function(event, data) {
  var str = "<p>PAGE HIDE!</p><p>Current Page: ";
  str += (!!data.nextPage.attr)? 
    data.nextPage.attr("data-url") : "none";
  str += "</p>";        
  $("#msgdiv").append(str).trigger("refresh");
  $("#pagediv").append(str).trigger("refresh");
});

添加animationComplete()方法的回调函数：

anim = function() {
  $("#msgdiv").append("ANIMATION 
    DONE!!!").trigger("refresh");
  $("#pagediv").append("ANIMATION 
    DONE!!!").trigger("refresh");          
}

工作原理...

创建main.html，并添加一个带有data-role="button"的锚链接到#main页面的内容。此链接打开main.html中的#page页面。创建#page页面，如下所示，其中包含返回到#main的链接。分别向页面添加空的#msgdiv和#pagediv容器来显示消息。在pageinit事件处理程序中绑定锚链接的click事件，并清除先前显示的消息。每当你在应用中点击链接时，都会触发此回调。

现在，按照脚本中给定的方式将四个页面转换事件绑定到它们的回调函数。这些回调函数有两个可用参数。第一个参数是event对象，第二个是data对象。

在pagebeforeshow事件的回调函数中，获取data.prevPage（上一页）对象。第一次加载时可能为空。检查是否可用（是否具有prevPage属性），并使用data.prevPage.data-url字符串。在消息div容器中显示prevPage消息。在pagehide事件的回调函数中使用类似的逻辑。

类似地，在pagebeforehide和pagehide事件的回调函数中，获取并显示data.toPage（源页面）属性。最后，调用animationComplete插件，并在pagebeforehide事件处理程序中定义anim回调函数，如下所示。在anim()函数中编写代码，在两个 div 容器中显示简单的动画完成!!!消息。

当页面首次加载时，您可以看到以下图片，显示了pagebeforeshow和pageshow事件处理程序被调用。此时prevPage是未定义的。

点击Page 1按钮打开#page。您可以看到来自pagebeforehide和pagebeforeshow事件处理程序的消息，即当前页是page，上一页是main。然后，您可以看到来自animationComplete()回调的动画完成!!!消息。此时页面可见，并且还可以看到来自pagehide和pageshow事件的消息：

点击返回按钮。现在，#main被显示，消息与之前一样显示。这次，当前页是main，上一页是page：

还有更多...

第一次加载时，pagebeforeshow和pageshow事件处理程序显示一个空的data.nextPage对象。为了在第一次加载时显示正确的值，这两个事件必须在mobileinit处理程序中绑定到它们的回调函数，即在页面加载之前以及加载jquery.mobile.js脚本文件之前，如下面的代码片段所示：

<script>
 $(document).bind("mobileinit", function() {
    $(document).bind("pagebeforeshow", function(event, data) {
    alert(data.nextPage);
  });
  $(document).bind("pageshow", function(event, data) {
    alert(data.nextPage);
  });
});
</script>
<script src="img/jquery.mobile-1.1.1.min.js"></script>

另请参阅

在第七章的Configuring the default transitions一节中，配置

使用布局事件

用户交互动态调整大小的组件，例如列表视图和可折叠块，会导致控件重叠或定位问题。为防止此情况发生，这些组件会触发updatelayout事件，而 jQuery Mobile 框架会更新整个文档，确保所有组件都正确布局。本文介绍如何使用updatelayout事件。

准备工作

从code/08/layout源文件夹中复制此配方的所有代码。您可以通过使用 URLhttp://localhost:8080/08/layout/main.html来启动此代码。

它是如何实现的...

执行以下步骤：

使用以下代码创建 main.html，其中包含三个可折叠块和一个 <div> 容器，如下面的代码片段所示：

<div data-role="content">
 <div id="msgdiv">Collapsible Blocks</div>
  <div data-role="collapsible" data-theme="a" data-
    collapsed="false">
    <h3>Tallest Mountain</h3>
    Mt. Everest
  </div>
  <div data-role="collapsible" data-theme="a" data-
    collapsed="false">
    <h3>Longest River</h3>
    R. Nile
  </div>
  <div data-role="collapsible" data-theme="a" data-
    collapsed="false">
    <h3>Largest Ocean</h3>
    Pacific
  </div>
</div>

在 <head> 部分添加以下脚本，来处理 updatelayout 事件：

$("#main").live("pageshow", function(event, ui) {
 $("div").bind("updatelayout", function(event) {
    $("#msgdiv").html("updatelayout on : " + event.target.innerHTML);
  });
});

它是如何工作的...

在 main.html 中，向页面内容添加一个 id="msgdiv" 的 div 容器。添加三个带有 data-collapsed="false" 属性的可折叠块。添加下面给出的脚本来绑定 pageshow 事件（在页面显示时触发），指向一个事件处理程序。在这里，把 updatelayout 事件绑定到一个回调函数。在这个回调函数中，使用 event.target.innerHTML 属性来获取触发 updatelayout 事件的可折叠块的文本。如所示，显示在 msgdiv 块中。现在，当加载页面时，这三个可折叠块都是展开的。

点击第一个块，显示 最高的山。你会看到它折叠，并且 msgdiv 文本被更新为显示 更新布局在：珠穆朗玛峰，如下面的截图所示：

还有更多内容...

jQuery Mobile 框架在你在页面中添加或操作组件或切换它们的可见性的情况下，会根据大多数场景动态更新布局并调整位置。你必须在这些元素上触发 create 或 refresh 方法。但是在一些情况下，当你添加或操作控件或切换它们的可见性时，框架可能无法正确处理定位。在这种情况下，你可以触发 updatelayout 事件，并告诉框架更新所有组件并重新定位它们。你可以通过以下代码来实现：

(yourselector).trigger("updatelayout");

第九章：方法和实用工具

本章将介绍以下食谱：

使用loadPage()加载页面
使用changePage()来更改页面
使用jqmData()和jqmRemoveData()
使用jqmEnhanceable()
使用jqmHijackable()
使用$.mobile.base
解析 URL
使用$.mobile.path 实用方法
使用静默滚动

介绍

jQuery Mobile 框架提供了许多在$.mobile对象上工作的方法和实用工具。本章向您展示如何使用这些方法和实用工具。

本章所有食谱的源文件都在存档的code/09文件夹下。每个食谱都在自己的子文件夹中列出，其名称相应命名。

使用 loadPage()加载页面

使用$.mobile.loadPage()方法，您可以将外部页面在后台加载到 DOM 中并增强其内容，而不影响当前页面。本食谱向您展示如何执行此操作。

准备工作

从code/09/loadpage源文件夹中复制此食谱的完整代码。您可以通过 URL:http://localhost:8080/09/loadpage/main.html来启动此代码。

如何进行...

创建main.html，带有页面id="main"，并添加一个空的div标签和一个指向#page1的链接，如下所示：
```
<div data-role="content">
  <div id="msgdiv"></div>
  <a href="#page1" data-role="button">Show Page 1</a>
</div>
```

为#main的pagebeforeshow事件添加事件处理程序，并使用loadPage()方法加载#page1：

$("#main").live("pagebeforeshow", function(event, data) {
  $("#msgdiv").html("<p>Current Active Page : " 
    + $.mobile.activePage.attr("data-url") + "</p>");
 $.mobile.loadPage( "page1.html", {role: "dialog"});
});

为#page1的pagebeforeshow事件添加事件处理程序，以更新显示的消息：

$("#page1").live("pagebeforeshow", function(event, data) {
  $("#page1content").html("<p>Current Active Page : " 
 + $.mobile.activePage.attr("data-url") + "</p>");
});

最后，创建page1.html，如下所示：

<div id="page1" data-role="page" data-theme="e">
  <div data-role="header">
    <h1>Header of Page 1</h1>
  </div>
  <div id="page1content" data-role="content"></div>
</div>

它是如何工作的...

创建具有#main页面的main.html，并添加一个空的div，其中id="msgdiv"和一个打开其中#page1链接的链接。在pageinit期间，#page1引用尚不可用，因为它来自外部的page1.html文件。在#main页面上添加pagebeforeshow事件处理程序。在这里，使用$.mobile.activePage()方法获取当前活动页面，并使用 jQuery 的attr()方法将其data-url属性显示在#msgdiv中。接下来，使用$.mobile.loadPage()调用加载page1.html。同时，设置loadPage()选项，并将role属性设置为dialog。页面现在在后台加载。

为#page1的pagebeforeshow事件添加事件处理程序。获取之前完成的活动页面的data-url并在#page1content div 容器中显示它。最后，创建一个带有id="page1content"的空 div 的page1.html页面。

当main.html加载时，您将看到显示页面 1按钮。点击它，page1.html将以默认弹出过渡方式显示为对话框。另外，活动页面的数据 URL 将在这两个页面中正确显示。

还有更多...

$.mobile.loadPage()返回一个延迟的promise对象，一旦页面被增强并加载到 DOM 中，它就会自动解决。

loadPage()选项

loadPage()方法将一个可选的options对象作为第二个参数。可在options对象上设置以下属性：

data：这是 Ajax 页面请求的数据
loadMsgDelay（默认为 50 秒）：这是显示页面加载消息之前的延迟时间
pageContainer：这是包含加载页面的元素
reloadPage（默认为 false）：这将强制重新加载页面
role：这是页面加载的 data-role 值
showLoadMsg（默认为 false）：这决定是否显示页面加载消息
type（默认为 get）：这指定了 Ajax 请求的类型（get 或 post）

另请参阅

使用 changePage() 更改页面 小节
在第八章的 Events 中的 使用页面加载和删除事件 小节

使用 changePage() 更改页面

此小节向您展示如何使用 $.mobile.changePage() 方法使用 JavaScript 从一个页面切换到另一个页面。此小节扩展了第六章的 使用分割按钮列表 小节，列表视图，并在新页面中显示所选列表项中的图像。

准备工作

从 code/09/changepage 源文件夹中复制此小节的完整代码。还要重新查看第六章的 使用分割按钮列表 小节。您可以通过以下 URL 启动此代码：http://localhost:8080/09/changepage/main.html。

如何做...

创建 main.html，其中包含一个分割按钮列表，<img> 标签的 href 属性具有一个 file 参数，在左按钮中有图像文件的路径，如下所示：

<div data-role="content">
  <ul data-role="listview" data-inset="true" 
    data-theme="b" data-split-theme="e" 
    data-split-icon="arrow-d">
    <li>
 <a href="#viewphoto&file=img1.png">
        <img style="margin: 10px" 
          src="img/img1.png" />
          <h3>Lal Bagh</h3>
      </a>
      <a href='#' data-rel='dialog'>Download</a>
    </li>
    <li>
 <a href="#viewphoto&file=img2.png">
        <img style="margin: 10px" 
          src="img/img2.png" />
          <h3>Peacock</h3>
      </a>
      <a href='#' data-rel='dialog'>Download</a>
    </li>
    <li>
 <a href="#viewphoto&file=img3.png">
        <img style="margin: 10px"  
          src="img/img3.png"
          height=75% />
          <h3>Ganesha</h3>
      </a>
      <a href='#' data-rel='dialog'>Download</a>
    </li>
  </ul>
</div>

添加 #viewphoto 页面，并在点击分割按钮的左部时打开它：

<div id="viewphoto" data-role="page" data-theme="e" data-add-back-btn="true">
….....
  <div data-role="content">
    <div id="imgid">
    <p>Displaying Image ...</p>
    </div>
  </div>
</div>

在 <head> 部分添加以下脚本，并在 pagebeforechange 事件处理程序中调用 $.mobile.changePage()：

$(document).live( "pagebeforechange", function( e, data ) {
  if ( typeof data.toPage === "string" ) {
    var u = $.mobile.path.parseUrl( data.toPage );
    var re = /^#viewphoto&file/;
    if ( u.hash.search(re) !== -1 ) {
 $.mobile.changePage("main.html#viewphoto",
      {
        transition: "pop",
        dataUrl: u.hash.split("=")[1],
        type: "get"
      });
 e.preventDefault();
    }
  }
});

在 #viewphoto 页面的 pagebeforeshow 事件处理程序中显示图像：

$("#viewphoto").live( "pagebeforeshow", function( e, data ) {
  var u = $.mobile.path.parseUrl( document.location.href );
  var re = /^#img/;
  if ( u.hash.search(re) !== -1 ) {
    var str="<img src='../../images/" + u.hash.substr(1) + "' />";
    $("#imgid").html(str).trigger("refresh");
  }
});

它是如何工作的...

在 main.html 中添加分割按钮列表和 #viewphoto 页面，如代码所示。在 #viewphoto 页面的 div 标签中添加一个空的 #imgid 属性，以显示完整的图像。分割按钮列表和 #viewphoto 页面的代码已在第六章中解释过。右按钮的 href 属性只是指向 #，因为在此小节中未使用。将左按钮中列表项的 href 属性更改为包括文件参数；例如，href="#viewphoto&file=img1.png"。启动应用程序时，将显示如下屏幕，其中显示了缩略图，如分割按钮列表所示。

但是，当你点击分割列表按钮时，没有任何反应，因为框架不理解带有 href 属性的文件参数。要打开并显示图像，您将需要手动处理页面更改。要手动调用 pageChange()，请为 pagebeforechange 事件添加事件处理程序。在这里，检查目标页面（data.toPage）是否是 URL 字符串，并使用 $.mobile.path.parseUrl() 方法获取 URL 组件。现在，使用正则表达式搜索 URL 哈希中的文件参数 — #viewphoto&file。如果找到，则是查看图像的请求。现在，你必须处理页面更改。

调用 pageChange() 方法并传递 main.html#viewphoto URL。另外，用自定义值设置 options 参数的transition、type 和 dataUrl。你可以按照示例将文件名信息存储在 dataUrl 中，通过分割 URL 哈希来实现。最后，防止默认的 pagebeforechange 事件处理，因为你已经在这里处理页面更改。

接下来，您将需要查询提供给 pageChange() 的 URL 字符串，以获取 file 参数，并显示图像。要做到这一点，请为 #viewphoto 页面的 pagebeforeshow 事件添加事件处理程序。使用 $.mobile.path.parseUrl() 方法获取 URL 组件。搜索 img 表达式；如果找到，从 URL 哈希中获取文件名，并在代码中显示在 #imgid div 容器中。现在，如果你点击任何列表项，相应的图像将在 #viewphoto 页面中以较大尺寸显示，如下面的截图所示：

还有更多...

$.mobile.changePage() 方法在页面更改期间内部使用 $.mobile.loadPage() 方法来获取新页面。

changePage() 选项

changePage() 方法接受可选的 options 对象作为第二个参数。可以在 options 对象上设置以下属性：

allowSamePageTransition（默认为false）：默认情况下忽略对当前活动页面的转换，但可以通过使用 allowSamePageTransition 选项启用
changeHash（默认为true）：这会更新位置栏中的哈希
data：这是 Ajax 页面请求的数据
dataUrl：这是页面更改后更新浏览器位置的 URL
pageContainer：这是包含加载的页面的元素
reloadPage（默认为false）：这会强制重新加载页面
reverse（默认为false）：这是页面显示过渡方向
role：为页面显示提供 data-role 值
showLoadMsg（默认为false）：决定是否显示页面加载消息
transition：这是用于页面更改的过渡效果
type（默认为get）：指定 Ajax 请求的类型（get 或 post）

另请参见

使用 loadPage() 加载页面和解析 URL 的示例
第六章 列表视图下的使用分隔按钮列表示例
第八章事件下的使用页面加载和移除事件示例

使用 jqmData()和 jqmRemoveData()

jqmData()和jqmRemoveData()方法可用于向 jQuery 移动应用程序的元素添加或移除数据属性。它们会自动处理自定义命名空间。本节介绍了如何使用这些方法。

准备就绪

从code/09/jqmdata源文件夹复制此示例的完整代码。你可以通过 URL 访问此代码：http://localhost:8080/09/jqmdata/main.html。

如何实现...

在包含jquery.``mobile.js之前，将以下脚本添加到main.html中：
```
$(document).bind("mobileinit", function() {
 $.mobile.ns = "my-";
});
```

在页面中添加两个文本输入和一个按钮，如下所示：

<div data-my-role="content">
  <div data-role="fieldcontain">
    <label for="pgtheme">Page Theme : </label>
    <input type="text" id="pgtheme" />
  </div>
  <div data-role="fieldcontain">
    <label for="customdata">Custom Data : </label>
    <input type="text" id="customdata" />
  </div>
  <button id="clearbtn">Clear Custom Data</button>
</div>

将以下脚本添加到<head>部分以调用jqmData()和jqmRemoveData(``)方法：

$("#main").live("pageinit", function(event) {
 var pg = $("div:jqmData(role='page')");
 pg.jqmData("custom", "Custom data text");
   $("#pgtheme").attr("value", pg.jqmData("theme"));
   $("#customdata").attr("value", pg.jqmData("custom"));
   $("#clearbtn").bind("click", function(event, ui) {
 pg.jqmRemoveData("custom");
 $("#customdata").attr("value", 
 ""+pg.jqmData("custom")); 
   });
});

工作原理...

在main.html中，在包含对jquery.mobile.js的引用之前，为mobileinit事件添加事件处理程序。这会在应用程序启动时调用。在这里，设置$.mobile.ns="my-"命名空间配置。

添加两个文本输入，分别为id="pgtheme"和id="customdata"，用于显示页面主题和自定义数据。添加一个id="clearbtn"的按钮。接下来，将pageinit事件绑定到回调函数。在此函数中，使用div:jqmData(role='page')自定义选择器获取page元素。使用jqmData()确保自动处理带有自定义命名空间的数据属性（data-my-role）的查找。

使用jqmData()方法在页面上设置值为自定义数据文本的自定义数据属性，如下截图所示。最后，在两个文本输入框中显示页面主题和自定义数据属性。页面显示如下：

接下来，为#clearbtn添加一个click事件处理程序，使用jqmRemoveData()方法移除页面上设置的自定义数据属性，并更新自定义数据文本字段的值。现在，当你点击清除自定义数据按钮时，文本框将显示未定义。

另请参阅

第七章配置下的配置默认命名空间示例

使用 jqmEnhanceable()

当在父元素上设置了data-enhance="false"时，它会被所有子元素继承。为了搜索可以使用手动增强或用于自定义插件编写的元素，jQuery Mobile 框架提供了一个名为jqmEnhanceable()的过滤方法。本配方向您展示如何使用它。

准备工作

从code/09/jqmenhance源文件夹复制此配方的完整代码。你可以使用 URL http://localhost:8080/09/jqmenhance/main.html来启动此代码。

怎么做...

在包含j``query.mobile.js之前，将以下脚本添加到main.html中：

$(document).bind("mobileinit", function() {
 $.mobile.ignoreContentEnabled = true; 
});

如所示，在页面中添加两个锚按钮。第二个按钮位于一个具有data-enhance="false"的div标签内。

<div data-role="content">
  <div>
    <a href="#">Link 1</a>
  </div>
 <div data-enhance="false">
    <a href="#">Link 2</a>
  </div>
</div>

在<head>部分添加以下脚本来调用jqmEnha``nceable()方法：

$("#main").live("pagecreate", function(event) {
 $("a").jqmEnhanceable().attr("data-role", "button");
});

它的工作原理...

在main.html中，在包含对jquery.mobile.js的引用之前为mobileinit事件添加一个事件处理程序，该事件在应用程序启动时被调用。设置$.mobile.ignoreContentEnabled=true配置。

在#main的内容中添加两个div标签。将一个#链接添加到这两个div标签中。不要在任何一个链接上设置data-role="button"属性。第二个div标签设置了data-enhance="false"属性。接下来，将pagecreate事件绑定到事件处理程序上。此时，页面已经被initialized，但是小部件还没有被增强。现在按照所示在锚元素上调用jqmEnhanceable()方法。此方法会过滤并提供仅仅不从父级继承data-enhance="false"的那些锚元素。所以在代码中，Link 1被提供了。使用 jQuery 的attr()调用将其data-role属性设置为button，如代码所示。

现在，当你打开应用程序时，只有Link 1被增强为按钮，而Link 2没有被增强，如下截图所示：

参见

使用 jqmHijackable() 配方

使用 jqmHijackable

当在父元素上设置data-ajax="false"时，这会被所有子元素继承。有一个名为jqmHijackable()的过滤方法可用于搜索可以使用自定义表单和链接绑定的子元素。本配方向您展示如何使用此方法。

准备工作

从code/09/jqmhijack源文件夹复制此配方的完整代码。你可以使用 URL: http://localhost:8080/09/jqmhijack/main.html来启动此代码。

怎么做...

在包含jquery.mobile.js之前，将以下脚本添加到main.html中：

$(document).bind("mobileinit", function() {
  $.mobile.ignoreContentEnabled = true;   
});

向页面添加两个锚按钮，如下所示。第二个按钮位于具有data-ajax="false"属性的div标签内：

<div data-role="content">
  <div>
    <a href="page1.html" data-role="button">Link 1</a>
  </div>
 <div data-ajax="false">
    <a href="page1.html" data-role="button">Link 2</a>
  </div>
</div>

将以下脚本添加到<head>部分以调用jqmHijackable()方法：

$("#main").live("pageinit", function(event) {
 $("a").jqmHijackable().each(function() {
    $(this).attr("data-transition", "flip");
  });
});

最后，按下面的代码片段创建page1.html：

<div id="page1" data-role="page" data-theme="e">
….....
  <div data-role="content">
    <p>Page 1 Content</p>
 <a href="main.html" data-direction="reverse" data-ajax="false"
      data-role="button">Go Back</a>
  </div>
</div>

它是如何工作的...

在main.html中，在包含对jquery.mobile.js的引用之前，为mobileinit事件添加一个事件处理程序。这在应用程序开始时被调用。设置$.mobile.ignoreContentEnabled=true配置。

在#main的内容中添加两个div标签。在这些div标签中都添加一个链接到外部的page1.html文件。第二个div标签设置了data-ajax="false"属性。接下来，将pageinit事件绑定到事件处理程序，并在锚元素上调用jqmHijackable()方法，如代码所示。这将筛选并提供那些没有继承自父元素的data-ajax="false"的锚元素。所以，代码中，Link 1被使可用。使用 jQuery 的attr()调用，将其data-transition属性设置为flip，如代码所示。最后，创建page1.html，并在Go Back链接返回到#main页面。

现在，当您点击Link 1时，page1.html将以翻转转场打开。但是，如果您点击Link 2，page1.html将以无翻转打开。

还有更多...

在该教程中，Link 2使用data-ajax="false"打开page1.html。这将从 DOM 中清除main.html。返回到main.html将把main.html重新加载到 DOM 中，但不会触发mobileinit事件。这将导致Link 1在打开page1.html时不使用翻转转场。为了解决这个问题，在page1.html中添加data-ajax="false"属性以返回链接。这将重新加载main.html到全新的 DOM 中，并触发mobileinit事件。现在，通过两个链接从main.html到page1.html的移动可以顺利进行任意次数。

$.mobile.ignoreContentEnabled 配置

当设置$.mobile.ignoreContentEnabled=true配置时，jqmHijackable()方法只能工作。访问每个元素的父节点并检查data-ajax值，任何具有false设置的父节点及其子元素将从过滤集中删除。

注意

即使对一小部分元素使用jqmHijackable()也很昂贵，因为要检查所有父元素的data-ajax值。

参见

使用 jqmEnhanceable()教程

使用$.mobile.base

$.mobile.base对象提供对原始文档基础的引用。可以使用set()方法在基础对象上设置自定义值。可以使用reset()方法恢复原始值。本教程展示了如何使用这些实用方法。

准备工作

从code/09/base源文件夹中复制此教程的完整代码。可以通过以下网址启动此代码：http://localhost:8080/09/base/main.html。

如何做...

使用以下代码片段在main.html中创建两个按钮：

<div id="content" data-role="content">
  <div id="dispdiv"></div>
  <button id="changebtn">Set Document Base</button>
  <button id="resetbtn">Reset Document Base</button>
</div>

添加以下脚本以显示文档基础对象的各个值：

function disp() {
 var str = "<p>Original Document Base: " + $.mobile.getDocumentBase()
    + "</p>" + "<p>Document Base set to : " 
    + $.mobile.base.element.attr("href");
  $("#dispdiv").html(str);
}

在pageinit事件处理程序中调用$.mobile.base实用方法：

$("#main").live("pageinit", function(event) {
  disp();
  $("#changebtn").bind("click", function(event, ui) {
 $.mobile.base.set("http://localhost:8080/");
    disp();
  });
  $("#resetbtn").bind("click", function(event, ui) {
 $.mobile.base.reset();
    disp();
  });
});

它是如何工作的...

在main.html中添加一个空的div标签，id="dispdiv"，并添加两个按钮(#changebtn和#resetbtn)，如所示。添加一个disp()函数来显示#dispdiv div 容器中的当前文档基础和原始文档基础值。您可以使用$.mobile.getDocumentBase()方法获取原始文档基础。在pageinit事件上调用disp()函数。首次加载时，基础值显示如下：

现在，将#changebtn的点击事件绑定到事件处理程序，并使用$.mobile.base.set()方法将文档基础设置为自定义值。现在单击设置文档基础按钮，自定义基础值将显示，如以下截图所示：

将#resetbtn绑定到事件处理程序，并通过调用$.mobile.base.reset()方法重置文档基础。单击重置文档基础按钮，您将看到基础值已恢复。

解析 URL

$.mobile.path对象提供了您可以使用的属性和方法来处理 URL。本配方向您展示了如何使用$.mobile.path.parseUrl()方法获取 URL 的各个组件。

准备工作

从code/09/parseurl源文件夹复制此配方的完整代码。您可以使用以下 URL 启动此代码：http://localhost:8080/09/parseurl/main.html。

怎么做...

使用空的div标签和一个锚链接创建main.html，如下面的代码片段所示：

<div data-role="content">
  <div id="msgdiv"></div>
 <a href="http://user:pwd@localhost:8080/09/main.html?img=img1.png#imgview"
    data-role="button">Link 1</a>
</div>

将以下脚本添加到<head>部分以在单击时获取锚点按钮的 URL：

$("#main").live("pageinit", function(event) {
 dispPath($.mobile.getDocumentUrl());
  $("a").bind("click", function(event, ui) {
    dispPath($(this).attr("href"));
    event.preventDefault();
    event.stopPropagation();
  });

添加以下方法以显示 URL 的各个组件：

  function dispPath(urlstr) {
 var urlcomp = $.mobile.path.parseUrl(urlstr);
    var str = "<p>href: " + urlcomp.href + "</p>"
      + "<p>hrefNoHash: " + urlcomp.hrefNoHash + "</p>"
      + "<p>hrefNoSearch: " + urlcomp.hrefNoSearch + "</p>"
      + "<p>domain: " + urlcomp.domain + "</p>"
      + "<p>protocol: " + urlcomp.protocol + "</p>"
      + "<p>authority: " + urlcomp.authority + "</p>"
      + "<p>username: " + urlcomp.username + "</p>"
      + "<p>password: " + urlcomp.password + "</p>"
      + "<p>host: " + urlcomp.host + "</p>"
      + "<p>hostname: " + urlcomp.hostname + "</p>"
      + "<p>port: " + urlcomp.port + "</p>"
      + "<p>pathname: " + urlcomp.pathname + "</p>"
      + "<p>directory: " + urlcomp.directory + "</p>"
      + "<p>filename: " + urlcomp.filename + "</p>"
      + "<p>hash: " + urlcomp.hash + "</p>"
      + "<p>search: " + urlcomp.search + "</p>";
    $("#msgdiv").html(str);
  }
});

它是如何工作的...

向main.html添加一个空的div标签，id="msgdiv"。添加一个带有复杂href字符串的链接，如代码所示。创建一个dispPath函数，接受一个 URL 字符串。在这里，调用$.mobile.path.parseUrl方法来获取包含 URL 各个组件的对象(#urlcomp)。在#msgdiv div 容器中显示这些 URL 组件。当应用程序首次加载时，在pageinit事件处理程序中调用dispPath()方法，并将其传递给文档 URL 参数got，通过调用$.mobile.getDocumentUrl()方法。首次加载时显示以下截图：

接下来，为锚链接的click事件添加一个事件处理程序。调用dispPath()函数，并将href属性作为参数传递给它。通过在锚对象上调用 jQuery 的attr("href")方法来获取href属性。最后，调用event.preventDefault()和event.stopPropagation()方法来阻止点击事件的默认操作。现在，当你点击Link 1时，复杂href属性的 URL 组件将显示如下：

还有更多...

$.mobile.parseUrl()方法返回一个包含各种 URL 组件的字符串值的对象，如下所示；当特定的 URL 组件未被使用时，存储空字符串：

href：这是被解析的原始 URL
hrefNoHash：这是没有哈希组件的href属性
hrefNoSearch：这是没有查询字符串和哈希的href属性
domain：这包含协议和主机部分
protocol：这是协议（包括:字符）
authority：这包含用户名、密码和主机部分
username：这是用户名
password：这是密码
host：这是主机和端口
hostname：这是主机名
port：这是端口（如果协议使用其默认端口，则可能为空）
pathname：这是所引用文件或目录的路径
directory：这是不带文件名的路径名的目录部分
filename：这是不带目录的路径名的文件名部分
hash：这是哈希组件（包括#字符）
search：这是查询组件（包括?字符）

另请参阅

使用$.mobile.path 实用方法教程

使用`$.mobile.path`实用方法

本教程向你展示如何在你的应用程序中使用$.mobile.path对象提供的实用方法。

准备工作

从code/09/path源文件夹中复制本教程的完整代码。你可以使用 URLhttp://localhost:8080/09/path/main.html来启动此代码。

如何操作...

使用以下代码片段在main.html页面上创建四个锚链接：

<div data-role="content">
  <div id="msgdiv"></div>
  <a href="http://localhost:8080/09/base/main.html"
    data-role="button">
    1: http://localhost:8080/09/base/main.html
  </a>
  <a href="http://localhost:8080/09/base/" data-
    role="button">
    2: http://localhost:8080/09/base/
  </a>
  <a href="page1.html" data-role="button">
    3: page1.html
  </a>
  <a href="../" data-role="button">4: ../</a>
</div>

在<head>部分添加以下脚本以获取点击链接的 URL。

$("#main").live("pageinit", function(event) {
 var docurl = $.mobile.getDocumentUrl();
  $("a").bind("click", function(event, ui) {
    dispPath($(this).attr("href"));
    event.preventDefault();
    event.stopPropagation();
  });

添加disppath()函数以显示$.mobile.path实用方法的输出：

function dispPath(urlstr) {
  var urlcomp = $.mobile.path.parseUrl(urlstr);
  var str = "<p>Base: " + docurl + "</p>" 
    + "<p>Page: " + urlcomp.href + "</p>"
    + "<p>Same Domain: " + $.mobile.path.isSameDomain(
    docurl, urlcomp) + "</p>"
    + "<p>is Absolute: "
    + $.mobile.path.isAbsoluteUrl(urlcomp) + "</p>"
    + "<p>is Relative: "
    + $.mobile.path.isRelativeUrl(urlcomp) + "</p>";
 if ($.mobile.path.isRelativeUrl(urlcomp)) {
      str += "<p>Make Absolute Path: " 
          + $.mobile.path.makePathAbsolute(urlcomp.href, 
            $.mobile.path.parseUrl(docurl).pathname) + "</p>"
          + "<p>Make Absolute Url: " 
          + $.mobile.path.makeUrlAbsolute(urlcomp.href, 
          docurl) + "</p>"
    }
    $("#msgdiv").html(str);
  }
});

工作原理...

在main.html中添加一个带有id="msgdiv"的空 div 标签。添加四个不同 URL 的链接，如代码所示。在<head>部分添加脚本，以在pageinit事件处理程序中使用$.mobile.getDocumentUrl()方法获取页面的原始文档 URL（#docurl）。使用此 URL 作为本教程中的比较参考点。

接下来，为四个锚链接的click事件添加事件处理程序。调用dispPath()函数，并将link的 href 属性作为参数传递给它。你可以通过调用锚对象上的 jQueryattr("href")方法来获取href属性。还要在此事件处理程序中调用event.preventDefault()和event.stopPropagation()方法，以防止click事件上的任何进一步操作。

在dispPath函数中，调用$.mobile.path.parseUrl方法来获取传入 URL 的href组件。现在，调用各种$.mobile.path实用方法，并在代码中显示它们的输出在#msgdiv div 容器中。使用isRelativeUrl()方法检查传入的 URL 是否是相对的。使用makePathAbsolute()和makeUrlAbsolute()方法将其转换为绝对值。原始文档 URL 用作这些转换的参考。

页面加载时，你将看到四个链接按钮。点击第一个链接http://localhost:8080/09/path/main.html，将显示类似以下截图的输出。该 URL 与参考 URL 处于同一域中，并且该 URL 也是绝对的。

第二个链接，http://localhost:8080/09/base/，指向一个文件夹。见下输出；域名相同且 URL 为绝对：

第三个链接，page1.html，是一个相对 URL。使用参考 URL 计算并显示绝对路径和绝对 URL，如下截图所示；这里的Same Domain值为false。

最后一个链接指向父目录，../，再次是一个相对 URL。使用参考 URL 计算绝对路径和 URL，并如下截图所示显示；Same Domain值再次为false：

还有更多...

此配方中使用的$.mobile.path实用方法如下：

isAbsoluteUrl：检查给定的 URL 是否为绝对
isRelativeUrl：检查给定的 URL 是否为相对的
makePathAbsolute：将相对路径转换为绝对路径；该方法使用参考路径参数进行转换
makeUrlAbsolute：将相对 URL 转换为绝对 URL；该方法使用参考 URL 参数进行转换
isSameDomain：检查两个 URL 是否属于同一个域

另请参阅

解析 URL配方

使用静默滚动

你可以使用$.mobile.silentScroll方法滚动到页面上的任何垂直位置，而不触发滚动事件监听器。此配方向你展示了如何使用静默滚动。

准备工作

从code/09/silentscroll源文件夹中复制此配方的完整代码。你可以使用 URLhttp://localhost:8080/09/silentscroll/main.html启动此代码。

如何做...

创建带有空的 div 标签和两个按钮的 main.html，这些按钮将用于滚动到页面的顶部和底部：

<div data-role="content">
  <button id="bottombtn">Page Bottom</button>
  <div id="dispdiv"></div>
  <button id="topbtn">Page Top</button>
</div>

在 <head> 部分添加以下脚本以创建一个长度较长的页面：

$("#main").live("pageinit", function(event) {
  var str="";
  for (var i=0; i<100; i++) {
    str += i + "<br/>";
  }
  $("#dispdiv").html(str);

现在，根据点击的按钮，滚动到页面的顶部或底部：

  $("#topbtn").bind("click", function(event, ui) {
 $.mobile.silentScroll($.mobile.defaultHomeScroll); 
  });
  $("#bottombtn").bind("click", function(event, ui) {
 $.mobile.silentScroll(2000);
  });
});

它的工作原理...

将两个 ID 分别为 bottombtn 和 topbtn 的按钮添加到 main.html。创建一个空的带有 id="dispdiv" 的 div 标签，并用一些长度较长的内容填充它。这里，使用 pageinit 事件上的脚本在循环中添加 100 行文本到 #dispdiv。页面最初显示如下：

将 #bottombtn 按钮的 click 事件绑定到调用 $.mobile.silentScroll，并将一个大值（此处为 2000px）作为 Y 参数。现在，当您点击 页面底部 按钮时，页面将滚动到 Y 位置（2000px），该位置位于文档底部，如下面的屏幕截图所示：

接下来，绑定 #topbtn 按钮的 click 事件，并将 $.mobile.defaultHomeScroll 属性作为参数传递给 $.mobile.silentScroll。现在，点击 页面顶部 按钮，页面将滚动回顶部。

还有更多...

silentScroll 方法不会触发滚动事件监听器。添加以下代码以验证点击任何按钮时不显示警报。但是使用滚动条时会显示警报。

$(window).bind("scrollstop", function(event) {
  alert("Scroll event was fired");
});

`$.mobile.defaultHomeScroll` 属性

此示例中使用的 $.mobile.defaultHomeScroll 属性是 jQuery Mobile 框架内部使用的，用于滚动到页面顶部。此值是使用 $.support.scrollTop 属性从浏览器获取的。如果此值不为 0，框架会将其设置为 0。

另请参阅

第八章的 使用滚动事件 示例，事件

第十章：主题框架

在本章中，我们将涵盖以下配方：

为嵌套列表设置主题
使用自定义背景
使用自定义字体
设置角落样式
覆盖全局活动状态主题
覆盖现有的颜色板
使用 ThemeRoller 工具创建一个颜色板

简介

jQuery Mobile 框架提供了一个轻量级的主题系统，支持许多 CSS3 属性，如圆角、阴影和渐变。它还提供了一个精灵中的轻量级图标集，你可以在移动应用中使用（图标精灵在第四章按钮和内容格式化中进行了介绍）。该框架提供了五个默认的颜色板（a到e），并支持多达 26 个颜色板。这些颜色板可以为你的应用提供不同的外观和感觉。

为嵌套列表设置主题

当你为嵌套列表设置不同于页面主题的主题时，列表子页面会与主页面不一致。这在第六章的使用嵌套列表配方中进行了描述，列表视图。这个配方向你展示了如何以一致的方式为嵌套列表设置主题。

准备工作

从code/10/nested-list文件夹中复制此配方的完整代码。你可以使用http://localhost:8080/10/nested-list/main.html网址来运行此代码。

如何做...

创建一个带有嵌套列表的main.html，如下所示：

<div id='main' data-role='page' data-theme='a'>
  <div data-role='header' data-theme='a'>
    <h1>Movies</h1>
  </div>
  <div data-role='content'>
    <ul data-role='listview' data-header-theme='a' data-
      theme='b' data-inset='true'>
      <li><a href='#'>Director 1</a>
        <ul data-role='listview' data-inset='true'>
          <li><a href='#'>Movie 1</a></li>
          <li><a href='#'>Movie 2</a></li>
          <li><a href='#'>Movie 3</a></li>
        </ul>
      </li>
 <li><a href='#'>Director 2</a>
 <ul data-theme='a' data-role='listview' data-
 inset='true'>
 <li data-theme='b'><a href='#'>Movie A</a></li>
          <li data-theme='b'><a href='#'>Movie B</a></li>
          <li data-theme='b'><a href='#'>Movie C</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

工作原理...

在main.html中，添加具有data-theme='a'的#main页面，以赋予它黑色主题。在页面内容中添加一个蓝色的列表视图，使用data-theme='b'。设置头部为黑色，并使用data-header-theme='a'。在列表中添加两个项目导演 1和导演 2。列表现在将如下图所示：

在这两个列表项中添加嵌套列表。第一个嵌套列表不指定任何其他主题属性。当你点击第一个列表项时，将显示导演 1 的子页面。你会注意到子页面的背景是data-theme='b'，与主页面不一致，如下截图所示：

现在，在第二个嵌套列表上设置data-theme='a'。为每个嵌套列表项添加data-theme='b'属性。这将创建具有黑色背景的子页面。嵌套列表项会得到蓝色。子页面如下图所示；现在与主页一致：

另请参阅

在第六章的列表视图，使用嵌套列表配方

使用自定义背景

这个配方向你展示了如何在你的应用中使用自定义背景。

准备工作

从code/10/custom-background源文件夹复制此配方的完整代码。您可以使用以下 URL 启动此代码：http://localhost:8080/10/custom-background/main.html。

如何做...

创建main.html并在<head>部分定义orangebar和orangebody类，如下所示：

<style>
 .orangebar {
    border: 1px solid #e3b264;
    background: #f7e0bb;
    color: #000;
    text-shadow: 0 1px 0 #bfbfbf;
    background-image: -webkit-gradient(linear, left top, 
      left bottom,
      from( #f7e0bb ), to( #f7bd5e ));
    background-image: -webkit-linear-gradient( #f7e0bb , 
      #f7bd5e );
    background-image: -moz-linear-gradient( #f7e0bb , 
      #f7bd5e );
    background-image: -ms-linear-gradient( #f7e0bb , 
      #f7bd5e );
    background-image: -o-linear-gradient( #f7e0bb , 
      #f7bd5e );
    background-image: linear-gradient( #f7e0bb , #f7bd5e );
  }
 .orangebody {
    border: 1px solid #e3b264;
    background: #f4ffde;
    color: #000;
    text-shadow: 0 1px 0 #bfbfbf; 
    background-image: -webkit-gradient(linear, left top, 
      left bottom,
      from( #fef9f1 ), to( #f2d5a6 ));
    background-image: -webkit-linear-gradient( #fef9f1 , 
      #f2d5a6 );
    background-image: -moz-linear-gradient( #fef9f1 , 
      #f2d5a6 );
    background-image: -ms-linear-gradient( #fef9f1 , 
      #f2d5a6 );
    background-image: -o-linear-gradient( #fef9f1 , 
      #f2d5a6 );
    background-image: linear-gradient( #fef9f1 , #f2d5a6 );
  }
</style>

添加以下内容的#main页面：

<div id='main' data-role='page' class='orangebody'>
 <div data-role='header' class='orangebar'>
    <h1>Orange Background</h1>
  </div>
  <div data-role='content'>
    <p>Page Content</p>
  </div>
</div>

它是如何工作的...

在main.html中，在<style>标签中定义orangebar和orangebody类。定义border、background和background-image CSS 属性的值。为background-image属性指定带有多个供应商特定值的线性渐变。创建#main页面并样式化页面以使用orangebody类。将标题样式化为使用orangebar类。页面现在显示为橙色背景，如下面的屏幕截图所示：

还有更多...

此配方展示了如何快速更改页面及其标题的背景。但如果您向此页面添加按钮或任何控件，控件将使用默认主题，看起来格格不入。您将不得不为控件设置与页面相匹配的主题。您可以使用 jQuery Mobile 的ThemeRoller工具创建主题或修改现有主题，该工具位于www.jquerymobile.com/themeroller。

注意

最好使用单独的 CSS 文件存储样式信息。这样可以将样式与 HTML 或文档结构分开，使得以后更容易维护和升级样式。

另请参阅

主题化活动状态和使用 ThemeRoller 工具创建色板的配方
第二章中的使用 CSS 创建弹跳页面转换配方，页面和对话框：此配方提供了有关供应商前缀的详细信息

使用自定义字体

jQuery Mobile 框架默认使用 Helvetica、Arial 和 Sans Serif 字体。此配方展示了如何在您的应用程序中包含和使用其他字体。

准备工作

从code/10/custom-font源文件夹复制此配方的完整代码。本配方中使用的Komika TrueType Font可在code/resources/font文件夹中找到。使用的Syncopate Web Font来自Google Web Fonts网站。您可以使用以下 URL 启动此代码：http://localhost:8080/10/custom-font/main.html。

如何做...

创建main.html，并添加到 Syncopate Google web font 样式表的链接，如下所示：

<link rel='stylesheet' href='http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css' />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Syncopa
te:400,700'/>

在<style>标签中定义样式类以使用两种自定义字体：

<style>
  h1 {font-family: 'Syncopate', sans-serif; }
  .divstyle {font-family: 'Syncopate'; font-weight: 400; }  
 @font-face { 
 font-family: KomikaDisplay; 
    src: url('../../resources/font/Komika_display.ttf'); 
  }
 .komikafont { font-family: KomikaDi
splay; }
</style>

使用以下方式添加#main页面容器，并使用自定义字体：

<div id='main' data-role='page' data-theme='a'>
  <div data-role='header'>
    <h1>Custom Font</h1>
  </div>
  <div data-role='content'>
    <p>In Default font</p>
 <div class='komikafont'><p>In Komika Display Font</p></div>
 <div class='divstyle'><p>In Syncopate Font</p></div>
  </div>
</div>

它是如何工作的...

创建main.html，并在包含 jQuery Mobile 样式表之后，从 Google Web 字体网站添加到 Syncopate 样式表的链接，如示所示。使用font-family CSS 属性定义标题h1使用 Syncopate 和sans-serif字体。创建一个名为divstyle的 CSS 类，并将font-family属性设置为带有400的Syncopate的font-weight。要包含 Komika Display TrueType 字体，请使用 CSS @font-face 功能定义字体系列。将其源指向.ttf文件的位置。最后，定义一个komikafont类，并将其font-family设置为KomikaDisplay。

现在，创建带有标题h1的#main页面。标题现在将使用 Syncopate Web 字体。向页面内容添加一个带有class='komikafont'的div标记，此div标记中的文本将使用 Komika Display 字体。最后，添加另一个带有class='divstyle'的div标记，此标记将使用带有400字体权重的 Syncopate 字体。屏幕将显示如下：

还有更多...

本配方向您展示了如何为特定元素使用自定义字体。要在整个应用程序中全局更改字体，请使用位于www.jquerymobile.com/themeroller的 jQuery MobileThemeRoller工具。以下屏幕截图显示了全局设置为Verdana字体：

使用 TrueType 字体

TrueType（TTF）或OpenType字体在大多数现代浏览器中都受支持。如果您的目标是旧浏览器或大多数旧设备和功能手机，则需要注意，因为这些字体可能不受@font-face支持。您可以参考www.caniuse.com/#search=ttf来获取各种浏览器中对 TTF 支持的最新状态。您会注意到旧版本的 iOS 不支持 TTF。您可能需要改用 SVG 字体。

下载字体

您可以访问并使用 Google Web 字体页面上的其他 Web 字体，网址为www.google.com/webfonts。所有字体都是开源的，可以自由使用。由 Apostrophic Labs 设计的 Komika Display 字体可在 Font Squirrel 网页上找到(www.fontsquirrel.com/fonts/Komika-Display)。Font Squirrel 网站提供大量可用的字体，全部为免费软件。

另请参阅

使用 ThemeRoller 工具创建调色板的配方

角的样式

本配方向您展示了如何使用 jQuery Mobile 中提供的不同角样式。

准备工作

从code/10/corner-styles源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/10/corner-styles/main.html启动此代码。

如何操作...

创建main.html，并将以下<style>标签添加到其<head>部分：

<style>
  .mydiv { border: 2px solid #000; margin: 5px; text-align: center; }
</style>

创建#main页面，其中包含四个div元素，布局如下：

<div id='main' data-role='page' data-theme='a'>
 <div data-role='header' data-theme='e'  class='ui-
 corner-top' style='margin-top: 10px'>
    <h1>Header Text</h1>
  </div>
  <div id='content' data-theme='e' data-role='content'>
    <fieldset data-role='controlgroup' data-
      type='horizontal' class='ui-grid-a'>
      <div class='ui-block-a ui-corner-tl mydiv' 
        style='width: 45%'><p>Top Left</p></div>
      <div class='ui-block-b ui-corner-tr mydiv' 
        style='width: 45%'><p>Top Right</p></div>
      <div class='ui-block-a ui-corner-bl mydiv' 
        style='width: 45%'><p>Bottom Left</p></div>
      <div class='ui-block-b ui-corner-br mydiv' 
        style='width: 45%'><p>Bottom Right</p></div>
    </fieldset>
  </div>
 <div data-role='footer' class='ui-corner-bottom' data-
 theme='e'>
    <h4>Footer Text</h4>
  </div>
</div>

工作原理...

在main.html中，按照示例定义.mydiv类别，并设置边框、边距以及文本居中对齐。创建#main页面，并使用class='ui-corner-top'样式为标题添加角。这将在标题的顶部添加角。使用class='ui-corner-bottom'定义页脚，以在页脚的底部添加角。不要为内容div添加任何样式，因此默认情况下使用class='ui-corner-none'样式。现在，使用两列布局网格(grid-a)在两行中添加四个div标签。使用mydiv类别为这些div标签设置样式。同时，为这些div标签添加不同的角样式(ui-corner-tl、ui-corner-tr、ui-corner-bl和ui-corner-br)。四个div标签现在的样式如下所示：

还有更多...

你可以通过www.jquerymobile.com/themeroller上的 jQuery Mobile ThemeRoller工具全局设置角半径。

另请参阅

使用 ThemeRoller 工具创建色板示例
第五章中的将单选按钮分组在网格中示例，表单

覆盖全局活动状态主题

jQuery Mobile 框架使用明亮的蓝色来指示按钮和其他控件的活动状态。这个活动状态主题对所有默认色板都是一致的，并且无法通过标记覆盖。本示例演示了如何覆盖活动状态主题。

准备工作

从code/10/active-state源文件夹中复制此示例的完整代码。你可以使用以下网址启动此代码：http://localhost:8080/10/active-state/main.html。

如何实现...

创建active-state.css样式表以设置活动状态的样式，如下所示：

.ui-btn-active {
  border: 1px solid #137000;
  background: #93ff86;
  font-weight: bold;
  color: #000;
  text-shadow: 0 1px 1px #eee;
  cursor: pointer;
  text-decoration: none;
  background-image: -webkit-gradient(linear, left top, 
    left bottom, from( #a1ff93), to( #14b800));
  background-image: -webkit-linear-gradient( #a1ff93, 
    #14b800);
  background-image: -moz-linear-gradient( #a1ff93, 
    #14b800);
  background-image: -ms-linear-gradient( #a1ff93, 
    #14b800);
  background-image: -o-linear-gradient( #a1ff93, 
    #14b800);
  background-image: linear-gradient( #a1ff93, #14b800);
  font-family: Helvetica, Arial, sans-serif;
}

指定焦点事件的样式：

.ui-focus, .ui-btn:focus {
  -moz-box-shadow: 0px 0px 12px #37bf37;
  -webkit-box-shadow: 0px 0px 12px #37bf37;
  box-shadow: 0px 0px 12px #37bf37;
}

`指定复选框和单选按钮控件的开启状态样式：

.ui-checkbox-on .ui-icon, .ui-radio-on .ui-icon {
  background-color: #50cf44;
}

在main.html中包含上述样式表：

<link rel='stylesheet' href='http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css' />
<link rel='stylesheet' href='./active-state.css' />

现在，在#main页面中创建带有navbar控件的标题：

<div id='main' data-role='page' data-theme='a'>
  <div data-role='header'>
    <h1>Active State</h1>
    <div data-role='navbar'>
      <ul>
        <li><a href='#'>Nav1</a></li>
 <li><a href='#' class='ui-btn-
 active'>Nav2</a></li>
        <li><a href='#'>Nav3</a></li>
      </ul>
    </div>
  </div>

最后，根据以下方式添加页面内容：水平复选框、垂直复选框和滑块：

  <div data-role='content'>
    <div data-role='fieldcontain'>
      <fieldset data-role='controlgroup' data-
        type='horizontal'>
        <legend>CheckBox</legend>
        <input type='checkbox' name='hchkbox' 
          id='hchkbox'/>
        <label for='hchkbox'>Horizontal</label>
      </fieldset>
    </div>
    <div data-role='fieldcontain'>
      <fieldset data-role='controlgroup'>
        <legend>CheckBox</legend>
        <input type='checkbox' name='vchkbox' 
          id='vchkbox'/>
        <label for='vchkbox'>Vertical</label>
      </fieldset>
    </div>    
    <div data-role='fieldcontain'>
      <label for='sldr'>Input slider:</label>
      <input type='range' name='sldr' id='sldr' 
        value='50' min='0' max='100' data-
        highlight='true' />
    </div>
  </div>
</div>

工作原理...

创建active-state.css样式表以将样式信息与 HTML 文件分离。默认情况下，复选框和单选按钮控件的活动状态、焦点事件和开启状态样式都使用明亮的蓝色主题。你可以在 CSS 文件中覆盖它们，如代码所示。首先，覆盖.ui-btn-active类，并为border、background、color和background-image CSS 属性指定你的设置。然后，覆盖.ui-focus和.ui-btn:focus类，并为box-shadow指定颜色.ui-checkbox-on和.ui-radio-on样式，如代码所示。`

创建 main.html，并在标题中添加一个 navbar 控件。在 navbar 中的第二个链接上添加 ui-btn-active 类。当页面加载时，你将看到第二个链接上设置了活动状态。接下来，添加水平和垂直组合的复选框控件。最后，向页面添加一个输入滑块。现在，页面加载如下截图所示，将默认的鲜蓝色活动状态主题替换为荧光绿色主题：

还有更多...

你也可以使用位于 www.jquerymobile.com/themeroller 的 jQuery Mobile ThemeRoller 工具全局设置活动状态主题。

另请参阅

使用 ThemeRoller 工具创建色板 配方
在第二章中的 使用 CSS 创建弹跳页面转换 配方，页面和对话框*：该配方提供了有关供应商前缀的注释
在第七章中的 配置活动类 配方，配置*

`# 覆盖现有色板

jQuery Mobile 框架使用 ui-btn-hover 类来设置 按钮悬停 事件的样式。此配方向你展示了如何覆盖现有色板的按钮悬停事件样式。

准备工作

从 code/10/button-hover 源文件夹复制此配方的完整代码。你可以使用以下 URL 启动此代码：http://localhost:8080/10/button-hover/main.html。

如何实现...

创建 main.html，并在 <head> 部分添加以下 <style> 标签：

<link rel='stylesheet' href=
  'http://code.jquery.com/mobile/1.1.1/jquery.mobile-
  1.1.1.min.css' />
<style>
 .ui-btn-hover-a {
    border: 1px solid #115e00;
    background: #51b54a;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 1px #197d19;
    background-image: -webkit-gradient(linear, left top, 
      left bottom, from( #7ad66f), to( #41a343));
    background-image: -webkit-linear-gradient( #7ad66f, 
      #41a343);
    background-image: -moz-linear-gradient( #7ad66f, 
      #41a343);
    background-image: -ms-linear-gradient( #7ad66f, 
      #41a343);
    background-image: -o-linear-gradient( #7ad66f, 
      #41a343);
    background-image: linear-gradient( #7ad66f, #41a343);  }
</style>

创建 #main 页面并向页面内容中添加一个按钮：
```
  <a href='#' data-role='button'>button</a>
```

工作原理...

在 main.html 中，按照以下代码的方式链接 jQuery Mobile 样式表后，定义 .ui-btn-hover-a 类的覆盖。指定 border、background、color、text-shadow 和 background-image CSS 属性。创建 #main 页面并设置 data-theme='a'，然后在页面内容中添加一个按钮。加载页面，在按钮悬停时，你会看到按钮的颜色变为鲜绿色，而不是默认的悬停样式，如下截图所示：

还有更多...

你也可以使用位于 www.jquerymobile.com/themeroller 的 jQuery Mobile ThemeRoller 工具为 色板 A 设置按钮悬停样式。

buttonMarkup.hoverDelay 配置

你可以通过在 mobileinit 上设置 buttonMarkup.hoverDelay（默认为 200 ms）配置来配置按钮悬停的延迟。但要注意，使用值太大或太小会影响用户体验。你可以使用以下代码来配置此属性：

$(document).bind('mobileinit', function() {
  $.mobile.buttonMarkup.hoverDelay = 500;
});

另请参阅

使用 ThemeRoller 工具创建色板 配方
在第二章的CSS 创建弹跳页面过渡配方中，页面和对话框：这个配方提供了关于供应商前缀的说明

使用 ThemeRoller 工具创建一个颜色样本

此配方向你展示了如何使用 jQueryMobile ThemeRoller web 工具创建一个颜色样本。

准备就绪

此配方中的代码是使用www.jquerymobile.com/themeroller的 jQueryMobile ThemeRoller web 工具创建的。代码位于code/10/myTheme源文件夹中。你可以通过 URL http://localhost:8080/10/myTheme/index.html启动此代码。

如何操作...

使用 jQueryMobile ThemeRoller 工具生成myTheme.css文件。它将包含在生成的index.html文件中，如下所示：

<link rel='stylesheet' href='themes/myTheme.min.css' />
<link rel="stylesheet" 
 href="http://code.jquery.com/mobile
 /1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<script src="img/jquery-1.7.1.min.js">
</script>
<script src="http://code.jquery.com/mobile/
  1.1.1/jquery.mobile-1.1.1.min.js"></script>

在index.html中的<body>内容如下生成：

<div data-role="page" data-theme="a">
  <div data-role="header" data-position="inline">
    <h1>It Worked!</h1>
  </div>
  <div data-role="content" data-theme="a">
    <p>
      Your theme was successfully downloaded. You can use 
        this page as a reference for how to link it up!
    </p>
    <pre> .... </pre>
    <p>
      This is content color swatch "A" and a preview of a 
        <a href="#" class="ui-link">link</a>.
    </p>
    <label for="slider1">Input slider:</label>
    <input type="range" name="slider1" id="slider1" 
      value="50" min="0" max="100" data-theme="a" />
    <fieldset data-role="controlgroup"  data-
      type="horizontal" data-role="fieldcontain">
      <legend>Cache settings:</legend>
      <input type="radio" name="radio-choice-a1" id=
        "radio-choice-a1" value="on" checked="checked" />
      <label for="radio-choice-a1">On</label>
      <input type="radio" name="radio-choice-a1" id=
        "radio-choice-b1" value="off"  />
      <label for="radio-choice-b1">Off</label>
    </fieldset>
  </div>
</div>

它的运作原理...

启动 jQuery Mobile ThemeRoller web 工具。你会在称为检查器窗格的左窗格中看到可用的颜色样本。样本始终以A开头，并且你可以添加、复制或删除样本。其他样本会立即按字母顺序排序。你最多可以创建 26 个样本（从A到Z）。你可以直接在检查器窗格中修改 CSS 属性。

你也可以使用屏幕顶部的Adobe Kuler颜色样本栏来代替手动输入颜色。直接将你选择的颜色拖放到预览屏幕中的组件上。组件立即被新颜色更新。

你可以点击 Kuler 样本链接，访问在线提供的多种现成的颜色组合。

现在，在屏幕组件上拖放你选择的颜色。你会看到屏幕预览（如下图所示）立即反映出主题变化。你还可以在这里设置活动状态的主题。

一旦主题准备好，你可以点击屏幕顶部的下载按钮来下载它。输入一个名称并下载压缩文件。压缩文件包含所需的图标、CSS 文件，还有一个名为index.html的示例文件。提取这些文件并打开index.html文件时，新主题将显示出来。

注意

生成的index.html文件中没有使用jquery.mobile.css文件。相反，它包含了指向myTheme.css（用于自定义主题）和jquery.mobile.structure.css（与结构相关的 CSS 属性）的链接。将可主题化的属性分开可以更容易地维护、升级，并分享你的主题。

还有更多...

你可以使用 ThemeRoller 工具顶部的 打开/关闭检查器 按钮来同步预览窗格和 检查器 窗格。将鼠标悬停在预览窗格中的任何控件上，该控件将以蓝色边框突出显示。点击控件以在 检查器 窗格中打开其 CSS 设置。这在开发主题时非常方便。

导入和升级主题

你可以将现有的 CSS 主题导入到 ThemeRoller 工具中，并扩展它们以创建新的主题。你也可以使用 ThemeRoller 将旧版本的 jQuery Mobile 主题升级到最新的 v1.1.1。点击 ThemeRoller 屏幕顶部的导入或升级按钮以打开 导入主题 对话框。

你可以复制粘贴现有的主题，然后点击导入按钮。新升级的主题已准备好，并加载到工具中。你也可以通过点击 导入默认主题 选项来加载 jQuery Mobile 框架提供的默认主题。这会将五个默认的样式加载到 ThemeRoller 中。现在你可以将这一套作为创建新主题的起点。

分享主题

ThemeRoller 工具还提供了一个很酷的功能，可以与他人分享你的工作。点击工具顶部的 分享主题链接 按钮即可获取链接，你可以与他人分享该链接。拥有此链接的任何人都可以直接访问、使用或复制你的主题进行工作。

第十一章：HTML5 和 jQuery Mobile

在本章中，我们将涵盖以下内容：

使用新的 HTML5 语义
提高速度并使应用程序脱机运行
使用 Web Workers 进行密集任务
使用本地和会话存储
用 Canvas 进行 2D 绘图
在 SVG 图像上应用高斯模糊
使用地理位置 API 跟踪你的位置
使用<audio>元素播放音乐
使用<video>元素观看视频

介绍

HTML5 引入了新的语义和许多新的酷功能，如应用程序缓存，2D 画布，地理位置，本地和会话存储，Web Workers 以及对音频和视频的支持。jQuery Mobile 框架构建在 HTML5 和 CSS3 上，并提供对这些新的语义和新功能的出色支持。本章介绍了一些建议，你可以在你的 jQuery Mobile 应用中使用这些功能。

注

有许多关于学习 HTML5 的网络资源。举几个例子，你可以在 HTML5 Rocks (www.html5rocks.com/en), HTML5 Demos (www.html5demos.com), 和 Mozilla Developer Network (developer.mozilla.org/en-US/docs/HTML/HTML5)阅读更多信息。

各种浏览器和平台对 HTML5 元素和功能的支持程度各不相同。在使用特定功能时，你必须小心，并确保它在你的目标平台上可以运行。这种支持程度每一天都在不断提高。

注

www.caniuse.com提供了关于各种 HTML5 功能的平台支持更新状态的良好参考。

使用新的 HTML5 语义

HTML5 定义了新的语义，以更好地将 HTML 文档组织为更加合乎逻辑的部分。这个建议向你展示如何使用新的 HTML5 语义来定义你的 jQuery Mobile 应用。本建议涵盖了以下 HTML5 元素：

section：这定义了文档中的部分。页眉，页脚和页面内容都是部分。
header：这定义了文档的页眉。
footer：这定义了文档的页脚。
aside：这定义了与文档主要内容相关的附加内容，通常放置在侧边栏中。
article：这定义了与文档相关的内容，但也可以独立存在并且可以独立分发。
nav：这是提供导航链接并且可以包含一个或多个锚链接的部分。

准备工作

从code/11/semantics文件夹复制此示例的完整代码。你可以使用以下 URL 启动此代码：http://localhost:8080/11/semantics/main.html。

如何做...

需要遵循的步骤如下：

创建main.html，在页面中使用新的 HTML5 语义；不要在这里使用<div>标签：

<section id='main' data-role='page' data-theme='a'>
 <header data-role='header' data-theme='b'>
    <h1>New HTML5 Tags</h1>
  </header>
 <section data-role='content'>
    Main content goes here
 <aside style='border: 2px; border-style: solid; 
 border-color: #666'> 
      <h3>Aside</h3>
      Standalone content but related to main
    </aside>
    <section>
      <h3>Articles</h3>
 <article>
        <h4>Item 1</h4>
        Item 1 description here            
      </article>
      <article>
        <h4>Item 2</h4>
        Item 2 description here           
      </article>
    </section>
  </section>
 <footer data-role='footer' data-theme='b'>
 <nav class='ui-bar' data-theme='d'>
      <a href='#' data-role='button'>Link 1</a> 
      <a href='#' data-role='button' class='ui-btn-
        right'>Link 2</a>          
    </nav>
  </footer>
</section>

它是如何工作的...

创建 main.html，并使用带有 data-role='page' 属性的 <section> 标签将 #main 页面添加到其中。添加带有 data-role='header' 属性的 <header> 标签以创建页面页眉。接下来，添加带有 data-role='content' 属性的 <section> 标签以创建页面内容部分。最后，使用带有 data-role='footer' 属性的 <footer> 标签添加页脚。现在，您已经准备好了具有页眉、内容和页脚的页面。到目前为止，您会注意到还没有使用 <div>。

在页面内容中添加 <aside> 和 <article> 元素，如代码所示。由于有多篇文章，您可以将它们分组在一个 <section> 元素中。最后，在页面页脚添加一个带有两个按钮链接的 <nav> 元素。添加 ui-btn-right 类来将第二个按钮移到屏幕右侧。现在，当您启动应用程序时，将显示以下屏幕：

还有更多...

HTML5 支持许多新元素，例如：

figure: 用于包含图像、照片、图表、插图等。
figcaption: 为 <figure> 定义标题。
hgroup: 用于对一组标题元素（<h1>、<h2>等）进行分组。
mark: 用于突出显示文本。
meter: 用于指定在最小-最大范围内的数值。您还可以指定阈值（低和高）。
progress: 用于指示进度。
time: 用于标记日期/时间值。

关于使用

在 HTML5 之前，<div> 被用作容器来组合元素。但这不是很描述性的。HTML5 文档结构更加描述性和有意义，具有页眉、页脚等。

注意

当使用 HTML5 时，请使用 <div> 来组合不符合任何新 HTML5 元素描述的元素，例如 <section>。

使用
与 jQuery Mobile

在当前市场上可用的多个平台上，对 HTML5 语义的支持各不相同且不断改善。截至 v1.1.1，jQuery Mobile 框架建议使用带有 data-role 属性的 <div> 元素来指定各种页面组件，例如页眉和页脚。这是为了确保与旧版浏览器（如 IE8）的兼容性，同时也支持尽可能多的设备和平台。在不久的将来版本的 jQuery Mobile 中，当对旧版本浏览器的支持被放弃时，这肯定会发生变化。在那之前，请根据您的目标用户使用新的 HTML5 元素。

提高速度并使您的应用脱机化

HTML5 引入了一个称为 Application Cache 的新功能，允许你的 Web 应用将网络资源缓存在本地。你还可以比以前的浏览器缓存技术更好地控制和配置这个缓存。有了 Application Cache，你的移动应用即使在网络覆盖不好或没有网络的情况下也能更好地运行。你的应用会更快，因为它可以在本地找到许多资源，而不是从服务器获取它们。这也有助于用户降低服务提供商可能收取的数据传输费用。

这个配方向你展示了如何在你的 jQuery Mobile 应用中使用 Application Cache 功能。它还向你展示了如何使用本地存储的 jQuery Mobile 库，而不是从 CDN 获取库文件。

准备工作

从 code/11/appcache 文件夹复制本配方的完整代码。你需要将此代码托管在 Web 服务器上才能查看 Application Cache 的工作原理。sources 文件夹包含一个 nodejs Web 服务器，你可以用来运行此应用程序。你可以使用以下 URL 启动此代码：http://localhost:8080/11/appcache/main.html。

如何操作...

需要遵循的步骤是：

创建 main.html，并在 <html> 标签中指定清单文件：

<!DOCTYPE html>
<html manifest="jqmcookbook.appcache">

在 main.html 页面内容中添加以下三个链接：

<div data-role="content">
  <a href="cached.html" data-role="button">CACHE</a>
  <a href="online.html" data-role="button">FALLBACK</a>
  <a href="network.html" data-role="button">NETWORK</a>
</div>

创建以下 jqmcookbook.appcache 清单文件，并指定要缓存的文件：

CACHE MANIFEST
*# jQuery Mobile*
 *Cookbook Edition 1.0*

*# Cached resources (also caching jQuery Mobile files for* offline access)
CACHE:
main.html
cached.html
http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css
http://code.jquery.com/jquery-1.7.1.min.js
http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js

*# offline.html will be displayed as fall back*
FALLBACK:
online.html offline.html

*# Accessible only when online*
NETWORK:
network.html

创建以下 cached.html 文件，它会被应用程序缓存，并可供离线访问：

<!-- Cached Page : Cached and works offline too -->  
<div id="cached" data-role="page">
  <div data-role="content">
    <h1>
      This page is shown from cache and even works when 
        offline
    </h1>
    <a href="#" data-role="button" data-rel="back" 
        data-theme="b">Go Back</a>
  </div>
</div>

创建以下 online.html 文件，它不会被缓存，并且每次访问时都会从网络获取：

<!-- Online Page : Shown only when Online -->  
<div id="online" data-role="page">
  <div data-role="content">
    <h1>This page is shown only when online</h1>
    <a href="#" data-role="button" data-rel="back" 
        data-theme="b">Go Back</a>
  </div>     
</div>

创建以下 offline.html 文件，它会被缓存，并在无法访问 online.html 页面时用作回退：

<!-- Offline Page : Shown as a fall back -->  
<div id="offline" data-role="page">
  <div data-role="content">
    <h1>This is a fallback for online.html</h1>
    <a href="#" data-role="button" data-rel="back" 
        data-theme="b">Go Back</a>
  </div>
</div>

最后，创建以下 network.html 文件，它不会被缓存，并且总是从网络获取；它不使用任何回退：

<!-- Network Page : Shown only when online -->
<div id="network" data-role="page">
  <div data-role="content">
    <h1>This is always fetched from the network</h1>
    <a href="#" data-role="button" data-rel="back" 
        data-theme="b">Go Back</a>
  </div>
</div>

工作原理...

创建 main.html，并在其 <html> 标签中指定 jqmcookbook.appcache 作为清单文件。这表示向浏览器指示应该缓存 HTML 文件。它还表示清单文件必须被处理以找到所有要在本地缓存的资源。按照示例添加 cached.html、online.html 和 network.html 页面的三个链接。这些将被用作本配方中将要缓存的资源。

创建带有 CACHE MANIFEST 文本的 jqmcookbook.appcache 清单文件。你可以在清单文件中添加注释，它们以 # 字符开头。现在，将要由你的应用程序缓存的资源添加到清单文件中。每个文件名必须在单独的一行上，并且你可以使用相对或绝对路径。Cache Manifest 文件有三个部分，分别用 CACHE、FALLBACK 和 NETWORK 标头标识。

定义默认的CACHE部分，并列出应该在本地缓存的文件。将main.html和cached.html添加到此部分。当你启动应用程序并点击第一个按钮时，无论设备是在线还是离线，它都会打开cached.html。

注意

图像、图标、样式表、JavaScript 和其他静态文件都是你应该在本地缓存的资源。

缓存文件只有在第一次下载时才会被下载。当应用尝试访问这些文件中的任何一个时，它们总是首先从缓存中获取，或者只有在缓存中不存在时才会从服务器获取。

注意

在应用程序中缓存主 HTML 文件（在其<html>标签中定义了清单）是个不错的做法。

接下来，定义FALLBACK部分，每行定义两个文件名。将online.html指定为第一个文件，然后将offline.html指定为后备。现在，当你点击应用程序中的第二个按钮时，只有在设备在线时才会显示online.html。如果设备离线，那么offline.html将自动从缓存中显示。在这里，第一个文件总是从网络获取，而不会被缓存。

最后，定义NETWORK部分，并将network.html列在其中。使用这部分来定义在您的应用中永远不应该被缓存的文件列表。这些文件总是从网络获取。现在，当你点击第三个按钮时，只有在设备在线时才会显示network.html，如果设备离线，则会显示错误。

还有更多...

你可以使用大多数浏览器提供的开发者/调试工具在浏览器中看到当前缓存的文件列表。以下截图显示了 Chrome 开发者工具中对本文档中main.html文件缓存资源的视图。清单中列出的文件都在Application Cache部分中看到。

缓存大小的限制

浏览器对本地存储的数据量有限制。通常是 5 到 10 MB，需要用户允许超过此限制。一些浏览器，如 Chrome，允许你将此值设置为无限制。因此，小心地缓存文件，并包括你经常访问的资源。还包括那些需要让您的应用离线的资源。

刷新应用程序缓存

每次访问main.html文件时，远程清单文件都会被获取并与本地清单文件进行比较。只有清单文件已更改（这甚至可能只是一个注释），新的清单文件才会被获取。然后缓存将被清除，并且整套缓存文件将从服务器刷新。与此相对的是，即使其他文件没有发生变化，向清单文件中添加一个新文件也会触发完全刷新。

注意

在清单文件的注释中使用版本号是保持缓存文件更新的好方法。

清单文件的 MIME 类型

您应该始终以 MIME 类型为 text/cache-manifest 提供清单文件。您可以将此清单命名为任何内容。您的服务器应该能够识别此 MIME 类型。如果没有，请将此 MIME 类型添加到服务器配置中。本配方所附源代码中附带的 nodejs Web 服务器已经支持 text/cache-manifest MIME 类型。

Ajax 预过滤器解决方案

应用缓存在某些浏览器上无法正常工作，因此在这种情况下需要使用 Ajax 预过滤器的解决方法。在这些浏览器中，成功的 Ajax 调用会在成功时返回 0 HTTP 状态。为了解决这个问题，您应该使用 jQuery Ajax 预过滤器，并将 isLocal 属性设置为 true。有关使用 isLocal 解决方法的详细 GitHub 讨论线程，请参阅 github.com/jquery/jquery-mobile/issues/1579。

另请参阅

为密集任务使用 Web Workers 配方
第二章，页面和对话框，为更快的导航预取页面 和 使用 DOM 缓存以提高性能 配方

为密集任务使用 Web Workers

当运行执行复杂或耗时活动的脚本时，浏览器线程会冻结并且在任务完成前不响应。这可以通过使用 Web Worker 来克服——这是一个在后台独立运行 JavaScript 的线程。浏览器线程不会被阻塞，因此可以继续响应用户操作。本配方向您展示如何使用 Web Workers。

准备就绪

从 code/11/webworkers 文件夹中复制此配方的完整代码。您可以使用以下 URL 启动此代码：http://localhost:8080/11/webworkers/main.html。

如何做...

执行的步骤如下：

创建 main.html，其页面内容包括复选框和滑块：

<div data-role='content'>
  <div id='msgdiv'></div>
  <div data-role='fieldcontain'>
    <input type="range" name="myslider" id="myslider" 
      value='0' min="0" max="100" />
    <label for="myslider">Slide me:</label>
  </div>
  <div data-role='fieldcontain'>
    <input type="checkbox" name="countchk" id="countchk" />
    <label for="countchk">Count with Webworkers</label>        
  </div>
</div>

在复选框被点击时添加以下脚本以触发长时间运行的循环。选中时，循环在 Web worker 中运行，没有 UI 冻结，并且您可以继续使用页面。当复选框未选中时，一切立即冻结，直到循环完成。

$('#main').live('pageinit', function(event) {
  $('#countchk').bind('change', function(event, ui) {
    if($('#countchk').prop("checked")) {
      $('#msgdiv').html('Worker is counting ...');
 var myworker = new Worker('webworker.js');
 myworker.onmessage = function(event) {
      $('#msgdiv').html(event.data);
    }
 myworker.postMessage('start'); 
  } else {
    $('#msgdiv').html('Started Counting ...');        	

    var count = 0;
    for (var i=1; i<=10000000000; i++)
      count++;
      $('#msgdiv').html('Loops : ' + count);                      

    }
  });
});

最后，添加 webworker.js JavaScript 文件来处理循环：

self.onmessage = function(event) {
  var count = 0;
  for (var i=1; i<10000000000; i++)
    count++;
 self.postMessage('Worker Loops : ' + count);
};

工作原理...

创建 main.html，并将一个复选框和一个带有 id='countchk' 的滑块添加到 #main 的内容中。此外，添加一个空的 #msgdiv 属性来显示消息。将复选框的 change 事件绑定到 pageinit 回调中的事件处理程序。

当选中复选框时，在 Web Worker 中触发循环。通过调用 new Worker() 来启动 Web Worker，并将 JavaScript webworker.js 文件的名称传递给它。定义 onmessage 事件处理程序来处理工作器接收到的消息。您可以在 #msgdiv 中显示此消息。最后，通过向其发送 start 消息来调用工作器。这个消息可以是任何东西，必须在工作器中编写代码来处理它。在文件 webworker.js 中，定义 onmessage 回调来处理来自浏览器线程的传入消息。运行循环并向主线程返回相应的消息。

当您启动页面并选择复选框时，循环将在 Web Worker 中启动。您可以使用滑块，即使循环仍在运行，也可以看到页面中的消息被更新：

当复选框未被选中时，循环将在主浏览器线程中运行。现在，在复选框可以反映您的选择之前，整个界面都会冻结，并且只有在循环完成后界面才会响应：

还有更多……

在所有浏览器中可能并不支持 Web Workers。您可以通过调用以下代码来检查应用程序中对 Web Worker 的支持情况，该代码检查 window 对象的 Worker 属性是否存在。如果未定义，则表示不支持该功能。

if (!!window.Worker)
  // Web workers are supported
else
  // Web workers are not supported

使用 Modernizr 检查 Web Worker 的支持

Modernizr（位于 www.modernizr.com）是一个非常受欢迎和方便的库，可用于检测浏览器中对 Web Worker 和其他 HTML5 和 CSS3 功能的支持。它提供 polyfills 或 fallbacks ，以防某个属性在浏览器中不受支持。它使用 MIT 许可证 ，可以自由使用。如果您的浏览器支持 Web Workers，Modernizr.webworkers 属性将被定义和可用。

另请参阅

改进速度并使应用离线 配方

使用本地和会话存储

Cookies 曾是以前用于存储客户端信息的机制。但是一个 cookie 只能存储最多 4 KB 的数据，这些数据将随每个请求发送到服务器。Web Storage 是在 HTML5 中引入的客户端存储标准。它有两种类型：本地存储 和 会话存储 。会话存储中存储的数据在用户会话处于活动状态时可用，并在会话结束后丢失。本地存储中的数据在会话之间持久存在。该配方向您展示如何使用本地存储和会话存储。

准备工作

从 code/11/storage 文件夹复制此配方的全部代码。您可以使用以下 URL 启动此代码：http://localhost:8080/11/storage/main.html。

如何做到……

应遵循的步骤为：

创建带有三个文本字段和一个保存按钮的 main.html：

<div data-role='content'>
  <div data-role='fieldcontain'>
    <label for='nostore'>No Storage</label>
    <input type="text" id="nostore" name="nostore" 
      autofocus placeholder="Enter text" value="" />
  </div>
  <div data-role='fieldcontain'>
    <label for='sessionstore'>Session Storage</label>
    <input type="text" id="sessionstore" 
      name="sessionstore" placeholder="Enter text" 
      value="" />
  </div>
  <div data-role='fieldcontain'>
    <label for='localstore'>Local Storage</label>
    <input type="text" id="localstore" name="localstore" 
      placeholder="Enter text" value="" />
  </div>
  <button id='savebtn'>Save</button>
</div>

将以下脚本添加到点击保存按钮以保持文本字段内容的持久性：

$('#main').live('pageinit', function(event) {
  $('#savebtn').bind('click', function(event, ui) {
 window.localStorage.setItem('localval', $('#localstore').val());
 window.sessionStorage.setItem('sessionval', $('#sessionstore').val());
  });
});

最后，在显示页面时恢复持久化的值：

$('#main').live('pageshow', function(event, data) {
 $('#localstore').val(window.localStorage.getItem('localval'));
 $('#sessionstore').val(window.sessionStorage.getItem('sessionval')); 
});

刷新页面，然后稍后关闭并重新打开页面，查看这些持续存在的值在单个会话和多个会话中的行为如何。

它是如何工作的...

添加三个带有 ID 的文本：nostore、sessionstore 和 localstore。添加一个带有id='savebtn'的按钮，并将其click事件绑定到pageinit事件处理程序中的回调函数。在回调函数中，通过在window.sessionStorage和window.localStorage对象上分别调用setItem()方法并使用唯一键（localval 和 sessionval）来持久化文本字段。

要在页面重新加载或刷新时恢复这些持久化的值，请向pageshow事件添加事件处理程序。将localval键传递给window.localStorage.getItem()函数以从本地存储中读取。将sessionval键传递给window.sessionStorage.getItem()以从会话存储中读取。将这些值设置到相应的文本字段中。

应用程序加载时，请输入文本值，然后单击保存按钮以使它们持久化。

接下来，刷新浏览器以重新加载页面。会话仍然存在，您将看到本地和会话存储值被恢复。第一个字段被清除，因为它没有被持久化，如下图所示：

最后，关闭应用程序并重新打开它。这次，会话已终止。您将看到只显示本地存储数据，其他两个文本字段已清除：

还有更多...

不同浏览器可能不支持 Web 存储功能。您可以通过运行以下代码检查window对象是否具有有效的localstorage或sessionStorage属性以验证您是否可以使用该功能：

If (('localStorage' in window) && window['localStorage'] !== null)
  // Local storage is supported
If (('sessionStorage' in window) && window['sessionStorage'] !== null)
  // Session storage is supported

您还可以使用免费的Modernizr库来测试 Web 存储支持，方法是检查Modernizr.localstorage和Modernizr.sessionstorage属性是否有效。

检查 Web 存储

您可以在浏览器中打开开发者工具，检查浏览器中存储的本地和会话存储的当前键值集。以下截图显示了在此示例中保存的本地存储键值：

以下截图显示了使用会话存储存储的键值：

WebSQL 存储

WebSQL 存储是 HTML5 中定义的另一个功能，用于存储客户端数据。它使用 SQLite 查询执行数据操作。IE 和 Firefox 都不支持此功能。此规范已不再维护，并且可能会在未来被放弃。

IndexedDB 存储

IndexedDB 存储 是使用索引数据查询的另一种形式的客户端存储。在编写本教程时，只有 Firefox 和 Chrome 浏览器很好地支持此功能。旧版 IE、Safari 和 Opera 不支持此功能。

使用 Canvas 进行 2D 绘图

Canvas 是您的网页中的矩形区域，您可以使用 JavaScript 绘制 2D 形状，并渲染位图图像。它用于图表、动画、图像、照片合成、实时视频处理和游戏。本教程向您展示了如何在 jQuery Mobile 应用程序中使用 Canvas。

准备就绪

从 code/11/canvas 文件夹中复制本教程的完整代码。您可以使用以下 URL 启动此代码：http://localhost:8080/11/canvas/main.html。

如何做...

应遵循的步骤是：

创建带有 canvas 元素的页面内容的 main.html：

<div data-role='content'>
 <canvas id="myCanvas" width="500" height="500">
    Canvas is not supported on your browser
  </canvas>
</div>

添加以下脚本以获取 2D 上下文，然后绘制两个矩形：

$('#main').live('pageinit', function(event) {
 var cxt = $('#myCanvas')[0].getContext("2d");
  cxt.fillStyle = '#5f98c5';
  cxt.fillRect(20,20, 100, 100);
  cxt.strokeRect(10,10,120, 120);
});

工作原理...

创建 main.html，并在 #main 页面上添加一个 id='mycanvas' 的 <canvas> 元素，宽度和高度均为 500 像素。如果浏览器不支持 Canvas 功能，则显示文本 Canvas is not supported on your browser。接下来，在 pageinit 回调函数中添加脚本以获取 mycanvas 元素的 2D 上下文 (cxt)。将 cxt 的 fillStyle 定义为灰色阴影 #5f98c5。现在，使用 fillRect() 绘制一个填充的矩形，传递原点、长度和宽度作为参数。接下来，使用 strokeRect() 绘制一个没有填充的矩形轮廓。屏幕现在显示如下截图所示：

还有更多...

本教程只是对 Canvas 元素进行了基本介绍，并向您展示了如何在 jQuery Mobile 应用程序中使用它。Canvas 是一个非常强大的元素，支持各种 API。您可以设置颜色、样式、渐变、图案、字体和文本对齐方式。您可以绘制几何形状，如线条、矩形、路径、弧线和贝塞尔曲线。画布支持变换 API，如缩放、旋转、平移和变换。您可以绘制图像，也可以在像素级别对其进行操作。Canvas 有助于图像合成。您还可以将画布的绘制状态保存在堆栈中，并从堆栈中恢复任何以前保存的绘制状态。

注意

在画布上绘制的元素采用绝对坐标。因此，在使用这些值时，请注意目标设备的实际屏幕尺寸。

另请参阅

在 SVG 图像上应用高斯模糊 教程

在 SVG 图像上应用高斯模糊

可缩放矢量图形 (SVG) 是用于 2D 可缩放矢量图形的一系列规范。它们基于 XML，可以是静态的或动态的（动画或交互式）。本教程向您展示了如何在应用程序中使用 SVG 图像，并在单击时应用高斯滤镜。

准备就绪

从 code/11/svg 文件夹中复制此示例的完整代码。SVG 图像位于 code/resources/images 文件夹中。您可以使用以下 URL 启动此代码：http://localhost:8080/11/svg/main.html。

如何做...

需要遵循的步骤是：

在页面内容中创建 main.html，其中包含一个 SVG 元素。绘制一个 SVG 矩形，并在矩形内显示 SVG 图像：

<div data-role='content'>
  <svg  version="1.1">
    <defs>
      <filter id="gausfilter" x="0" y="0">
 <feGaussianBlur in="SourceGraphic" 
 stdDeviation="5" />
      </filter>
    </defs>
 <rect width="180px" height="220px" x='10' y='10'
 style="fill:none;stroke-
 width:2;stroke:rgb(0,0,0)"/>
    <image id='svgimg' width='160px' height='200px' 
      x='20' y='20' 
      xlink:href='../../resources/images
      /Chrisdesign_green_comic_egg.svg'>
    </image>
  </svg>
</div>

当点击图像时，将 Guassian 滤波器应用于 SVG 图像：

$('#main').live('pageinit', function(event) {
  $('#svgimg').bind('click', function(event, ui) {
 $(this).attr('filter', 
 'url(#gausfilter)').trigger('refresh'); 
  });
});

它是如何工作的...

创建 main.html，并在其页面内容中添加一个 <svg> 元素。如代码所示，指定 SVG 命名空间和版本。使用 <rect> 元素创建一个矩形，并指定其属性，如宽度、高度、x 和 y 位置，还设置其 stroke 样式。接下来，添加一个 id='svgimg' 指向 SVG 图像的 <image> 元素，并指定要使用的图像的位置、位置和大小。加载页面时，将显示以下截图：

现在，通过在 <defs> 元素内部添加 id='gausfilter' 的 <filter> 元素来定义高斯滤波器。在 <filter> 内部添加 <feGaussianBlur> 元素，并设置标准差为 5。最后，在 pageinit 回调函数中将 click 事件绑定到 #svgimg 图像上的事件处理程序。在这里，使用 jQuery 的 attr() 调用向 <image> 标签添加 filter='gausfilter' 属性。现在，当你点击 SVG 图像时，高斯模糊将被应用，如下截图所示：

还有更多...

SVG 支持矢量图形、光栅图形和文本元素。它允许您在 SVG 图像上进行变换、裁剪路径、应用 alpha 蒙版和滤镜效果。本示例中使用的 SVG 图像是由 ChrisDesign (chrisdesign.wordpress.com) 设计并贡献给 Open Clipart 网站 (openclipart.org) 的。Open Clipart 网站还有成千上万的免费 SVG 图像可供使用，属于公共领域。

SVG Tiny 规范

SVG Tiny（SVGT）规范有一个移动版，目前 SVGT v1.2 是 W3C 的推荐标准。它在大多数移动设备和平台上得到良好支持，而且支持程度每天都在不断提高。

另请参阅

使用 Canvas 进行 2D 绘图 示例

使用 Geolocation API 跟踪您的位置

地理位置 API 是一个独立的规范，是 HTML5 技术栈的一部分。您可以使用 JavaScript 并使用各种技术（如 IP 地址、Wi-Fi、GSM/CDMA 小区 ID 或设备全球定位系统（GPS））定位客户端设备的位置。本示例向您展示了如何在应用程序中使用 Geolocation API 查找当前位置。

准备工作

从 code/11/geolocation 文件夹中复制此示例的完整代码。您可以使用以下 URL 启动此代码：http://localhost:8080/11/geolocation/main.html。

如何做...

要遵循的步骤是：

创建一个空的 div 标签 main.html 来显示地理位置信息。

<div data-role='content'>
  <p>You current Position is ...</p>
  <div id='geopos'></div>
</div>

调用 getCurrentPosition() 方法使用 show_pos() 回调函数获取当前位置。

$('#main').live('pageinit', function(event) {
  if (navigator.geolocation)
 navigator.geolocation.getCurrentPosition(show_pos);
  else
    $('#geopos').html('Error: Unable to get your position!');
});

最后，在 show_pos() 回调函数中显示当前位置：

function show_pos(pos) {
  var geostr = '<p>Latitude (deg): ' 
    + pos.coords.latitude
    + '</p><p>Longitude (deg): ' + pos.coords.longitude
    + '</p><p>Altitude (m): ' + pos.coords.altitude
    + '</p><p>Accuracy (m): ' + pos.coords.accuracy
    + '</p><p>AltitudeAccuracy (m): ' 
    + pos.coords.altitudeAccuracy
    + '</p><p>Heading (deg): ' + pos.coords.heading
    + '</p><p>Speed (m/s): ' + pos.coords.speed
    + '</p><p>Timestamp: '+ pos.timestamp;
  $('#geopos').html(geostr);
}

工作原理...

创建 main.html，并向 #main 页面添加一个空的 div 标签，其 id='geopos' 用于显示位置信息。使用 pageinit 事件处理程序首先检查是否可用 navigator.geolocation 对象。如果可用，调用 getCurrentPosition() 方法并使用回调函数 show_pos() 获取位置信息。show_pos() 回调函数可以访问位置 (pos) 对象，该对象具有当前位置的各种属性。访问 pos.coords 以获取诸如纬度、经度、高度和精度等信息。pos 对象还具有与当前位置读数相关联的时间戳。现在，在 #geopos 的 div 属性中显示位置详细信息。

当您启动应用时，浏览器首先会询问您是否同意访问位置信息。一旦您同意，以下位置详情将显示在屏幕上：

注意

Geolocation API 规范要求用户位置信息是机密的，并且浏览器在访问或分享此信息之前应发出警告并获得用户的许可。

还有更多...

在这个示例中，getCurrentPosition() 调用仅一次获取用户位置，并使用 show_pos() 回调函数显示信息。但是，如果您希望跟踪移动设备，可以使用 watchCurrentPosition() 调用获取连续的位置读数。语法保持不变，但此方法持续并定期获取设备位置并在每次调用时调用 show_pos() 回调。此方法还填充 pos.coords.speed 和 pos.coords.heading 属性，以提供有关移动设备速度和方向的反馈。用户仅在第一次调用时被提示共享位置详细信息的权限。

if (navigator.geolocation)
 navigator.geolocation.watchCurrentPosition(show_pos);

Google Gears

在 Geolocation API 规范之前，Google Gears JavaScript 库非常流行，用于获取位置信息。随后，Google Gears 对 Geolocation API 的发展做出了相当大的贡献，并且现已被弃用。

桌面浏览器上的地理位置

在桌面浏览器上获取的位置信息基于从 ISP 服务器获取的 IP 和 MAC 地址详细信息。因此，此信息具有较大的精度范围，有时在几公里范围内，而移动设备依赖于网络基站和 GPS 设备（如果已启用）来进行定位。因此，移动设备可以在几米范围内非常准确地确定位置、高度、速度和方向信息。

使用

HTML5 引入了一个新的<audio>元素，可以直接在浏览器中播放音频文件。在此之前，浏览器必须使用插件，如 Flash Player、Real Player 或 Quick Time 来播放音频文件。<audio>元素提供了一个轻量级的替代方案，本示例向您展示如何在您的应用程序中使用它来播放音频文件。

准备工作

从code/11/audio文件夹复制此示例的完整代码。音频片段可在code/resources/audio文件夹中找到。您可以使用以下网址启动此代码：http://localhost:8080/11/audio/main.html。

如何实现...

需要遵循的步骤是：

在页面内容中创建带有<audio>元素的main.html：

<div data-role='content'>
 <audio controls autoplay preload='auto'>
    <source src='../../resources/audio/song.mp3' 
      type='audio/mpeg' /> 
    <source src='../../resources/audio/song.oga' 
      type='audio/ogg' /> 
    <source src='../../resources/audio/song.webma' 
      type='audio/webm' /> 
    <p>Browser does not support audio tag</p>          
  </audio>
</div>

工作原理...

在#main页面上添加<audio>元素，并使用controls、autoplay和preload属性。controls属性显示播放按钮、音量滑块和其他控件。preload='auto'选项表示浏览器可以在页面准备好后立即开始流式传输音频文件。autoplay属性告诉浏览器可以在下载和准备好时直接开始播放音频文件。

注意

<audio>元素还支持loop属性，使音频以连续循环的方式播放。

不同的浏览器支持不同的音频格式，并选择并播放第一个受支持的音频格式。因此，使用<source>元素添加.mp3、.oga和.webma格式的音频文件的 URL 链接，如代码所示。这三种音频格式中的一种将被大多数浏览器识别。最后，在末尾添加错误消息浏览器不支持音频标签。如果浏览器不支持audio元素，则会显示此消息。现在，当您加载页面时，将看到类似以下的截图，并且音频文件开始播放：

还有更多...

较旧的浏览器，如 IE8，不支持<audio>元素。在这种情况下，您将需要使用 Flash 回退机制。

有关音频格式和编解码器、使用 Flash 回退和 HTML5 媒体播放器的注意事项，请参阅下一个有关<video>元素的示例。

另请参阅

使用<audio>元素查看视频的Viewing videos with the 示例

使用`<video>`元素查看视频

HTML5 引入了一个新的<video>元素，可以直接在浏览器中播放视频文件。在此之前，浏览器必须使用插件，如 Flash Player、Real Player 或 Quick Time 来播放视频文件。<video>元素是一个轻量级的替代方案，本示例向您展示如何在您的应用程序中使用它来查看视频。

准备工作

从code/11/video文件夹复制此示例的完整代码。视频片段可在code/resources/video文件夹中找到。您可以使用以下网址启动此代码：http://localhost:8080/11/video/main.html。

如何实现...

需要遵循的步骤是：

在页面内容中创建带有<video>元素的main.html：

<div data-role='content'>
 <video controls autoplay preload='auto' width='300' 
 height='300'>
    <source src='../../resources/video/spiral.mp4' 
      type='video/mpeg' /> 
    <source src='../../resources/video/spiral.ogv' 
      type='video/ogg' /> 
    <source src='../../resources/video/spiral.webmv' 
      type='video/webm' /> 
    <p>Browser does not support video tag</p>
  </video>
</div>

工作原理...

在#main页面上添加<video>元素，带有controls，autoplay和preload属性。controls属性显示播放按钮、音量滑块、全屏按钮和其他控件。preload='auto'选项表示浏览器可以在页面准备就绪后立即开始流式传输视频文件。autoplay属性告诉浏览器可以在准备就绪时直接播放视频。此外，添加width和height属性以像素为单位调整视频大小。

不同的浏览器支持不同的视频格式，并选择并播放第一个受支持的视频格式。因此，使用<source>元素向.mp4，.ogv和.webmv格式的视频文件添加 URL 链接，如示例代码所示。这三种视频格式中的一种将被大多数浏览器识别。最后，在末尾添加错误消息浏览器不支持视频标签。如果浏览器不支持视频元素，则显示此消息。现在，当您加载页面时，将显示类似以下内容的屏幕截图，并且视频文件开始播放：

还有更多...

<video>标签还支持一些额外的属性，如loop（以连续循环播放视频）、muted（关闭音频）和poster（在视频开始播放之前作为海报显示的图像的 URL）。

注

将preload设置为auto以自动下载媒体文件，因为一些浏览器出于安全原因不支持preload。

闪回

较旧的浏览器，如 IE8，不支持<video>和<audio>元素。您仍然可以通过使用 Flash 播放器作为后备机制在不受支持的浏览器中播放 HTML5 音频和视频。您必须在<video>或<audio>元素的末尾使用<object>标签嵌入播放器。在这种情况下，浏览器不识别新的 HTML5 标签，并继续使用 Flash 后备播放音频/视频。

编解码器

当今网络上有多种流行的音频/视频格式。不同浏览器的支持程度各异，只支持特定的音频/视频编解码器。您必须通过包括同一音频/视频文件的不同格式（必要时）来确保您的应用程序在最大平台上正常工作，如本文所示。有关此事的详细信息，包括显示支持矩阵的表格，请参见diveintohtml5.info/video.html。

音频和视频 API

音频 API 和 视频 API 现在已经可以直接使用 JavaScript 控制 <audio> 和 <video> 元素。它们允许您触发操作（播放、暂停等）并监听事件（播放、结束等）。

HTML5 媒体播放器

HTML5 标签本身提供了非常简单的 UI 和控件。你可以使用音频和视频 API 来增强外观和功能。另外，你也可以很轻松地使用任何流行的库，比如jPlayer（jplayer.org）、MediaElement.js（mediaelementjs.com）、JW Player（longtailvideo.com）、Video.js（videojs.com）以及Audio.js（kolber.github.com/audiojs/）。

另请参阅

使用示例

posted @ 2025-09-06 13:45 绝不原创的飞龙阅读(9) 评论(0) 收藏举报

刷新页面返回顶部

龙哥盟

掠夺·扩张·投机·博弈

jQueryMobile-秘籍-全-

jQueryMobile 秘籍（全）

前言

本书内容概述

本书所需的条件

本书适合谁

约定

注意

提示

第一章：入门

介绍

编写你的第一个 jQuery Mobile 应用程序

准备就绪

如何做...

它是如何工作的...

还有更多...

页面主题

另请参阅

使用 JS Bin 创建一个简单应用程序

准备就绪

如何实现...

工作原理...

注意

还有更多...

注意

另请参阅

第二章：页面和对话框

介绍

编写单页模板应用程序

准备工作

如何做...

它是如何工作的...

提示

还有更多...

关闭 Ajax 导航

提示

使用data-rel和data-direction

页面容器是可选的

注意

另请参阅

编写多页模板应用

准备工作

如何做...

提示

工作原理...

提示

还有...

注意

使用过渡效果

关闭 Ajax 导航

页面容器是必须的

另请参见

为了更快地导航而预取页面

准备工作

如何操作...

工作原理...

还有更多...

当预取未完成时

预取的页面不会永久缓存

请参阅

使用 DOM 缓存来提高性能

准备工作

如何实现...

工作原理...

提示

还有更多...

DOM 缓存可能会减慢应用程序的运行速度

另请参阅

自定义对话框样式

准备工作

如何操作...

工作原理...

还有更多...

自定义 CSS

另请参阅

使用 CSS 创建弹跳页面过渡

准备工作

如何做…

使用`data-rel`和`data-direction`

向`customtransition.css`文件添加供应商前缀

使用`data-url`作为 href 链接

第三章工具栏

CSS 属性 `position:fixed`