作者：陶国荣
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
jQueryMobile权威指南试读：
前言
创作背景
在近几年的IT行业发展中，最热、最快的无疑是移动互联网，它是继互联网之后的又一次信息技术革命。移动互联网巨大的市场潜力创造了无限商机，人们纷纷加入其中，各种与之相应的新技术、新应用层出不穷。
移动应用离不开移动终端设备，如PC、手机、平板电脑等。据估算，到今年年底，市场中各类型智能手机的出货量将突破1.4亿台，应用的前景十分乐观。目前，移动应用的开发平台大体分为三个方向，一个是收益稳定的iOS系统，另一个是如日中天的Android系统，还有一个是蓄势待发的Windows Phone系统。丰富的开发平台增加了开发人员选择的灵活性，但同时也带了一个问题，就是应用平台的兼容性，而这种兼容性目前在各平台中是不可调和的。因此，一个应用需要开发三个不同平台的版本，这种现状将直接导致应用开发和后期维护成本的上升。针对目前的这种多平台现状，如果以Web作为统一的平台、浏览器作为应用的入口，即以WebApp的方式实现相应的应用，将大大简化开发过程和减少应用投入成本，这点也逐渐成为广大Web开发者的共识。
虽然WebApp开发应用将会成为移动开发的一个主方向，但移动设备中浏览器的运行环境远比PC端更为复杂，因此，使用原有的页面框架远不能解决各类型移动设备中浏览器的兼容性问题，必须引入其他轻量级、高性能的Web页面框架。而在这方面，jQuery Mobile在众多移动页面开发框架中脱颖而出，成为众多开发者的首选。
jQuery Mobile的宗旨是在各移动设备的浏览器平台中形成一个统一、灵活、渐进增强的系统，并使该系统在基于jQuery和jQuery UI的基础上进行无缝地工作。它的简略之处在于以纯HTML结构为中心的布局，页面放置DIV和其他标准的HTML组件元素，这种结构方式更容易集成其他的Web服务，同时，与jQuery的集成也将更加有利于移动框架的扩展。
jQuery Mobile除继承了jQuery轻量级、兼容性好的框架主要特征外，还把"write less, do more"主旨提升到更高的一个层次，使开发者在学习和开发成本较低的前提下开发一个兼容各种主流移动平台浏览器的WebApp的愿望成为现实。
作为一项新的技术，jQuery Mobile虽然建立在jQuery和jQuery UI基础之上，以HTML 5新特征为依据，但其中包括众多的页面结构、UI部件、主题和各类型的API，开发人员需要相应的书籍来引导以快速而高效地学习并掌握它，并最终能够真正运用到自己钟爱的移动项目中。相信本书的诞生，一定会让你在WebApp开发方面有所得、有所悟。
本书特点
“学以致用”是本书的一个重要特点。全书始终体现一个“用”字，无论是理论知识的介绍，还是实例的开发，无一例外都是从实用的角度出发，每一个实例都是经过精心选择，每一个示意图都是作者精心编排并进行扼要说明，使读者通过直观的页面效果加深对应用的理解。全书以实例为主线，由浅入深，逐步推进，通过全面、详细和完整地介绍，不但能够激发读者的阅读兴趣，还能使读者迅速地掌握jQuery Mobile的页面布局和API用法。
如何阅读本书
全书从一个普通移动页面开发者的角度，详细地介绍了关于jQuery Mobile所涉及的全部新组件与API的用法。全书共10章，整体框架分为三个部分：
第一部分（第1～5章）为jQuery Mobile基础知识。包括初识jQuery Mobile、页面与对话框、工具栏与格式化内容、页面常用组件、jQuery Mobile主题。
第二部分（第6～7章）为jQuery Mobile插件和API介绍。详细介绍了jQuery Mobile的各种插件的使用方法，以及jQuery Mobile API的应用。
第三部分（第8～10章）为jQuery Mobile实践技巧与案例开发。系统地讲解了jQuery Mobile开发的技巧与方法，并通过两个完整的案例，将本书的理论应用于实际的开发中，使读者能够做到学以致用。
本书针对的是Web开发者，无论是前端开发还是后台程序，都可以使用本书。本书的结构是层进式的，章节之间有一定的关联，因此，建议读者按章节的编排，逐章阅读。在阅读过程中，尽量不要照抄实例，重点是理解核心代码，自己动手开发相似功能的应用，并逐步完善其功能，这样才能真正掌握其代码的实质。
勘误和支持
希望这部历时半年、积累我个人心得与技术感悟的拙著能给读者带来移动开发思路上的启发与技术上的提升，使每位读者通过本书能够有所悟或有所得。同时，也非常希望能借本书出版之机与国内热衷于WebApp移动开发技术的开发者进行交流。
除封面署名作者外，参加本书编写工作的还有：刘义、李建洲、李静、裴星如、李建勤、陶红英、陈建平、孙文华、孙义、陶林英、闵慎华、孙芳、赵刚。由于作者的水平有限、编写时间仓促，书中难免会出现一些错误或者不准确之处，恳请读者批评指正。书中的全部[1]源代码文件可以从华章网站下载。如果您有更多的宝贵意见，也欢迎发送邮件至邮箱tao_guo_rong@163.com，期待能够得到大家真挚的反馈。
致谢
本书的出版首先要感谢机械工业出版社华章分社的编辑们，尤其是杨福川与白宇编辑，正是由于他们的斧正点拨和全程指导，才使本书的创作思路不断提升、案例框架不断优化，并最终顺利完稿。另外，还要感谢我的家人，正是由于他们的理解与默默支持，使我全心写作，顺利完成本书的编写。陶国荣2012年6月
[1]华章网站：www.hzbook.com——编辑注第1章初识jQuery Mobile本章内容jQuery Mobile简介如何获取jQuery MobilejQuery Mobile应用开发迅速上手本章小结在当前的网络应用中，最热的莫过于移动互联网的产品，特别是随着HTML 5的渐进发展、3G网络的逐步成熟、其他互联网应用的日趋饱和，移动互联网将代表下一阶段互联网发展的一个方向。许多可供移动设备终端下载的应用，无须下载或升级，直接通过浏览器登录即可使用。如果通过移动设备终端的浏览器登录网站直接使用产品或应用，那么，面临的最大问题就是各移动终端设备浏览器的兼容性，这些浏览器的种类比传统的PC端还要多，且调试更为复杂。解决这些兼容性问题、开发出一个可以跨移动平台的应用，需要引入一个优秀、高效的Web脚本框架——jQuery Mobile。确切来说，jQuery Mobile是专门针对移动终端设备的浏览器开发的Web脚本框架，它基于强悍的jQuery和jQuery UI基础之上，统一用户系统接口，能够无缝隙运行于所有流行的移动平台之上，并且易于主题化地设计与建造，是一个轻量级的Web脚本框架。它的出现，打破了传统JavaScript对移动终端设备的脆弱支持的局面，使开发一个跨移动平台的Web应用真正成为可能。本书所有实例使用的jQuery Mobile框架都是基于近期最新发布的1.0.1版本，而jQuery框架为1.6.4版本。接下来将通过本书各章节的介绍，逐步带领大家进入jQuery Mobile的精彩世界。1.1 jQuery Mobile简介
jQuery是一个非常流行的Web程序开发时使用的JavaScript类库，但它只是为PC端的浏览器而设计的。在移动互联网中为了满足浏览器更好地运行Web程序的需求，在基于jQuery与jQuery UI的基础之上，推出了jQuery Mobile这套框架，其主旨就是在进行移动项目开发的过程中，为开发者提供统一的接口与特征，依靠强大的jQuery类库，节省JavaScript代码的开发时间，提高项目开发的效率。1.1.1 功能特点
jQuery Mobile为开发移动应用程序提供十分简单的应用接口，而这些接口的配置则是由标记驱动的，开发者在HTML页中无须使用任何JavaScript代码，就可以建立大量的程序接口。使用页面元素标记驱动是jQuery Mobile仅是它众多特点之一，概括而言，它具有如下特点：
特点1 强大的AJAX驱动导航
无论页面数据的调用还是页面间的切换，都是采用AJAX进行驱动的，从而保持了动画转换页面的干净与优雅。
特点2 以jQuery与jQuery UI为框架核心
jQuery Mobile的核心框架是建立在jQuery基础之上的，并且利用了jQuery UI的代码与运用模式，使熟悉jQuery语法的开发者能通过最小的学习曲线迅速掌握。
特点3 强大的浏览器兼容性
jQuery Mobile继承了jQuery的兼容性优势，目前所开发的应用兼容于所有主要的移动终端浏览器，使用开发者集中精力做功能开发，而不需要考虑复杂的浏览兼容性问题。
特点4 框架轻量级
目前jQuery Mobile最新的稳定版本为1.0.1，压缩后的体积大小为24KB，与之相配套的CSS文件压缩后的体积大小为6KB，框架的轻量级将大大加快程序执行时的速度。
特点5 支持触摸与其他鼠标事件
jQuery Mobile提供了一些自定义的事件，用来侦测用户的移动触摸动作，如tap（单击）、tap-and-hold（单击并按住）、swipe（滑动）等事件，极大提高了代码开发的效率。
特点6 强大的主题化框架
借助于主题化的框架和ThemeRoller应用程序，jQuery Mobile可以快速地改变应用程序的外观或自定义一套属于产品自身的主题，有助于树立应用产品的品牌形象。1.1.2 支持平台
目前jQuery Mobile 1.0.1版本支持绝大多数的台式机、智能手机、平板和电子阅读器的平台，此外，对有些不支持的智能手机与旧版本的浏览器，通过渐进增强的方法，将逐步实现能够完全支持。下面通过一个分级的支持系统，详细说明各浏览器对jQuery Mobile 1.0.1的支持状况。
A（最优）
苹果iOS 3.2～5.0-最早的iPad（4.3/5.0）、iPad 2（4.3），最早的iPhone（3.1）、iPhone 3（3.2）、iPhone 3GS（4.3）和iPhone 4（4.3/5.0）
安卓2.1～2.3-HTC（2.2）、最早的Droid（2.2）、Nook Color（2.2）、HTC Aria（2.1）、谷歌Nexus S（2.3）
安卓Honeycomb-三星Galaxy Tab 10.1和摩托罗拉XOOM
Windows Phone 7～7.5-HTC Surround（7.0）、HTC Trophy（7.5）和LG-E900（7.5）
黑莓6.0-Torch 9800和Style 9670®
黑莓7-BlackBerryTorch 9810
黑莓Playbook-PlayBook版本1.0.1/1.0.5
Palm WebOS（1.4～2.0）-Palm Pixi（1.4）、1.4前版本（1.4）、2.0前版本（2.0）
Palm WebOS 3.0-HP触摸板
Firebox Mobile（Beta）-安卓2.2
Opera Mobile 11.0-安卓2.2
Meego 1.2-Nokia 950和N9机型
Kindle 3和Fire-内置的每个WebKit浏览器
Chrome（11～15）桌面浏览器-基于OS X 10.6.7和Windows 7操作系统
Firefox（4～8）桌面浏览器-基于OS X 10.6.7和Windows 7操作系统
Internet Explorer（7～9）-Windows XP、Vista和Windows 7（有轻微的CSS错误）
Opera（10～11）桌面浏览器-基于OS X 10.6.7和Windows 7操作系统
B（良好）
黑莓5.0-Storm 2 9550和Bold 9770
Opera Mini（5.0～6.0）-基于iOS 3.2/4.3操作系统
诺基亚Symbian^3-诺基亚N8（Symbian^3）、C7（Symbian^3）、N97（Symbian^1）机型
C（较差）
黑莓4.x-Curve 8330
Windows Mobile-HTC Leo（WInMo 5.2）
所有版本较老的智能手机平台将都不支持
说明 浏览支持系统为三个级别，分别为A、B、C。A级表示完全基于AJAX的动画页面转换增加的体验效果，代表最优；B级表示仅是除了没有AJAX的动画页面转换增加的体验效果，其他都可以很好地支持，代表良好；C级表示能够支持实现基本的功能，没有体验效果，代表较差。1.1.3 与jQTouch、Sencha Touch、SproutCore的比较
移动Web开发有易于上手、开发周期相对短以及可以自动更新等众多的优点，因此，除jQuery Mobile外，还有很多框架可支持开发Web应用，如jQTouch、Sencha Touch、SproutCore等。那它们与jQuery Mobile有什么区别呢？接下来我们进行详细说明。
1.jQTouch
jQTouch与jQuery Mobile十分相似，也是一个jQuery插件，同样也支持HTML页面标签驱动，实现移动设备视图切换效果。但与jQuery Mobile不同在于，它是专为WebKit内核的浏览器打造的，可以借助该浏览器的专有功能对页面进行渲染；此外，开发时所需的代码量更少。如果所开发的项目中，目标用户群都使用WebKit内核的浏览器，可以考虑此框架。
官方下载地址：http://www.jqtouch.com/
2.Sencha Touch
Sencha Touch是一套基于ExtJS开发的插件库。它与jQTouch相同，也是只针对WebKit内核的浏览器开发移动应用，拥有众多效果不错的页面组件和丰富的数据管理，并且全部基于最新的HTML 5与CSS 3的Web标准。与jQuery Mobile不同之处在于，它的开发语言不是基于HTML标签，而是类似于客户端的MVC风格编写JavaScript代码，相对来说，学习周期较长。
官方下载地址：http://www.sencha.com/products/touch/
3.SproutCore
SproutCore同样也是一款开源的JavaScript框架，以少量的代码开发强大的Web应用。开始仅用于桌面浏览器的应用开发，后来，由于功能强大，许多知名的厂商也纷纷使用它来开发移动Web应用。但与jQuery Mobile相比，SproutCore对一些主流终端浏览的支持还有许多不足之处，如屏幕尺寸略大，开发代码相对复杂些。
官方下载地址：http://www.sproutcore.com/1.2 如何获取jQuery Mobile
想在浏览器中正常运行一个jQuery Mobile移动应用页面，需要先获取与jQuery Mobile相关的插件文件。其获取的方法有两种，分别为下载相关插件文件和使用URL方式加载相应文件。1.2.1 下载插件文件
要运行jQuery Mobile移动应用页面需要包含3个文件，分别为：
jQuery-1.6.4.min.js：jQuery主框架插件，目前稳定版本为1.6.4；
jQuery.Mobile-1.0.1.min.js：jQuery Mobile框架插件，目前最新版本为1.0.1；
jQuery.Mobile-1.0.1.min.css：与jQuery Mobile框架相配套的CSS样式文件，最新版本为1.0.1。
登录jQuery Mobile官方网站（http://jquerymobile.com），单击导航条中的"Download"链接进入文件下载页面，如图1-1所示。图 1-1 jQuery Mobile资源下载页
在图1-1的jQuery Mobile下载页中，可以下载上述3个必需文件中的任意一个，也可以单击下载地址（http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.zip），获取jQuery Mobile页面执行所需的全部文件（包含压缩前后的JavaScript与CSS样式）和实例文件。1.2.2 使用URL方式加载插件文件
除在jQuery Mobile下载页下载对应文件外，jQuery Mobile还提供了URL方式从jQuery CDN下载插件文件。CDN的全称是Content Delivery Network，用于快速下载跨Internet常用的文件，只要在页面的＜head＞元素中加入下列代码，同样可以执行jQuery Mobile移动应用页面。加入的代码如下所示：
＜link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"/＞
＜script src="http://code.jquery.com/jquery-1.6.4.min.js"＞＜/script＞
＜script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"＞＜/script＞
通过URL加载jQuery Mobile插件的方式使版本的更新更加及时，但由于是通过jQuery CDN服务器请求的方式进行加载，在执行页面时必须时时保证网络的畅通，否则，不能实现jQuery Mobile移动页面的效果。1.3 jQuery Mobile应用开发迅速上手
jQuery Mobile的工作原理是：提供可触摸的UI小部件和AJAX导航系统，使页面支持动画式切换效果。以页面中的元素标记为事件驱动对象，当触摸或单击时进行触发，最后在移动终端的浏览器中实现一个个应用程序的动画展示效果。
与开发桌面浏览中的Web页面相似，构建一个jQuery Mobile页面也十分容易。jQuery Mobile通过＜div＞元素组织页面结构，根据元素的"data-role"属性设置角色。每一个拥有"data-role"属性的＜div＞元素就是一个容器，它可以放置其他的页面元素。接下来通过一个简单实例详细介绍如何开发第一个jQuery Mobile页面。
实例1-1 Hello World页面的实现
1.功能说明
使用HTML 5结构编写一个jQuery Mobile页面，在页面中输出"Hello World！"字样。
2.实现代码
新建一个HTML页面1-1.htm，加入代码如代码清单1-1所示。
代码清单1-1 Hello World页面的实现
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞jQuery Mobile应用程序＜/title＞
＜meta name="viewport" content=" width=device-width,initial-scale=1"/＞
＜link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css"/＞
＜script src="Js/jquery-1.6.4.js" type="text/javascript"＞＜/script＞
＜script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"＞＜/script＞
＜/head＞
＜body＞
＜div id="page1" data-role="page"＞
＜div data-role="header"＞＜h1＞jQuery Mobile＜/h1＞＜/div＞
＜div data-role="content" class="content"＞
＜p＞Hello World!＜/p＞
＜/div＞
＜div data-role="footer"＞＜h1＞荣拓工作室版权所有＜/h1＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
3.页面效果
为了更好地在PC端浏览jQuery Mobile页面在移动终端的执行效果，可以下载Opera公司的移动模拟器Opera Mobile Emulator，下载地址：http://cn.opera.com/developer/tools/mobile/，目前最新的版本为12.0。本书全部的页面效果都在Opera Mobile Emulator 12.0中演示。
该页面在Opera Mobile Emulator 12.0下执行的效果如图1-2所示。图 1-2 Hello World页面
4.源码分析
在页面代码的＜head＞头部元素中，先通过＜meta＞标记的"content"属性设置页面的宽度与模拟器的宽度一致，以保证页面可以在浏览器中完全填充；接下来，导入了三个框架性文件，需要注意它们导入时的顺序。
在代码的＜body＞主体元素中，通过多个＜div＞元素进行层次的划分。因为在jQuery Mobile中每个＜div＞元素都是一个容器，根据指定的"data-role"属性值，确定容器对应的身份，如果属性"data-role"的值为"header"，则该＜div＞元素的为头部区域。
"data-role"属性是HTML 5的一个新特征，通过设置该属性，jQuery Mobile就可以很快地定位到指定的元素，并对内容进行相应的处理。
由于jQuery Mobile已经全面支持HTML 5结构，因此，＜body＞主体元素的代码也可以修改为以下代码：
＜section id="page1" data-role="page"＞
＜header data-role="header"＞＜h1＞jQuery Mobile＜/h1＞＜/header＞
＜div data-role="content" class="content"＞
＜p＞Hello World!＜/p＞
＜/div＞
＜footer data-role="footer"＞＜h1＞荣拓工作室版权所有＜/h1＞＜/footer＞
＜/section＞
上述代码执行后的效果与修改前完全相同。
实例1-2 多页面的切换
通过实例1-1可以知道，在jQuery Mobile中，如果将页面元素的"data-role"属性值设置为"page"，则该元素成为一个容器，即页面的某块区域。在一个页面中，可以设置多个元素成为容器，虽然元素的"data-role"属性值都为"page"，但它们对应的Id号不允许相同。
在jQuery Mobile中，将一个页面中的多个容器当作多个不同的页面，它们之间的界面切换是通过增加一个＜a＞元素、并将该元素的"href"属性值设为“#”加对应Id号的方式来进行。下面通过一个简单实例来说明多页面切换实现的过程。
1.功能说明
使用HTML 5结构编写一个jQuery Mobile页面，在页面中设置两个"page"区域，当单击第一个区域中的“详细页”链接时，进入第二个区域；在第二个区域中，单击“返回首页”链接时，则切换至第一个区域。
2.实现代码
新建一个HTML页面1-2.htm，加入代码如代码清单1-2所示。
代码清单1-2 多页面的切换
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞jQuery Mobile应用程序＜/title＞
＜meta name="viewport" content=" width=device-width,initial-scale=1"/＞
＜link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css"/＞
＜script src="Js/jquery-1.6.4.js" type="text/javascript"＞＜/script＞
＜script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"＞＜/script＞
＜/head＞
＜body＞
＜section id="page1" data-role="page"＞
＜header data-role="header"＞＜h1＞jQuery Mobile＜/h1＞＜/header＞
＜div data-role="content" class="content"＞
＜p＞这是首页＜/p＞
＜p＞＜a href="#page2"＞详细页＜/a＞＜/p＞
＜/div＞
＜footer data-role="footer"＞＜h1＞荣拓工作室版权所有＜/h1＞＜/footer＞
＜/section＞
＜section id="page2" data-role="page"＞
＜header data-role="header"＞＜h1＞jQuery Mobile＜/h1＞＜/header＞
＜div data-role="content" class="content"＞
＜p＞这是详细页＜/p＞
＜p＞＜a href="#page1"＞返回首页＜/a＞＜/p＞
＜/div＞
＜footer data-role="footer"＞＜h1＞荣拓工作室版权所有＜/h1＞＜/footer＞
＜/section＞
＜/body＞
＜/html＞
3.页面效果
该页面在Opera Mobile Emulator 12.0下执行的效果如图1-3所示。图 1-3 多页面间的切换
4.源码分析
在jQuery Mobile中，针对一个页面中多个"page"区域间的切换称为内链接，其方式为添加一个＜a＞元素，并将该元素的"href"属性值设置为“#”加对应"Id"形式，如下所示：
＜a href="#page2"＞详细页＜/a＞
上述代码表示，单击“详细页”链接时，将切换到Id号为"page2"的区域中。除内链接外，还有一个外链接。所谓外链接指的是通过单击页面中的某个链接，跳转到另外一个页面中，而不是在同一个页面间的切换。其实现的方式与内链接相同，只是在＜a＞元素中增加了另外一个"rel"属性，并将该属性值设置为"external"表示外链接，如下所示：
＜a href="a1.htm" rel="external"＞详细页＜/a＞
上述代码表示，单击“详细页”链接时，将跳转至文件名为a1的HTML页面。在页面切换过程中，无论是内链接还是外链接，jQuery Mobile都支持动画的效果，只需要在切换的＜a＞元素中，添加一个"data-transition"属性，并选择某种属性值即可，如下所示：
＜a href="a1.htm" rel="external" data-transition="pop"＞详细页＜/a＞
上述代码表示，单击“详细页”链接时，将以弹出的动画效果跳转至文件名为"a1"的HTML页面。更多＜a＞元素的"data-transition"属性值如表1-1所示。
说明 当页面进行切换时，切换前的页面将自动隐藏，链接的区域或页面自动展示在当前页面中。如果是内链接，仅显示指定Id号并且"data-role"属性值为"page"的区域，其他范围都隐藏。1.4 本章小结
本章先从功能特点、支持平台方面对jQuery Mobile进行详细介绍，然后介绍jQuery Mobile的获取方法与工作原理，最后通过两个简单完整的开发实例的介绍，使读者对jQuery Mobile开发移动应用程序有一个初步的了解，为下一章的学习奠定基础。第2章页面与对话框本章内容jQuery Mobile页面结构预加载与页面缓存页面的脚本对话框本章小结在第1章中，我们通过两个简单实例的介绍，初步了解了jQuery Mobile的工作原理和执行流程，本章将继续深入剖析jQuery Mobile的页面结构。从页面结构上来说，jQuery Mobile可以支持单个页面和一个页面中的多个"page"容器。这种结构模型的好处在于，可以使普通的链接标记不需要任何复杂配置就可以优雅地工作，并且可以很方便地使一些富媒体应用本地化。另外，在jQuery Mobile页面中，通过AJAX功能可以很方便地自动读取外部页面，支持使用一组动画的效果进行页面间的相互切换；也可以通过调用对应的脚本函数，实现预加载、缓存、创建、跳转页面的功能；同时，支持将页面以对话框的形式展示在移动终端的浏览器中。接下来我们逐一进行详细的介绍。2.1 jQuery Mobile页面结构
jQuery Mobile的许多功能效果需要借助于HTML 5的新增标记和属性，因此，页面必须以HTML 5的声明文档开始，在＜head＞标记中分别依次导入jQuery Mobile的样式文件、jQuery基础框架文件和jQuery Mobile插件文件，下面看一个jQuery Mobile的基本页面结构。2.1.1 基本框架
在jQuery Mobile中，有一个基本的页面框架模型，就是在页面中通过将一个＜div＞标记的"data-role"属性设置为"page"，形成一个容器或视图；而在这个容器中最直接的子节点应该就是"data-role"属性为"header"、"content"、"footer"3个子容器，分别形成了“标题”、“内容”、“页脚”3个组成部分，用于容纳不同的页面内容。接下来通过一个简单实例进行展示。
实例2-1 jQuery Mobile基本的页面框架
1.功能说明
创建一个jQuery Mobile的基本框架页，并在页面组成部分中分别显示其对应内容名称。
2.实现代码
新建一个HTML页面2-1.htm，加入代码如代码清单2-1所示。
代码清单2-1 jQuery Mobile基本页面框架
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞jQuery Mobile基本页面框架＜/title＞
＜meta name="viewport" content=" width=device-width, initial-scale=1"/＞
＜link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css"/＞
＜script src="Js/jquery-1.6.4.js" type="text/javascript"＞＜/script＞
＜script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"＞＜/script＞
＜/head＞
＜body＞
＜div data-role="page"＞
＜div data-role="header"＞＜h1＞标题＜/h1＞＜/div＞
＜div data-role="content"＞＜p＞内容部分＜/p＞＜/div＞
＜div data-role="footer"＞＜h4＞页脚＜/h4＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
3.页面效果
该页面在Opera Mobile Emulator 12.0下执行的效果如图2-1所示。图 2-1 jQuery Mobile基本页面展示
4.源码分析
本实例源码中，为了更好地支持HTML 5的新增加功能与属性，第一行以HTML 5的声明文档开始，即添加如下代码：
＜!DOCTYPE html＞
在＜head＞元素中添加一个名称为"viewport"的＜meta＞元素，并设置该元素的"content"属性，代码如下所示：
＜meta name="viewport" content=" width=device-width, initial-scale=1"/＞
这行代码的功能是：设置移动设备中浏览器缩放的宽度与等级。通常情况下，移动设备的浏览器默认以"900px"的宽度显示页面，这种宽度会导致屏幕缩小，页面放大，不适合浏览。如果在页面中添加＜meta＞元素，并设置"content"的属性值为"width=device-width, initial-scale=1"，可以使页面的宽度与移动设备的屏幕宽度相同，更加适合用户浏览。
在接下来的＜body＞元素中，将第一个＜div＞元素的"data-role"属性设置为"page"，形成一个容器；然后，在容器中分别添加3个＜div＞元素，依次将"data-role"属性设置为"header"、"content"、"footer"，从而形成了一个标准的jQuery Mobile页面框架。详细实现过程如代码中加粗部分所示。2.1.2 多容器页面结构
在一个供jQuery Mobile使用的HTML页面中，可以包含一个元素属性"data-role"值为"page"的容器，也允许包含多个，从而形成多容器页面结构。容器之间各自独立，拥有唯一的Id号属性。页面加载时，以堆栈的方式同时加载；容器访问时，以内部链接“#”加对应"Id"的方式进行设置。单击该链接时，jQuery Mobile将在页面文档寻找对应Id号的容器，以动画效果切换至该容器中，实现容器间内容的访问。
实例2-2 jQuery Mobile多容器间的切换
1.功能说明
新建一个HTML页面，并在页面中添加2个"data-role"属性为"page"的＜div＞元素，作为2个页面容器。用户在第一个容器中选择需要查看天气预报的日期，单击某天后，切换至第二个容器，显示所选日期的详细天气情况。
2.实现代码
新建一个HTML页面2-2.htm，加入代码如代码清单2-2所示。
代码清单2-2 jQuery Mobile多容器间的切换
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞jQuery Mobile多容器页面结构＜/title＞
＜meta name="viewport" content=" width=device-width, initial-scale=1"/＞
＜link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css"/＞
＜script src="Js/jquery-1.6.4.js" type="text/javascript"＞＜/script＞
＜script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"＞＜/script＞
＜/head＞
＜body＞
＜div data-role="page"＞
＜div data-role="header"＞＜h1＞天气预报＜/h1＞＜/div＞
＜div data-role="content"＞
＜p＞＜a href="#w1"＞今天＜/a＞|＜a href="#"＞明天＜/a＞＜/p＞
＜/div＞
＜div data-role="footer"＞＜h4＞©2012 rttop.cn studio＜/h4＞＜/div＞
＜/div＞
＜div data-role="page" id="w1" data-add-back-btn="true"＞
＜div data-role="header"＞＜h1＞今天天气＜/h1＞＜/div＞
＜div data-role="content"＞
＜p＞4～-7℃＜br/＞晴转多云＜br/＞微风＜/p＞
＜/div＞
＜div data-role="footer"＞＜h4＞©2012 rttop.cn studio＜/h4＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
3.页面效果
该页面在Opera Mobile Emulator 12.0下执行的效果如图2-2所示。图 2-2 页面中多容器间的切换
4.源码分析
在本实例页面中，从第一个容器切换至第二个容器时，采用的是“#”加对应"Id"的内部链接方式。因此，在一个页面中，不论相同框架的"page"容器有多少，只要对应的Id号唯一，就可以通过内部链接的方式进行容器间的切换。在切换时，jQuery Mobile会在文档中寻找对应"Id"的容器，然后通过动画的效果切换到该页面中。
从第一个容器切换至第二个容器后，如果想要从第二个容器返回第一个容器，有下列两种方法：
在第二个容器中，增加一个＜a＞元素，通过内部链接“#”加对应"Id"的方式返回第一个容器。
在第二个容器的最外层框架＜div＞元素中，添加一个"data-add-back-btn"属性。该属性表示是否在容器的左上角增加一个“回退”按钮，默认值为"false"；如果设置为"true"，将出现一个"back"按钮，单击该按钮，回退上一级的页面显示。
说明 如果是在一个页面中，通过“#”加对应"Id"的内部链接方式，可以实现多容器间的切换；但如果不是在一个页面，此方法将失去作用。因为在切换过程中，先需要找到页面，再去锁定对应"Id"容器的内容，而并非直接根据"Id"切换至容器中。2.1.3 外部页面链接
虽然在一个页面中，可以借助容器的框架实现多种页面的显示，但是，把全部代码写在一个页面中会延缓页面被加载的时间，使代码冗余，且不利于功能的分工与维护的安全性。
因此，在jQuery Mobile中，可以采用开发多个页面并通过外部链接的方式，实现页面相互切换的效果。下面通过一个简单的实例来介绍它是如何实现的。
实例2-3 jQuery Mobile外部页面链接切换
1.功能说明
在实例2-2的基础上，在Id号为"w1"的第二个容器中添加一个＜em＞元素。在该元素中显示“rttop.cn提供”字样。单击"rttop.cn"文本链接时，将以外部页面链接的方式加载一个名为"about.htm"的HTML页面。
2.实现代码
新建一个HTML页面2-3.htm，加入代码如代码清单2-3所示。
代码清单2-3 jQuery Mobile外部页面链接切换
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞jQuery Mobile外部页面链接＜/title＞
＜meta name="viewport" content=" width=device-width, initial-scale=1"/＞
＜link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css"/＞
＜script src="Js/jquery-1.6.4.js" type="text/javascript"＞＜/script＞
＜script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"＞＜/script＞
＜/head＞
＜body＞
＜div data-role="page"＞
＜div data-role="header"＞＜h1＞天气预报＜/h1＞＜/div＞
＜div data-role="content"＞
＜p＞＜a href="#w1"＞今天＜/a＞|＜a href="#"＞明天＜/a＞＜/p＞
＜/div＞
＜div data-role="footer"＞＜h4＞©2012 rttop.cn studio＜/h4＞＜/div＞
＜/div＞
＜div data-role="page" id="w1" data-add-back-btn="true"＞
＜div data-role="header"＞＜h1＞今天天气＜/h1＞＜/div＞
＜div data-role="content"＞
＜p＞4～-7℃＜br/＞晴转多云＜br/＞微风＜/p＞
＜em style="foat:right;padding-right:5px"＞
＜a href="about.htm"＞rttop.cn＜/a＞提供
＜/em＞
＜/div＞
＜div data-role="footer"＞＜h4＞©2012 rttop.cn studio＜/h4＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
另外，新建一个用于外部链接的HTML页面about.htm，加入以下代码：
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞关于rttop＜/title＞
＜meta name="viewport" content=" width=device-width"/＞
＜/head＞
＜body＞
＜div data-role="page" data-add-back-btn="true"＞
＜div data-role="header"＞＜h1＞关于rttop＜/h1＞＜/div＞
＜div data-role="content"＞
＜p＞＆nbsp;＆nbsp;＆nbsp;
rttop.cn是一家新型高科技企业，正在努力实现飞翔的梦想。
＜/p＞
＜/div＞
＜div data-role="footer"＞＜h4＞©2012 rttop.cn studio＜/h4＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
3.页面效果
该页面在Opera Mobile Emulator 12.0下执行的效果如图2-3所示。图 2-3 外部页面链接的切换效果
4.源码分析
在jQuery Mobile中，如果单击一个指向外部页面的超级链接（如about.htm），jQuery Mobile将自动分析该URL地址，自动产生一个AJAX请求。在请求过程中，会弹出一个显示进度的提示框。如果请求成功，jQuery Mobile将自动构建页面结构，注入主页面的内容；同时，初始化全部的jQuery Mobile组件，将新添加的页面内容显示在浏览器中；如果请求失败，jQuery Mobile将弹出一个错误信息提示框，数秒后该提示框自动消失，页面也不会刷新。
如果不想采用AJAX请求的方式打开一个外部页面，只需要在链接元素中将"rel"属性设置为"external"，该页面将脱离整个jQuery Mobile的主页面环境，以独自打开的页面效果在浏览器中显示。
说明 如果采用AJAX请求的方式打开一个外部页面，注入主页面的内容也是以"page"为目标，"page"以外的内容将不会被注入主页面中；另外，必须确保外部加载页面URL地址的唯一性。2.1.4 页面后退链接
上一节介绍了将"page"容器的"data-add-back-btn"属性设置为"true"可以后退至上一页，在jQuery Mobile页面中，还可以添加一个＜a＞元素，将该元素的"data-rel"属性设置为"back"，同样可以实现后退至上一页的功能。因为一旦该链接元素的"data-rel"属性设置为"back"，单击该链接将被视为后退行为，并且将忽视"href"属性的URL值，直接退回至浏览器历史的上一页面。
实例2-4 jQuery Mobile页面后退链接
1.功能说明
在新建的HTML中，添加2个"page"容器，当单击第一个容器中的“测试后退链接”链接时，切换到第二个容器；单击第二个容器中的“返回首页”链接时，将以回退的方式返回到第一个容器中。
2.实现代码
新建一个HTML页面2-4.htm，加入代码如代码清单2-4所示。
代码清单2-4 jQuery Mobile页面后退链接
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞jQuery Mobile页面后退链接＜/title＞
＜meta name="viewport" content=" width=device-width, initial-scale=1"/＞
＜link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css"/＞
＜script src="Js/jquery-1.6.4.js" type="text/javascript"＞＜/script＞
＜script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"＞＜/script＞
＜/head＞
＜body＞
＜div data-role="page"＞
＜div data-role="header"＞＜h1＞测试＜/h1＞＜/div＞
＜div data-role="content"＞
＜p＞＜a href="#e"＞测试后退链接＜/a＞＜/p＞
＜/div＞
＜div data-role="footer"＞＜h4＞©2012 rttop.cn studio＜/h4＞＜/div＞
＜/div＞
＜div data-role="page" id="e"＞
＜div data-role="header"＞＜h1＞测试＜/h1＞＜/div＞
＜div data-role="content"＞
＜p＞
＜a href="http://www.rttop.cn" data-rel="back"＞
返回首页
＜/a＞
＜/p＞
＜/div＞
＜div data-role="footer"＞＜h4＞©2012 rttop.cn studio＜/h4＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
3.页面效果
该页面在Opera Mobile Emulator 12.0下执行的效果如图2-4所示。图 2-4 页面的后退功能
4.源码分析
在本实例的第二个"page"容器中，用户在容器中单击“返回首页”时，可以后退到上一页，方法是在添加＜a＞元素时，将"data-rel"属性设置为"back"，表明任何的单击操作都被视为回退动作，并且忽视元素"href"属性值设置的URL地址，只是直接回退到上一个历史记录页面；这种页面切换的效果可以用于关闭一个打开的对话框或页面。
说明 在设置回退链接属性时，除将"data-rel"属性设置为"back"外，还要尽量将"href"属性设置为一个可以访问的正确URL地址，以确保更多的浏览器可以单击该链接按钮。2.2 预加载与页面缓存
通常情况下，移动终端设备的系统配置要低于PC终端，因此，在开发移动应用程序时，更要注意页面在移动终端浏览器中加载时的速度。如果速度过慢，用户的体验将会大打折扣。为了加快页面移动终端访问的速度，在jQuery Mobile中，使用预加载与页面缓存都是十分有效的方法。当一个被链接的页面设置好预加载后，jQuery Mobile将在加载完成当前页面后自动在后台进行预加载设置的目标页面；另外，使用页面缓存的方法，可以将访问过的"page"容器都缓存到当前的页面文档中，下次再访问时，将可以直接从缓存中读取，而无需再重新加载页面。2.2.1 预加载
在开发移动应用程序时，对需要链接的页面进行预加载是十分有必要的。因为当一个链接的页面设置成预加载方式时，在当前页面加载完成之后，目标页面也被自动加载到当前文档中，用户单击就可以马上打开，大大加快了页面访问的速度。
实例2-5 jQuery Mobile页面预加载
1.功能说明
在新建的HTML页面中添加一个＜a＞元素，将该元素的"href"属性值设置为"about.htm"，并将"data-prefetch"属性值设置为"true"，表示预加载＜a＞元素的链接页面。
2.实现代码
新建一个HTML页面2-5.htm，加入代码如代码清单2-5所示。
代码清单2-5 jQuery Mobile页面预加载
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞jQuery Mobile页面预加载＜/title＞
＜meta name="viewport" content=" width=device-width, initial-scale=1"/＞
＜link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css"/＞
＜script src="Js/jquery-1.6.4.js" type="text/javascript"＞＜/script＞
＜script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"＞＜/script＞
＜/head＞
＜body＞
＜div data-role="page"＞
＜div data-role="header"＞＜h1＞预加载页＜/h1＞＜/div＞
＜div data-role="content"＞
＜p＞
＜a href="about.htm" data-prefetch="true"＞点击进入＜/a＞
＜/p＞
＜/div＞
＜div data-role="footer"＞＜h4＞©2012 rttop.cn studio＜/h4＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
3.页面效果
试读结束[说明：试读内容隐藏了图片]