作者：[阿根廷]Maximiliano Firtman

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

jQuery Mobile即学即用试读：

前言

如果你是一名 Web 设计师或开发者，并且正在考虑使用 jQuery Mobile 创建移动应用，那么本书将是你理想的伙伴。

jQuery Mobile 致力于解决一个问题：为市场上众多移动平台和浏览器创建兼容界面。

要看懂本书，你只需要了解基本的HTML（任何版本）知识，而懂一些基本的JavaScript则将对理解后面章节的内容非常有帮助。读者不需要会HTML5、JavaScript 或 jQuery 即可使用 jQuery Mobile 框架或本书的大部分内容。

本书排版约定

本书使用以下排版约定。

• 楷体

用于标识新术语。

• 等宽字体

用于显示程序，也用于段落中的代码元素，如变量或函数名、数据库、数据类型、环境变量、语句以及关键字。

• 等宽粗体

用于显示那些需要用户原样输入的命令或文本。

• 等宽斜体

用于显示需要用户输入或取决于上下文的文本。

这个图标表示提示、建议或一般注解。

这个图标表示警告或注意。

使用代码

本书旨在帮助你完成工作。一般来说，你可以在你的程序及文档中使用本书中的代码。除非你准备复制大块的代码，否则无需从我们这儿获得许可。例如，写一个用到几段本书中代码的程序时不需要得到许可，而出售或传播O’Reilly书籍中示例的光盘（CD-ROM）则需要许可，引用本书内容或书中的示例代码回答问题无需得到许可，将本书中的大段示例代码编入你的产品文档需要得到许可。

我们赞赏但不强求注明信息来源。信息来源通常包括标题、作者、出版商以及国际标准书号（ISBN）。如：“ jQuery Mobile: Up and Running by Maximiliano Firtman(O’Reilly). Copyright 2012 Maximiliano Firtman, 978-1-449-39765-4.”。

如果你觉得对示例代码的使用超出了正当引用或上面给出的许可范围，请随时通过permissions@oreilly.com联系我们。

Safari®在线图书

Safari图书在线是一个数字图书馆，可以供你方便快捷地在7500多种技术和创意类参考书以及视频中找到需要的信息。

订阅之后，就可以在这个图书馆在线阅读、查看所有图书及视频。你可以在移动设备上阅读，在新主题付印之前就阅读它们，还可以查看编写中的手稿并直接给作者反馈、复制粘贴代码、管理收藏、下载章节、给关键段落加书签、创建批注、打印页面，以及获得其他众多节约时间的好处。

O’Reilly Media 已经将本书（英文版）上传至 Safari 图书在线。要获得本书及其他来自O’Reilly等出版商类似选题的电子版完全访问权限，请到http://my.safaribooksonline.com免费注册。

我们的联系方式

如果想对本书发表评论或有任何疑问，请联系出版社。

美国：

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

中国：

北京市西城区西直门南大街2号成铭大厦C座807室（100035）

奥莱利技术咨询（北京）有限公司

O’Reilly的每一本书都有专属网页，你可以在那儿找到本书的相关信息，包括勘误表、示例代码以及其他信息。本书的网站地址[1]是 ：

http://shop.oreilly.com/product/0636920014607.do

中文书：

http://www.oreilly.com.cn/index.php?func=book&isbn=978-7-115-30294-6

对于本书的评论和技术性问题，请发送电子邮件到：

bookquestions@oreilly.com

关于本书的更多信息、会议、资源中心和网络，请访问以下网站：

http://www.oreilly.com

http://www.oreilly.com.cn

我们在Facebook的地址如下：

http://facebook.com/oreilly

请关注我们的Twitter动态：

http://twitter.com/oreillymedia

我们的YouTube视频地址如下：

http://www.youtube.com/oreillymedia

注释

[1].编注1：你也可在图灵社区（www.ituring.com.cn）本书网页下查看中文版勘误、评论和相关文章。第1章移动平台

如果你正在阅读本书，说明你可能是一位网页设计师或网页开发者，也可能是一位jQuery爱好者或一位Web应用开发者。在开始写代码之前，我们首先要了解一下移动生态系统以及 jQuery Mobile 适合做些什么。让我们开始吧。1.1 为什么需要jQuery Mobile

你可能会问的第一个问题是 jQuery Mobile 存在的意义是什么？既然已经有大量能渲染标准桌面网站的移动浏览器了，为什么还要专门考虑移动设备？

让我从我的另一本书《移动网络程序设计》（Programming the Mobile Web）中复制粘贴一些内容来回答这些问题。当然，我已经从自己这儿得到授权了。1.1.1 移动互联网的传说

随着人们访问互联网的方式延伸到移动终端，开发者中间也流传着很多故事，这些故事讲述了这个趋势将给他们的工作带来什么影响。虽然有些故事是真实准确的，但也不乏带来误导的、让人迷惑的，甚至是极端错误的描述。

1. 没有所谓的移动互联网，只有一个互联网

过去的几年里我曾经多次听说这个言论。的确只有一个互联网，想一下你的生活吧，你不会为你的手机专门设置另一个Email账号。（好吧，我知道有些人会这样做，但我相信这并不是普遍情况。）

