jQuery Mobile 和 JSON_H5之家 - 中国HTML5教程资源分享第一站

开始之前

常用缩略词

为了使本教发挥最大作用，您应该熟悉使用 HTML、JavaScript 和 CSS 构建 web 应用程序。另外，这个移动 web 应用程序附带的服务器端代码是用 PHP 和 MySQL 编写的。熟悉服务器端编程也有助于您跟随本教程的操作。如果您熟悉其他服务器端平台，比如 ASP Classic、ASP.Net 或 Java™ Server Pages，那么您可能会发现，服务器端代码很容易理解。熟悉 jQuery 并不是必须的，当然，熟悉它不会有坏处。事实上，本教程的目标读者是致力于探索新框架的移动程序员，而不是准备拓展到移动空间的 jQuery 专业人员。学习完本教程后，您将了解如何构建一个基本的 jQuery Mobile 应用程序以及如何在移动浏览器和后端服务器之间管理数据。这个应用程序演示如何在销售相关数据上执行基本记录操作（比如 insert、update、delete）。当您从多个浏览器运行您的移动 web 应用程序时，您将注意到它有多么通用。最后，您可以将您的移动 web 应用程序的快捷键安装在 iPod 和 Android 设备的主屏幕上，从而演示如何部署一个 web 应用程序。

关于本教程

本教程介绍 jQuery Mobile (JQM) 框架，该框架用于编写针对移动行业的主流浏览器的移动 web 应用程序。JQM 用于向一些移动设备（比如 iPhone、iPad、Android、WebOS、BlackBerry Version 6 (Torch, Playbook) 等等）上运行的基于 web 的应用程序提供直观统一的用户体验。本教程首先简要介绍 JQM 项目，以及 JQM 与 HTML5 的关系及其对后者的依赖。然后，本教程介绍构建一个 JQM 应用程序的众多方法中的一种，以及 JQM 增强基本 web UI 元素的一些方法。最后，本教程将关注一个简单的销售驱动导向自动化的需求。

针对这个问题，本教程制定一个计划来实现一个针对移动设备用户的解决方案，无需进行本地移动开发。完成后的应用程序将被演示，这样当您跟随本教程逐步构建自己的应用程序时，就知道本教程将把您带向何处。当您学习使用 JQM 实现这个解决方案时，我们将逐一检查源文件中的函数。本教程最后将介绍几个技巧，以帮助您的用户在他们的移动设备上更轻松地访问您的应用程序。

先决条件

要跟随本教程，您需要以下组件：

我在一个 MacBook Pro 上创建本教程的代码样例，通过 VMWare Fusion 运行 Windows® 7。我使用 Notepad++ 编辑文件，因为它不仅拥有不错的语法高亮显示功能，还有安全的 FTP，可以使与基于服务器的 PHP 文件交互变得非常直观。您也可以在 vi 中编辑文件，但谁想这样做呢？为了使用 MySQL 数据库，我使用我的主机帐户可用的 phpMyAdmin。为了在一个物理设备上进行测试，我使用一个运行 Android 2.2 的 Nexus One 和一个运行 iOS 4.1 的 iPod Touch。

请参见获取帮助链接；下载。

jQuery Mobile

我们首先检查 JQM 以及如何使用它改进移动 web 应用程序开发体验。尽管 jQuery Core 可以完全安装使用，但 JQM 仍然处于婴儿期，在本文撰写之时还处于 alpha 阶段。我们可以看一看 JQM 项目期望实现的目标。

JQM — 最新的 jQuery 家族成员

JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能，跨最流行的智能手机和平板电脑设备工作。与 jQuery 一样，JQM 是一个在 Internet 上直接托管、免费可用的开源代码基础。事实上，当 JQM 致力于统一和优化这个代码基时，jQuery 核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了多么大的发展。

与 jQuery 核心库一样，您的开发计算机上不需要安装任何东西；只需将各种 *.js 和 *.css 文件直接包含到您的 web 页面中即可。这样，JQM 的功能就好像被放到了您的指尖，供您随时使用。

展示了将 jQuery Mobile 文件添加到应用程序是多么简单！

清单 1. 将 jQuery Mobile 添加到应用程序

<head> <title>IBM JQuery Tutorial</title> <link href="http://code.jquery.com/mobile/1.0a1 /jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </script> <script src="http://jquery.ibm.navitend.com/utils.js"></script> </head>

中的代码实际上是本教程的样例代码中的一个潜在高峰（sneak peak），本教程稍后还将讨论它。注意，现在一个样式表已经直接从 jQuery 的 Content Delivery Network (CDN) 下载下来。CDN 用于分发跨 Internet 分发经常使用的文件，使得下载速度尽可能快。CDN 通常部署在一些大型基础架构上，通过在 Internet 上的一些战略位置放置文件，将这些文件需要传输的路径减小到最小距离。jQuery CDN 和其他类似 CDN 通常托管在一些世界级大型基础架构上，比如 amazon.com 和其他 Internet 巨头提供的基础架构。

除 CSS 文件外，这个头部还包含三个 JavaScript 文件。第一个 JavaScript 文件对缩减形式的 jQuery 核心库的引用，然后是 JQM 库的缩减形式，最后是一个特定于应用程序的 JavaScript 文件 utils.js。缩减意味着代码针对快速下载和解析进行过优化。记住，每个应用程序页面都需要下载这些文件，因此，应使它们的大小绝对最小（并依赖缓存！）来大幅提高应用程序性能。

中的版本实际上是 jQuery Mobile alpha 发布 1。alpha 发布 2 已经可用，但由于存在一些 bug 行为，本教程依赖该代码的第一个 alpha 发布。您阅读本教程之时，这些 JQM 文件的一个更新版本可能已经可以下载。参见中 jQuery 的 CDN 链接，获取这些库文件的最新版本。JQM 受到 MIT 和 GPL 许可的双重许可；基本上，这意味着如果您保持这个 jQuery 属性，就能在您的应用程序中使用这些文件。

注意，也可以下载这些 jQuery 文件的一个副本并直接从您自己的 web 服务器托管它们。这种方法不是个坏主意，特别是当您正在发布一个依赖这个框架的商业应用程序时。这些框架可能会而且的确会发生更改，有时会损害依赖特定行为的应用程序。商业企业通常对可预测的行为更感兴趣，因为这种行为更容易支持；而不是总是追赶时髦。

面向触摸

JQM 是一个经过触摸优化的框架，用于为基于浏览器的移动 web 应用程序构建统一和理想的用户体验。您所知道的关于编写 web 应用程序的大部分知识仍然适用；但是，使应用程序看起来更统一这个目标是 JQM 方法的真正关键部分。JQM 采用一种特殊方式样式化标准表单元素，使其在视觉上更美观并更容易操作。请您仔细查看中的图像，它们展示了 JQM 样式化表单元素的一个子集。

图 1. JQM 表单元素

标准 JQM 表单元素（单选按钮、复选框、滑块和其他选择选项）的屏幕截图

除便于触摸和样式化 UI 元素外，JQM 的真正魔力在于它管理屏幕过渡的方式。我们来看一看。

扩展 DOM

在传统 web 应用程序构建中，每个屏幕或页面从服务器获取，屏幕的全部内容被替换。这种方法意味着：