在最喜欢的网站上，比如在ESPN上阅读最新的NBA赛事的消息，台式机和手机访问的都是同一个新闻源。你也真的不想用手机访问另一个社交网络，而是希望使用和桌面电脑上相同的Facebook或Twitter账号。在桌面电脑上创建朋友列表已经很痛苦了，你已经因此忽略了很多人，你可不想把这些事在手机上再重做一次。

因此，只有一个互联网。不过，在为移动互联网做开发时，我们面对的是非常、非常不一样的设备。最明显的不同是屏幕尺寸，这也将是我们遇到的第一个问题。除此之外，还有很多不那么明显的差异，比如我们使用移动设备的情境，通常和使用舒适的桌面电脑甚至笔记本、上网本时的地点、场景完全不同。

不要误会我，这不是说，开发者必须为我们的工作创建两个、三个或多个版本。这就是 jQuery Mobile 要解决的问题。

2. 设计移动网站不需要什么特别处理

今天市场上几乎所有的智能手机，如iPhone以及基于Android的设备，都可以读取并显示完整的桌面站点，这是事实。用户希望在移动互联网上的体检和在桌面电脑上的一致，这也是事实。一些统计甚至显示，用户使用智能手机时，更倾向于选择桌面版本而不是移动版本。不过，这是因为我们喜欢通过缩放、滚动以及旋转操作来浏览信息呢，还是因为移动版本的用户体验实在太差了？我曾经见过很多移动互联网网站，除了logo和若干文本链接之外什么也没有。我希望在智能手机上看到更多的东西！

3. 一个网站应当在所有设备（台式机、手机、电视）上都能运转

如同我们即将看到的，有一些技术能让我们只创建一个文件就能为包括桌面电脑、手机、电视以及游戏终端在内的众多设备提供不同的体验，这个愿景被称为One Web。今天，有很多移动设备的连接速度很慢，资源也受限——我说的是非智能手机，理论上它们也能读取并解析文件，但如果我们把为桌面设备准备的文档发给它们，则它们非但不能提供最好的体验，还可能产生一些兼容性问题。因此，One Web仍然是将来时。为了让不同的移动设备都能提供良好的用户体验，还需要做一些额外工作，不过也有一些技术可用于减少这些工作并避免代码和数据的重复。

4. 只要创建一个240像素宽的HTML文件，就算是一个移动网站了

这是另一种关于移动互联网的简单化认识。今天，市场上有3000多种移动设备，差不多有50种不同的浏览器（事实上，如果我们按它们的版本号来划分的话，有500多种不同的浏览器）。只有一个HTML文件的移动网站是相当不靠谱的。另外，这种做法，实际上是在助长移动互联网毫无用处的错误观念。1.1.2 移动Web应用

我并不打算讨论移动Web开发与原生开发孰优孰劣，事实上，我相信这个讨论本身没有多大意义。通常，这些讨论的焦点就是对比原生代码与JavaScript代码，或浏览器应用与本地应用。不过，这些讨论可能不会提到的是，对原生开发环境来说，多平台开发是有挑战的，因为每个平台都有不同的SDK。既然问题的核心是要便利地在多个移动设备上开发及发布，那么移动Web开发在大多数情况下都是一个完美的解决方案。Web应用有着大量的同义词或近义词，如移动Web应用、小部件（widget）、聚合（hybrid）、HTML5应用等。

特别是，移动Web应用与通常的移动网站在目标上并不相同。一个Web应用通常会模仿原生的手机应用，有着更加事务型的用户界面。它虽然仍是由网页技术（HTML、CSS、JavaScript、AJAX）创建的，但向用户提供了一个类似应用程序的体验。

很多移动Web应用也使用了离线或地理定位（geolocation）等HTML5特性，以便提供更好的体验。地理定位不是HTML5官方标准，而是W3C的一个独立API，不过，它经常以HTML5名义被提到。

Web应用可以用很多方式（见图1-1）实现，包括：

• 从浏览器中访问；

• 安装为一个全屏的 Web 应用；

• 通过提供商实现的官方包（有时叫小部件）安装；

• 内嵌在本地应用中，通常称为聚合。图1-1：Web应用（从左到右）：基于浏览器的体验、安装的全屏应用、在本地应用中嵌入的Web应用

本书剩下的部分将介绍如何创建这些网页应用。想了解这方面的更多信息，可以阅读我的另一本书《移动网络程序设计》。

Web应用通常会为网页设计师和开发人员带来新的挑战，比如加载视图而不是页面，管理视图之间的双向导航，以及创建为触屏设备定制的富控件等。1.1.3 再问一次，为什么需要jQuery Mobile

如果你已读过了上面几页（我相信你已经读过了），就会知道在移动互联网设计及开发中有一些新的挑战。我们需要创建Web应用，而不仅仅是简单的网站。有太多的设备以及浏览器要兼容，同时，也有许多由社区和设备提供商开发的程序库尝试解决这些问题。

这就是 jQuery Mobile 诞生的原因：让设计师和开发者使用少量代码即可更容易地创建跨平台、可定制的移动互联网体验。

jQuery世界范围的广大社区也将为这个框架的未来提供大量机会。

这个框架同时还获得了移动领域许多大牌公司的官方赞助和支持，其中包括：

• Adobe；

• Mozilla 公司；

• HP Palm；

• BlackBerry/RIM；

• Nokia；

• DeviceAtlas 及 dotMobi。1.2 jQuery Mobile是什么

根据位于http://www.jquerymobile.com的官方说明：

jQuery Mobile 是一个支持所有流行移动设备平台的统一的用户界面系统，基于坚如磐石的 jQuery 及 jQuery UI。它轻量级的代码使用渐进增强方式构建，具有可伸缩、易更换主题的设计特点。1.2.1 jQuery Mobile不是什么

知道 jQuery Mobile 不是什么，对理解 jQuery Mobile 十分重要。

• jQuery Mobile不是移动浏览器上的 jQuery。

要使用 jQuery Mobile，需先载入通常的 jQuery 框架。或者说，它并不是 jQuery的替代，而是一个构建于jQuery之上的UI层。

• jQuery Mobile不是Web应用的开发包。

可以使用 jQuery Mobile 来创建完整的移动应用体验，但你仍然需要一些额外的工作来将它编译为原生应用。在后面几章中，我们将了解到为什么要这样做，以及具体何时、怎样来做。

• jQuery Mobile不是专属于JavaScript爱好者的框架。

除了一些高级主题，使用 jQuery Mobile 时一般无需涉及任何 JavaScript 代码。对于讨厌大括号、分号这些JavaScript语法的Web设计师而言，这是一个好消息。

• jQuery Mobile不是面向所有移动应用/网站/游戏的解决方案。

尽管如此，jQuery Mobile 可以为它们中的大多数提供解决方案。至于剩下的那些，我不得不建议你去阅读我写的另一本相关书籍。1.2.2 框架

如果你没听说过jQuery，那么你大概是从十年前穿越过来的吧？[1]好吧，如果你是 Marty McFly ，请通过浏览器访问 http://jquery.com，了解一下这个超级有用的JavaScript框架。事实上，自2007年开始，它就是互联网上使用最为广泛的JavaScript框架了。

jQuery Mobile 是一个帮助开发者更容易地在移动设备和平板电脑上（这些设备大多具备触摸操作功能）交付跨平台Web应用的框架，只使用标准HTML5代码。一个jQuery Mobile 应用看起来大致如图 1-2 所示。

jQuery Mobile 使用了 jQuery 核心，此外还包含一个 JavaScript 库、一个 CSS3 样式表，以及一些资源图片。

jQuery Mobile 和桌面端的 jQuery UI 类似，即它同样只是一个 UI 框架。它的名字没有包含UI这个词，这也许会让你怀疑它是一个核心框架。在我看来，这个命名选择应该是想借力于jQuery品牌在设计师和开发者圈子中的巨大影响力。

jQuery Mobile 是由 jQuery 主框架的开发团队创建的，由来自 Mozilla 的JavaScript 工具开发者 John Resig 带队（他的 twitter 账号是 @jeresig）。图1-2：一个使用标准主题的典型jQuery Mobile Web 应用，本例中使用的是webOS 智能手机

和 jQuery 及 jQuery UI 一样，这个新的平台也是基于 MIT 或 GPLv2 双协议发布的开源项目。

如果想参与 jQuery Mobile 的开发，可以通过 http://jquerymobile.com/contribute这个网址提供补丁、bug修复以及参与讨论。1.3 移动及平板的世界

人们已不再只通过桌面电脑来浏览互联网了。现在，我们有很多种设备，它们有着不同的屏幕尺寸、输入方式，甚至连我们的老朋友如HTML、JavaScript以及CSS都有了各种新的特性。

毫无疑问，移动设备的时代已经来临。全球有50多亿台移动终端，并且这个数目仍在增长中。与此同时，平板电脑也正迅速普及，总量以百万计。1.3.1 设备分类

现在，我们可以将移动设备分为以下几类：

• 移动电话；

• 低端移动设备；

• 中高端移动设备，也被称为社交设备；

• 智能手机；

• 平板电脑。

1. 移动电话

是的，在某些市场上，我们还能看见移动电话的身影。它们只具备通话和短信功能，没有浏览器，不能连接互联网，无法安装应用。我们不关心这些设备，也不能为它们做任何开发。

要不了几年，随着运营商和设备制造商发起的设备回收以及产品更新服务，这些设备也许就会从市场上彻底消失了。

2. 低端移动设备

低端移动设备有一个很大的优势，即具备Web接入能力。它们一般只自带一个入门级的浏览器，但总量占市场的主流。也许这些用户目前还不是互联网上最活跃的用户，但随着社交网络和 Web 2.0 服务的兴起，一切可能很快会发生变化。如果你的朋友可以从移动设备上发布照片，你或许会希望自己也可以做到，所以只要条件成熟，你可能就会换一新部手机。

诺基亚、摩托罗拉、京瓷、LG、三星以及索尼爱立信都有定位于这个市场的设备。它们通常不具有触屏支持，内存有限，只内置了一个入门级的相机和音乐播放器。

3. 中高端移动设备

对大众市场来说，想获得良好的互联网体验的主流选择即是这类中高端移动设备。中端设备有良好的用户体验，价格也适中。最近几年来，这种类型的设备被称为社交终端，也就是说，用户可以通过这类设备接入社交网站，如Facebook或Twitter。这个类别的设备通常有一个中等尺寸的屏幕，有基本的HTML浏览器支持，有些支持3G，带有一个不错的相机、一个音乐播放器，能玩游戏，有些支持触屏操作，可以安装应用。高端移动设备和智能手机间的一个很大的区别是：高[2]端移动设备往往不采用固定费率计划 进行售卖，用户必须自己去寻找这样的套餐。从2011年开始，这些设备中的大多数开始支持WLAN（WiFi），如图1-3。图1-3：诺基亚X3-02触屏键盘版：一个中端触屏设备，带有数字键盘和WiFi

4. 智能手机

市面上有很多智能手机，包括iPhone、基于Android的设备、webOS、Symbian、黑莓（BlackBerry）以及 Windows Phone 手机（见图 1-4）。这是最难被定义的一类移动设备。人们会问，为什么某些中高端设备没有足够“智能”到可以归入智能手机类别？关于智能的定义每年都在变化，事实上，当前市场上最简单的移动设备在10年前看来也是非常智能的。图1-4：智能手机设备示例

通常当你购买智能手机时，需要签署一份一年或两年期的合约，约定固定的费率和数据流量计划。符合当前关于智能手机的定义的设备，通常会有一个支持多任务的操作系统、一个现代的支持HTML5的浏览器，支持无线局域网（WLAN，也称WiFi）和3G接入，还会有一个音乐播放器，以及下列功能：

• GPS（全球定位系统）或A-GPS（辅助全球定位系统）；

• 数字指南针；

• 可录像的相机；

• TV 输出；

• 蓝牙；

• 触屏；

• 3D 视频加速；

• 加速传感器。

一些多媒体设备也被我们这些Web创作者列为智能手机，但它们其实没有电话功能。这些设备包括 Apple 的 iPod Touch 和 Sony 的 PSP。它们和平板电脑唯一的区别是其屏幕尺寸通常小于3英寸。

5. 平板电脑

平板电脑通常带有一块大屏幕（6到11英寸之间）、一个完整支持HTML5的浏览器，支持WLAN接入（WiFi），有的带3G，支持触屏操作，还具备那些能在智能手机上找到的所有其他功能。

在这个分类中，我们可以找到很多设备，包括：

• 苹果iPad；

• 三星 Galaxy Tab；

• 黑莓 BlackBerry PlayBook；

• 巴诺（Barnes and Noble）Nook Color；

• 摩托罗拉 Xoom；

• LG Optimus Pad；

• 亚马逊 Kindle Fire；

• 索尼 S1 和 S2。1.3.2 操作系统和浏览器

本书并未打算深入研究移动设备的生态系统。在《移动网络程序设计》一书中，可以找到一个详细列举了各种操作系统、平台和浏览器的列表。不过，如果打算创建移动Web体验，至少要对操作系统和浏览器有所了解。

在移动设备的世界里，我们将操作系统分为两大类：可识别的操作系统和专有操作系统。移动电话、低中端移动设备上的操作系统大多属于后一类。

对那些安装了可识别操作系统的设备，我们更关心它上面所运行的操作系统，而不是它的设备品牌或产品型号。我的意思是说，我们并不是要为三星的Galaxy开发Web应用，而是要为Android设备开发Web应用。iPhone是一个例外，因为它的平台是专有的，在写作本书的时候，这个平台只支持一个设备：iPhone。（不同版本的设备也遵循相同的规则，对 Web 开发者而言，iPhone 4 和 iPhone 3GS 并没有太大的区别。）

表1-1列举了当前市场上所有智能手机和平板电脑所使用的操作系统。表1-1：智能手机、社交设备以及平板电脑上的操作系统和浏览器

每个操作系统都有多个版本，有些系统允许用户升级到新版本。每个操作系统都内置一个浏览器，不过用户可以自行安装使用其他浏览器。有时设备制造商或者运营商（你从他们那买的设备）会安装别的浏览器，比如 Opera Mobile 浏览器，或者用它替换掉原有的浏览器。

如果我们将浏览器的调查延伸至中低端设备，还会进一步发现20多种其他浏览器，如Ovi浏览器、NetFront浏览器以及LG的Phantom浏览器。但它们目前都不是jQuery Mobile 的应用目标。

什么是伪浏览器？

伪浏览器是一个用户可安装到设备上的本地应用，它们和默认浏览器使用同一个引擎，但是提供了更多的功能。在iOS上有大量这样的例子，如SkyFire或Perfect Browser，它们都使用Safari作为最终渲染引擎，因此，对jQuery Mobile而言，它们是同一个浏览器。

在《移动网络程序设计》一书中有20页关于每个浏览器类型及特性的详细介绍。1.3.3 jQuery Mobile兼容性

jQuery Mobile 框架专注于智能手机、平板电脑以及多媒体设备等触屏设备，它的兼容列表会随着时间的推进以及框架本身的继续演化而改变，因此，这儿没法给出完整的清单。

jQuery Mobile 1.0 版与下列系统的默认浏览器兼容。

• iOS

iOS 3.2 版开始的 iPhone、iPod Touch 以及 iPad 版 Safari。

• Android OS

手机及平板版Android浏览器。

• BlackBerry OS

BlackBerry浏览器，智能手机版5.0版及最新版，以及平板电脑版。

• Symbian

支持触屏设备的Nokia浏览器。

• webOS

自 webOS 1.4 版开始的 webOS 浏览器。

• Bada

Bada浏览器。

• MeeGo

Micro 浏览器及 Nokia 浏览器（内置在 Nokia N9 中）。

• Windows Phone

Windows Phone/Mobile 6.5 及 Windows Phone 7.0 中的 IE。

• Kindle

Kindle 3 中的浏览器。

jQuery Mobile 也与下列第三方浏览器兼容：

• Opera Mini，自 5.0 版开始在大多数设备上都能完整支持；

• Opera 移动版，自 10.0 版开始在大多数设备上都能完整支持；

• Firefox 移动版。

这个兼容清单只是让你有一个初步了解，完整的兼容性展示远比这个清单复杂，因为多个操作系统版本与多个浏览器版本相互交织，不同的组合可能产生不同的结果。甚至，这里没有列出的新设备也可能兼容 jQuery Mobile，只要它支持 jQuery Mobile框架所必需的最少特性。

简单来说，jQuery Mobile 能兼容每个浏览器并提供框架支持的体验。所有现代浏览器都应该在这个清单中。

许多现代浏览器使用基于WebKit的引擎，如桌面版浏览器Safari或Chrome。所有现代的基于WebKit的移动浏览器都应该能完整兼容jQuery Mobile。同时，桌面版的Chrome、Firefox、Safari、Opera以及IE等浏览器都与 jQuery Mobile 兼容。

移动分级浏览器支持

jQuery Mobile 用一个图表来表示它与各个设备的兼容情况（见图 1-5）。如果我是你，我就不会去趟这道分类的混水，不过，要是你真想了解更多信息，可以在http://jquerymobile.com/gbs/查看。

许多现代桌面浏览器，如 Firefox、Google Chrome、Safari 或 IE 也都兼容jQuery Mobile。虽然 jQuery Mobile 无意于桌面应用，但这个特性在测试时会很有用。另外，后面我们也会看到安装一个模拟环境也很有用。

我相信兼容性问题远比这个表上列出的要复杂，并且一般Web设计及开发人员不必太关心。判断一个移动浏览器是否支持某个特性，有比将它们逐一分类更好的办法，其中一个方案就在你手中：使用 jQuery Mobile。图1-5：jQuery Mobile 在它的网站上维护着一个浏览器兼容清单

GBS（分级浏览器支持，Graded Browser Support）将移动浏览器分为三个级别：A级、B 级以及 C 级。对 jQuery Mobile 来说，各级含义如下：

• A级

支持 CSS3 媒体查询（media queries）的浏览器。这类浏览器会被 jQuery 团队完整地测试。不过，如果设备不支持，则一些特性会被自动禁用。jQuery Mobile将提供一个完整的基于AJAX动画的体验。

• B级

具有增强体验，但是没有AJAX导航特性的浏览器。

• C级

不兼容 jQuery Mobile 的浏览器。这类浏览器不能从 jQuery Mobile 框架接收任何CSS或JavaScript代码，因此用户将只能看到一个无样式的HTML文件内容。本书后面会提到如何处理这种情况。

PhoneGap以及原生开发

上面的 jQuery Mobile 移动分级浏览器支持表中，PhoneGap 被当作了一个浏览器。不过，PhoneGap并不是浏览器，它是一个用于创建混合解决方案（嵌入了Web应用的原生应用）的框架。在iOS、Symbian、BlackBerry、Android以及webOS等平台上，PhoneGap都被jQuery官方支持。

好消息是，你可以使用任何你喜欢的混合解决方案框架，只要设备支持PhoneGap，jQuery Mobile 就也能工作，这是因为 PhoneGap 不是浏览器本身，而是一个使用了原生浏览器引擎的框架。

简单来说，jQuery Mobile 兼容使用 HTML 创建原生应用。1.4 HTML5和CSS3

我知道大多数Web设计及开发人员都对HTML5和CSS3感到恐慌。我首先想说：不要担心，jQuery Mobile 将为你处理一切。因此，即使不懂 HTML5 或 CSS3 也可以使用 jQuery Mobile。尽管如此，我仍然鼓励你学习一下 HTML5 和 CSS3，这样，在将来的讨论中，你将对这些新标准有一个更深的认识。

本书不会教读者HTML5或CSS3，不过，了解一些相关知识很重要。很多智能手机、平板电脑内置的移动浏览器都支持HTML5、CSS3以及其他API。

关于HTML5有很多可谈论的东西，包括它的历史以及它为移动世界带来了什么。

严格来说，HTML5是一个发展中的标准，它包含了若干对HTML标记语言的改变以及大量JavaScript中的新API（是的，HTML5的大部分内容是关于JavaScript API的）。在非正式的场合中，HTML5是许多浏览器中的现代特性的汇总，包括 W3C 的正式的 HTML5 标准、其他 W3C API、CSS3 以及非标准扩展。可以在http://mobilehtml5.org看到HTML5在各移动浏览器中的兼容信息。

jQuery Mobile 使用了大量的 HTML5 特性以便在移动浏览器上提供更好及更快的体验。不过这并不意味着浏览器必须完整地支持HTML5。事实上，许多早于HTML5出现的老浏览器也支持一些HTML5标记。在处理动画、渐变、特效以及UI渲染时，jQuery Mobile 将尽可能地使用 CSS3。

为了进一步引起你的兴趣，必须得告诉你：使用HTML5、CSS3以及一些其他现代技术，可以获得下列特性（无论是否带有 jQuery Mobile 体验）：

• 离线访问；

• 离线存储；

• Websockets；

• 地理位置访问；

• 加速计及陀螺仪支持；

• 动画；

• 2D 及 3D 变换；

• 渐变及视觉特效；

• 视口（viewport）管理（用于浏览器内置的缩放支持）；

• Web 应用安装元数据；

• 与原生应用整合；

• 多媒体支持；

• 绘图（矢量图及位图）；

• 支持自定义字体。

我的博客http://www.mobilexweb.com/上有一些关于这些特性的例子及链接。1.5 主要特性

作为一个现代框架，jQuery Mobile 项目始于 2010年 8月，它包含很多适用于多平台开发的模式及最佳实践。这个框架的主要特性有：

• 跨平台、跨设备、跨浏览器；

• 为触屏设备优化过的 UI；

• 设计为可修改主题及自定义；

• 只使用无侵入性的 HTML5 代码，无需了解任何 JavaScript、CSS 或 API 知识；

• 自动调用 AJAX 来加载动态内容；

• 构建于知名及有良好支持的 jQuery 核心之上；

• 轻量级尺寸，压缩后为 12KB；

• 渐进增强；

• 可访问性支持。

我们已经讨论过其中一些特性，现在让我们深入分析一下其他方面。1.5.1 使用非侵入性语义的 HTML5

我知道你急切地想看代码，现在代码来了。jQuery Mobile 使用标准及无侵入性的HTML5创建Web应用，特别适合搜索引擎优化（SEO）以及网站性能优化（WPO）。

jQuery Mobile

theme="b">

• Summary
• The Platform
• The Page
• Lists
• Components

theme="d">

• Links
• Mobile Web Blog

© 2011 Maximiliano Firtman @firt

从图1-6可以看到这个示例在几个移动浏览器上渲染的情况，图1-7则显示了不兼容 jQuery Mobile 的情况。如你所见，代码中没有用于初始化或其他用途的JavaScript代码，只不过包含了几个JavaScript文件。图1-6：上面的jQuery Mobile代码示例在iOS、webOS以及Android设备上的效果图1-7：在不兼容的浏览器上，jQuery Mobile 将降级为一个简单的、功能齐全的HTML 文件不要急，下一章我们就开始分析上面的 jQuery Mobile 代码。1.5.2 渐进增强

渐进增强是一种用于Web设计的简单但非常强大的技术，它定义了几个层次的兼容性，允许所有用户都能访问网站的基本的内容、服务以及功能，同时在那些对标准支持更好的浏览器上提供增强的体验。jQuery Mobile 完全使用这个技术构建。

渐进增强这个术语由 Steven Champeon 在 2003年提出（http://www.hesketh.com），虽然这个技术并不是专门为移动互联网定义的，但它却特别适合移动互联网设计。

渐进增强有以下核心原则：

• 在所有浏览器上都能访问基本内容；

• 在所有浏览器上都能使用基本功能；

• 语义标签包含了所有内容；

• 增强布局由外部链接的 CSS 提供；

• 增强行为由不冲突的、外部链接的 JavaScript 提供；

• 尊重终端用户浏览器的偏好设置。

这个列表看起来是不是像 jQuery Mobile 的特性列表？是的，就是这样。jQuery Mobile应用也能在不支持CSS或JavaScript的入门级的浏览器上工作，这对移动互联网应用来说是一个很好的特性。1.5.3 可访问性支持

维基百科上的定义：

Web可访问性指的是让网站对所有正常人及残疾人都可用的一系列做法。在正确地设计、开发以及编辑的网站上，所有用户都可以平等地访问网站提供的各种信息及功能。

移动浏览器上的 Web 可访问性浪潮才刚刚兴起。不过，jQuery Mobile 已经完全兼容W3C关于浏览器兼容的WAI-ARIA标准（http://www.w3.org/TR/wai-aria/）。在写作本书的时候，还只有带 VoiceOver 特性的 iOS 4.0 或更新版本才兼容这个标准。

因此，在 iPhone、iPod 以及 iPad 上，基于 jQuery Mobile 的 Web 应用都能为有视力障碍的人士提供可访问体验。1.6 测试Web应用

我们提到过，基于 jQuery Mobile 的 Web 应用可以在绝大多数现代桌面浏览器上运行，不过，最好还是能在更精准的环境中进行测试（见图1-8）。

要在不同的环境中测试移动Web应用，可以使用：

• 真实的设备；

• 远程实验室；

• 仿真器；

• 模拟器；[3]

• 大量的朋友 图1-8：在iPad 上测试jQuery Mobile 的可访问性1.6.1 仿真器与模拟器

仿真器与模拟器是最有用的工具。总的来说，仿真器是一个软件，将已编译的代码从原始架构翻译为当前运行平台的代码，让我们能在一个操作系统上运行另一个操作系统及程序。在移动开发的世界里，仿真器是仿真移动设备的硬件及操作系统的桌面程序，可用于测试及调试应用，以及查看应用的工作状况。浏览器甚至操作系统并不会意识到它们正运行在仿真器上，所以相同的代码也能在真实的设备上运行。

我们的移动开发环境中也应该添加一些项目及配置管理的经典工具，如bug追踪、版本管理以及项目管理等工具。图 1-8 显示了如何在 iOS 4.0 或更新版本的 iPhone、iPod 或 iPad 上测试 jQuery Mobile 的可访问性。打开菜单“设置➤通用➤可访问性”并激活VoiceOver，然后闭上眼睛，使用手指及耳朵浏览你的网站。

图1-9展示了一个Android仿真器在桌面上提供完整的Android系统图形化的效果，可用于仿真 Galaxy Tab 或 Nook Color 等平板设备。图1-9：一个Android仿真器

仿真器由厂商开发，向开发者免费提供，有些是独立程序，有些则与开发原生应用的软件开发工具包（SDK）捆绑在一起。

也有一些操作系统仿真器，它们与任何真实的设备硬件无关，只仿真了操作系统。Windows Mobile 和 Android 都有这类仿真器。

另一方面，模拟器则是相对简单的程序，它只模拟设备的一些行为，但不能模拟硬件，也不是基于真实的操作系统设计的。这些工具比较简单，比仿真器用途少。模拟器可能由设备制造商创建，也可能由其他为开发者提供模拟环境的公司提供。在移动浏览方面有一些像素级的模拟器，还有一些则既没有替换桌面浏览器（如Firefox或Safari）的外观，也不模拟渲染引擎。图1-10显示了Mac中免费iOS模拟器提供的iPad模拟。其他平板电脑，包括Windows或Linux桌面机，也有类似的模拟器。图1-10：iOS模拟器

就算使用仿真器，最终渲染效果以及性能也可能和真实设备上不完全一样。因此，使用真实设备来测试是一个不错的做法，即使只在一些重要设备上测试。

对手机网页开发来说，可以找到Nokia、Symbian、BlackBerry、Android、webOS以及 Windows Mobile 的仿真器，还有来自苹果公司的用于 iPhone 和 iPad 的模拟器（不过只能在 Mac OS X 上使用）。

还有一些基于浏览器的仿真器（最终能在许多不同的平台上运行），如 Opera Mobile仿真器。

表1-2列出了可下载的仿真器与模拟器。表1-2：可下载的仿真器与模拟器

最新的仿真器下载链接列表见http://www.mobilexweb.com/emulators。1.6.2 远程实验室

远程实验室是一种Web服务，我们可以远程使用不在同一个物理位置的真实的设备。这是一个简单但强大的解决方案，只需鼠标一点，即可访问世界各地数以千计的连接到真实网络的真实设备。可以把它想象为移动电话的远程桌面。

这个市场上最有用的服务如下：

• Keynote DeviceAnywhere（商业）

http://www.deviceanywhere.com

• Perfecto Mobile（商业）

http://www.perfectomobile.com

• Nokia Remote Device Access for Symbian and MeeGo（免费）

http://www.mobilexweb.com/go/rda

• Samsung Lab.Dev for Android（免费）

http://www.mobilexweb.com/go/labdev

关于这个主题的最新信息见http://www.mobilexweb.com/go/labs。

注　释

[1].译注1：经典科幻电影《回到未来》三部曲中的男主人公。

[2].译注2：类似于包月包流量的套餐计划。

[3].译注3：指让朋友们用自己的手机帮忙测试。第2章框架起步2.1 准备文档

让我们挽起袖子，创建一个典型的 jQuery Mobile Web 应用模板。2.1.1 需求

我们的HTML5文档需要包含：

• jQuery核心JavaScript文件；

• jQuery Mobile 核心 JavaScript 文件；

• jQuery Mobile 核心 CSS 文件；

• jQuery Mobile 主题 CSS 文件（可选）。

另外，对于某些 UI，jQuery Mobile 会使用一系列 PNG 文件，不过不用显式包含它们。还有一个版本的CSS文件同时包含了核心文件和默认主题。

在编码之前，首先要决定的是资源文件的托管。有两个选择：

• 将所有文件托管在项目中；

• 使用 CDN（内容分发网络）；2.1.2 托管文件

如果想将所有文件和Web应用托管在一起，需要从http://jquerymobile.com/download下载最新的ZIP包。该ZIP包的名字中包含框架的版本，例如jQuery. mobile-1.0.zip。

jQuery Moile 包中不含 jQuery 核心，后者需要从 http://jquery.com 下载（推荐下载生产版本）。

jquery.mobile-XX.zip包的结构如下。

• 示例文件夹；

• 图片文件夹；

• jquery.mobile-XX.css；

• jquery.mobile-XX.js；

• jquery.mobile-XX.min.css；

• jquery.mobile-XX.min.js；

• jquery.mobile.structure-XX.css；

• jquery.mobile.structure-XX.min.css。

其中，XX 是版本号，包括发布类型，如：1.1b1 代表 1.1 Beta1 版，1.0rc2 代表 1.0候选版本2，或1.0代表1.0最终版。

程序包里有两类JavaScript/CSS文件，一类文件名中有min后缀，另一类没有。

带min后缀的文件推荐用于生产版本，因为它们已被压缩（去掉了空格、注释以及换行）。如果需要在 jQuery Mobile 中调试，则可使用不带后缀的版本。

jQuery Mobile 1.0 需要 1.6.4 版的 jQuery。不要使用更新的 jQuery，因为可能有兼容问题。如果正在使用新版本的 jQuery Mobile，检查一下它的文档，确定它需要哪个版本的jQuery。

一般情况下，需将下列文件添加到项目的根目录下：

• jquery-XX.js（来自jQuery核心）；

• 图片文件夹；

• jquery.mobile-XX_min.js；

• jquery.mobile-XX_min.css。

如果使用PhoneGap或其他离线/混合机制创建Web应用，那么最好将这些文件嵌入到程序包中，这样Web应用就可以离线工作了。

在本书后面的章节中可以看到，那些带结构名的文件在创建自定义主题时很有用。

jQuery Mobile的许可

jQuery Mobile（以及作为核心的jQuery）是免费的，它们使用MIT或GPL第二版双协议开源。对大多数项目来说，推荐使用MIT协议，无须从我们这儿获得授权。唯一需要注意的是不要删除或修改文件顶部的版权信息。有任何疑问，请参考http://jquery.org/license。

在自己的服务器上托管这些文件时，需要确认服务器端会在客户端支持时启用gzip压缩，这将令jQuery Mobile 的JavaScript 和CSS 传输及加载时间减少80%。如果不知道怎么做，请咨询你的服务器提供商，或者查看http://mobilexweb.com/go/performance。2.1.3 使用CDN

有一个更简单的使用 jQuery Mobile 的方法：使用 CDN（Content Delivery Networks，内容分发网络）。jQuery CDN 是为我们在互联网上托管相关文件的公共服务器。这个方法有优点也有缺点。

最大的缺点是我们的Web应用将只能在公共CDN在线时才能工作。当然，它们正是为此而建的，会竭尽所能地保证每周24小时不间断服务。不过，有些项目不能依赖第三方服务，如离线Web应用。

使用 jQuery Mobile 创建混合或原生应用（如 PhoneGap 应用）时，不应该使用CDN。如果设备掉线了，甚至连用框架显示一个友好的警告都做不到。创建HTML5离线Web应用时，如果已将CDN文件加入了应用程序清单（manifest），则可以使用CDN。

使用CDN的主要优点如下。

• 不用下载，马上就可使用 jQuery Mobile。

• 你的服务器分发的文件更少，从而节约带宽。

• Web 应用将从缓存中受益：如果用户曾访问过另外的使用同一个 CDN 上的jQuery MobileWeb 应用，那么他的浏览器缓存可能已经有所有相关资源了。

• 对大多数共享主机来说，jQuery Mobile 资源从 CDN 下载会更快。

• Web 应用的性能将从不同的域名中受益。

• 对有些 CDN 来说，链接到一个地址时总是返回最新的版本。不过，有时我们并不推荐这种特性，因为如果没测试，你永远不会知道你的Web应用在新版本的框架下会有什么表现。

本书中没有关于移动浏览器 WPO（Web Performance Optimization，网站性能优化）的内容。如果想了解更多相关信息，请访问http://www.mobilexweb.com/go/performance 并订阅 Steve Souders 的博客 http://stevesouders.com。

对jQuery核心来说，有一些可选择的CDN：

• 官方 jQuery CDN；

• 微软 jQuery CDN（http://www.asp.net/ajaxlibrary/CDN.ashx）；

• Google AJAX 库接口（http://code.google.com/apis/libraries/）。

写作本书的时候，官方 jQuery CDN 和微软 CDN 都托管了 jQuery Mobile 的文件。

使用CDN真的很简单，只需复制粘贴对应的JavaScript或CSS外部文件的URL就完成了。

在http://jquerymobile.com/download/可以看到一个可直接复制粘贴使用的代码片断，看起来像这样：

如果使用自己的主题（后面的章节中有介绍），则需要使用下面的代码：

如上所示，只需引入三个托管在code.jquery.com的压缩版外部资源即可，不需要下载图片、CSS或JavaScript代码等东西即可开始使用。记得检查下网站上可用的最新版本。

最新构建版本

如果希望总是使用最新版的 jQuery Mobile，jQuery CDN 也提供了对应资源，可直接嵌入代码。记住，这些版本会自动更新，所以尽管你的代码现在能正常工作，但未来却可能出现问题。这个选择一般用于开发或测试，不要忘了，它可能包含不稳定的开发代码。

使用最新构建版本的代码如下：

试读结束[说明：试读内容隐藏了图片]

下载完整电子书