jQuery Mobile权威指南

作者简介

《jQuery Mobile权威指南》由资深专家根据jQuery Mobile最新版本撰写，是一本全面而系统的jQuery Mobile教程，对jQuery Mobile的所有功能、特性、开发方法和技巧进行了全面而透彻的讲解，是系统学习jQuery Mobile的权威参考书。在写作方式上，《jQuery Mobile权威指南》以一种开创性的方式使理论与实践达到了极好的平衡，不仅对理论知识进行了清晰而透彻的阐述，而且根据读者理解这些知识的需要精心设计和构思了92个完整的实战案例，每个案例分为功能描述、实现代码、效果展示和代码分析4个部分，旨在帮助读者通过实践的方式达到迅速掌握jQuery Mobile的目的。

全书一共10章，从基础理论到最佳实践，内容几乎涵盖了jQuery Mobile的各个方面。第1章介绍了jQuery Mobile的功能特点、获取方法，以及与其他移动开发框架的对比；第2~5章分别讲解了jQuery Mobile的页面与对话框、工具栏与格式化内容、页面常用组件、主题等基础知识；第6章和第7章分别详细介绍了jQuery Mobile的插件和API；第8章探讨了jQuery Mobile的开发技巧与最佳实践；第9章和第10章以迭代的方式详细讲解了两个具有代表性的综合案例的实现过程，不仅能帮助读者将前面所学的理论知识融会贯通，而且还能从中迅速获得实战经验。

书籍目录

前　　言

第1章　初识jQuery Mobile/1

1.1　jQuery Mobile简介/2

1.1.1　功能特点/2

1.1.2　支持平台/3

1.1.3　与jQTouch、Sencha Touch、SproutCore的比较/4

1.2　如何获取jQuery Mobile/5

1.2.1　下载插件文件/5

1.2.2　使用URL方式加载插件文件/6

1.3　jQuery Mobile应用开发迅速上手/6

1.4　本章小结/10

第2章　页面与对话框/11

2.1　jQuery Mobile页面结构/12

2.1.1　基本框架/12

2.1.2　多容器页面结构/13

2.1.3　外部页面链接/15

2.1.4　页面后退链接/18

2.2　预加载与页面缓存/20

2.2.1　预加载/20

2.2.2　页面缓存/22

2.3　页面的脚本/23

2.3.1　创建页面/23

2.3.2　跳转页面/25

2.3.3　加载页面/27

2.4　对话框/29

2.4.1　创建简单对话框/29

2.4.2　关闭对话框/31

2.5　本章小结/33

第3章　工具栏与格式化内容/34

3.1　头部栏/35

3.1.1　头部栏的基本结构/35

3.1.2　设置后退按钮的文字/37

3.1.3　添加按钮/39

3.1.4　设定按钮位置/41

3.2　导航栏/43

3.2.1　导航栏的基本结构/43

3.2.2　头部导航栏/44

3.2.3　导航栏的图标/46

3.2.4　设置导航栏图标位置/48

3.2.5　自定义图标/50

3.3　尾部栏/54

3.3.1　添加按钮/54

3.3.2　添加表单元素/56

3.4　内容格式化/57

3.4.1　网格布局/57

3.4.2　可折叠的区块/60

3.4.3　可嵌套的折叠区块/62

3.4.4　折叠组标记/63

3.5　本章小结/65

第4章　页面常用组件/66

4.1　按钮/67

4.1.1　内联按钮/67

4.1.2　按钮组标记/69

4.2　表单/71

4.2.1　文本输入/71

4.2.2　滑块/73

4.2.3　翻转切换开关/75

4.2.4　单选按钮/76

4.2.5　复选框/78

4.2.6　选择菜单/81

4.2.7　多项选择菜单/84

4.3　列表/86

4.3.1　基本列表/86

4.3.2　嵌套列表/87

4.3.3　有序列表/89

4.3.4　分割按钮列表/91

4.3.5　分割列表项/93

4.3.6　图标与计数器/95

4.3.7　内容格式化与计数器/96

4.4　本章小结/98

第5章　jQuery Mobile主题/99

5.1　主题的定义及使用场景/100

5.1.1　默认主题/100

5.1.2　修改默认主题/103

5.1.3　自定义主题/105

5.2　列表与表单元素的主题/108

5.2.1　列表主题/108

5.2.2　表单主题/110

5.2.3　按钮主题/112

5.2.4　激活状态主题/113

5.3　工具栏与页面内容的主题/115

5.3.1　工具栏主题/115

5.3.2　页面主题/117

5.3.3　内容主题/119

5.4　本章小结/121

第6章　jQuery Mobile插件/122

6.1　图片滑动浏览插件PhotoSwipe/123

6.2　图片幻灯片插件Camera/126

6.3　滚动选择时间插件Mobiscroll/130

6.4　搜索插件AutoComplete/133

6.5　日期对话框插件DateBox/136

6.6　简单对话框插件SimpleDialog/138

6.7　快捷标签插件ActionSheet/142

6.8　本章小结/145

第7章　jQuery Mobile API详解/146

7.1　基本配置项/147

7.1.1　自定义页面加载和出错提示信息/147

7.1.2　使用函数修改gradeA配置值/149

7.2　事件/152

7.2.1　触摸事件/152

7.2.2　设置翻转事件/156

7.2.3　屏幕滚动事件/158

7.2.4　页面显示或隐藏事件/161

7.3　访问地址的相关方法/164

7.3.1　访问路径和URL地址转换方法/164

7.3.2　URL地址验证方法/167

7.3.3　域名比较方法/170

7.3.4　纵向滚动方法/172

7.4　本章小结/175

第8章　jQuery Mobile开发技巧与最佳实践/176

8.1　开启或禁用列表项中的箭头/177

8.2　使用悬浮的方式固定头部栏与尾部栏/179

8.3　初始化页面随机显示背景图/181

8.4　按钮标题文字的控制/183

8.5　侦听HTML 5画布元素的触摸事件/185

8.6　在jQuery Mobile 中提交表单数据/188

8.7　切换按钮的开启/禁用状态/191

8.8　开启或禁用AJAX方式打开页面链接/193

8.9　使用localStorage传递链接参数/196

8.10　在jQuery Mobile中构建离线功能/198

8.11　本章小结/201

第9章　开发移动终端新闻订阅管理系统/202

9.1　需求分析/203

9.1.1　总体设计/203

9.1.2　功能设计/203

9.2　数据结构/204

9.2.1　数据库设计/204

9.2.2　输出API设计/206

9.3　系统封面开发/208

9.4　系统首页开发/210

9.5　订阅管理页开发/214

9.6　类别新闻页开发/217

9.7　新闻详情页开发/221

9.8　其余文件/223

9.8.1　样式文件/224

9.8.2　API接口文件/226

9.9　本章小结/226

第10章　开发移动终端记事本管理系统/227

10.1　需求分析/228

10.1.1　总体设计/228

10.1.2　功能设计/229

10.2　新手导航页开发/229

10.3　系统首页开发/233

10.4　记事列表页开发/236

10.5　记事详细页开发/238

10.6　修改记事内容页开发/241

10.7　添加记事内容页开发/244

10.8　样式文件/247

10.9　本章小结/249

实 例 目 录

第1章　初识jQuery Mobile/1

实例1-1　Hello World 页面的实现/6

实例1-2　多页面的切换/8

第2章　页面与对话框/11

实例2-1　jQuery Mobile 基本的页面框架/12

实例2-2　jQuery Mobile多容器间的切换/14

实例2-3　jQuery Mobile外部页面链接切换/16

实例2-4　jQuery Mobile页面后退链接/18

实例2-5　jQuery Mobile页面预加载/20

实例2-6　jQuery Mobile页面缓存/22

实例2-7　jQuery Mobile中的pagecreate事件/24

实例2-8　使用changePage()方法跳转页面/25

实例2-9　使用loadPage()方法加载页面/27

实例2-10　jQuery Mobile中创建对话框/29

实例2-11　jQuery Mobile中关闭对话框/31

第3章　工具栏与格式化内容/34

实例3-1　头部栏的基本结构/35

实例3-2　设置后退按钮的文字/37

实例3-3　添加按钮/39

实例3-4　设定按钮位置/41

实例3-5　添加尾部导航栏/43

实例3-6　添加头部导航栏/44

实例3-7　为导航栏链接按钮添加图标/47

实例3-8　设置导航栏链接按钮图标的位置/49

实例3-9　自定义导航栏链接按钮的图标/51

实例3-10　在尾部栏中添加按钮/54

实例3-11　在尾部栏中添加表单元素/56

实例3-12　在内容区域添加多种类型的网格布局/58

实例3-13　在正文中显示可折叠的区块/60

实例3-14　在正文中显示可嵌套的折叠区块/62

实例3-15　在正文中显示折叠组标记/63

第4章　页面常用组件/66

实例4-1　内联按钮/67

实例4-2　按钮组标记/69

实例4-3　不同类型的文本输入/71

实例4-4　拖动滑块改变元素背景色/73

实例4-5　翻转切换开关/75

实例4-6　用两种方式显示单选按钮/77

实例4-7　用两种方式显示复选框/79

实例4-8　用两种方式显示选择菜单/81

实例4-9　多项选择菜单/84

实例4-10　基本列表/86

实例4-11　嵌套列表/88

实例4-12　有序列表/89

实例4-13　分割按钮列表/91

实例4-14　分割列表项/93

实例4-15　列表中的图标与计数器/95

实例4-16　内容格式化与计数器/97

第5章　jQuery Mobile主题/99

实例5-1　通过下拉框选择并保存主题/101

实例5-2　修改默认主题/103

实例5-3　自定义主题/105

实例5-4　列表容器混搭主题/108

实例5-5　改变表单主题/110

实例5-6　显示5种按钮主题风格/112

实例5-7　激活状态主题/114

实例5-8　工具栏主题混搭效果/115

实例5-9　改变页面主题/117

实例5-10　折叠区域中的内容主题/119

第6章　jQuery Mobile插件/122

实例6-1　图片滑动浏览插件PhotoSwipe的应用/123

实例6-2　图片幻灯片插件Camera的应用/126

实例6-3　滚动选择时间插件Mobiscroll的应用/130

实例6-4　搜索插件AutoComplete的应用/133

实例6-5　日期对话框插件DateBox的应用/137

实例6-6　简单对话框插件SimpleDialog的应用/139

实例6-7　快捷标签插件ActionSheet的应用/142

第7章　jQuery Mobile API详解/146

实例7-1　自定义页面加载和出错提示信息/147

实例7-2　使用函数修改gradeA配置值/149

实例7-3　使用触摸事件滑动浏览图片/153

实例7-4　使用翻转事件检测移动设备的手持方向/156

实例7-5　使用屏幕滚动事件控制页面显示的文字与样式/159

实例7-6　绑定页面的显示与隐藏事件/161

实例7-7　makePathAbsolute()和makeUrlAbsolute()转换方法/165

实例7-8　isRelativeUrl()和isAbsoluteUrl()验证方法/168

实例7-9　域名比较方法isSameDomain()的使用/171

实例7-10　纵向滚动方法silentScroll()的使用/173

第8章　jQuery Mobile开发技巧与最佳实践/176

实例8-1　开启或禁用列表项中的箭头/177

实例8-2　使用悬浮的方式固定头部栏与尾部栏/179

实例8-3　初始化页面随机显示背景图/181

实例8-4　按钮标题文字的控制/183

实例8-5　侦听HTML 5画布元素的触摸事件/185

实例8-6　在jQuery Mobile 中提交表单数据/188

实例8-7　切换按钮的开启/禁用状态/191

实例8-8　开启或禁用AJAX方式打开页面链接/193

实例8-9　使用localStorage传递链接参数/196

实例8-10　在jQuery Mobile中构建离线功能/199

第9章　开发移动终端新闻订阅管理系统/202

实例9-1　新闻订阅系统封面开发/208

实例9-2　新闻订阅系统首页开发/210

实例9-3　新闻订阅管理页开发/214

实例9-4　类别新闻页开发/217

实例9-5　新闻详情页开发/221

第10章　开发移动终端记事本管理系统/227

实例10-1　新手导航页开发/229

实例10-2　记事本管理系统首页开发/233

实例10-3　记事列表页开发/236

实例10-4　记事详细页开发/239

实例10-5　修改记事内容页开发/241

实例10-6　添加记事内容页开发/244

编辑推荐

《jQuery Mobile权威指南》由资深专家根据jQuery Mobile最新版本撰写，对jQuery Mobile的所有功能、特性、使用方法和开发技巧进行了全面而透彻的讲解，是系统学习jQuery Mobile的权威参考书。92个精心设计的经典案例对各个理论知识点进行了充分阐释，理论与实践完美结合。

前言

创作背景在近几年的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 移动开发技术的开发者进行交流。除封面署名作者外，参加本书编写工作的还有：刘义、李建洲、李静、裴星如、李建勤、陶红英、陈建平、孙文华、孙义、陶林英、闵慎华、孙芳、赵刚。由于作者的水平有限、编写时间仓促，书中难免会出现一些错误或者不准确之处，恳请读者批评指正。书中的全部源代码文件可以从华章网站下载。如果您有更多的宝贵意见，也欢迎发送邮件至邮箱tao_guo_rong@163.com，期待能够得到大家真挚的反馈。致谢本书的出版首先要感谢机械工业出版社华章分社的编辑们，尤其是杨福川与白宇编辑，正是由于他们的斧正点拨和全程指导，才使本书的创作思路不断提升、案例框架不断优化，并最终顺利完稿。另外，还要感谢我的家人，正是由于他们的理解与默默支持，使我全心写作，顺利完成本书的编写。陶国荣2012年6月

内容概要

陶国荣 资深Web技术专家，有10余年开发经验，是国内较早专业从事Web开发的一线技术人员和培训讲师。一直致力于对HTML5、JavaScript、CSS3、jQuery、jQUery Mobile等Web开发技术的研究和实践，在HTML页面的优化与用户体验的研究，以及页面框架搭建、数据流向分析、页面静态优化等方面都拥有丰富的实践经验。他还是微软技术方面的专家，精通C#、ASP．NET和SQL Server等技术。

此外，他还是一位知名的技术作家，出版了多部技术著作，其中《jQuery权威指南》和《HTML5实战》是他的代表作，这两本书凭借过硬的质量和良好的学习体验获得了广大读者的高度评价，并取得了骄人的销售成绩。

媒体关注与评论

随着移动应用的普及和HTML5技术的成熟，Web APP也越来越流行，因为Web APP有着真正的跨平台特性。jQuery Mobile 的使命是为所有主流移动浏览器提供一种统一的体验，跨所有流行的智能手机和平板电脑等移动设备工作。本书非常具有前瞻性：一方面表现在它的出版时机非常及时，当前jQuery Mobile的应用刚刚兴起，但是市面上同类书极少；另一方面，本书完全是基于jQuery Mobile的最新技术撰写的。此外，它的系统性和实战性都很强，学完本书，应该能熟练地利用jQuery Mobile开发自己心仪的APP了，强烈推荐！——51CTO 中国领先的IT技术网站在众多的移动开发框架中，我们选择使用jQuery Mobile的理由有很多，但是有三个理由最重要：第一，jQuery开发人员使用jQuery Mobile时可以驾轻就熟，因为两者使用共享的代码库；第二，真正的跨平台和跨设备，有强大的兼容性；第三，社区和企业对它的广泛支持，整个技术链越来越成熟。如果你想学习jQuery Mobile，本书有两个理由让你选择它：第一，内容系统而全面，基本涵盖了jQuery Mobile知识点的方方面面；第二，实战性强，包含90余个小案例和2个大案例，便于操作实践。——jQuery Mobile中文用户组

章节摘录

版权页：   插图：   9.1 需求分析 在本系统中，需要实现的需求包括以下几个方面： 在进入系统前，先浏览封面页，停留3秒后自动进入首页。 在首页中，显示用户自己订阅的新闻类别，单击某类别时，进入相应的类别页；当用户在首页单击“管理订阅”按钮时，进入订阅管理页。 在类别新闻页中，浏览该类别中的今日图片与列表新闻，单击图片或列表中的某选项时，进入对应的新闻详情页。 在订阅管理页中，以列表的方式，展示用户还没有订阅的新闻类别，当用户单击列表中最右侧的“添加”按钮时，即完成了订阅功能。 在新闻详情页中，显示某条新闻的对应主题、加入时间、来源和正文信息。 9.1.1 总体设计 考虑到移动终端设备中各浏览器的复杂特性和与PC端在机器性能、网络环境的诸多差异，在使用jQuery Mobile开发移动应用项目时，必须把握下面几个主要方面： 易操作，鉴于移动设备的屏幕特征，必须使开发出来的功能容易操作。 体积小，大部分的移动设备在使用上网服务时，需要根据流量来计费，因此，如果项目在使用时加载的数据过大，将会消耗用户很高的流量。 性能好，必须保证用户在使用移动网络时，数据的交互流畅、安全，因此，不应过多请求服务器的数据，尽可能使用本地或CDN缓存技术实现数据交互。 综合上述各方面的因素，并考虑到整体的实际需求，本系统的总体设计如图9—1所示。 图9—1中列出了系统的功能和操作流程，本系统有5个功能，分别由系统封面页、首页、订阅管理页、类别新闻页、新闻详情页实现。在操作流程上，先通过系统封面页进入首页，在首页中可以进入类别新闻页和订阅管理页，只有在类别新闻页中，才能进入新闻详情页。 9.1.2 功能设计 本系统针对需求分析，使用jQuery Mobile开发了5项功能，说明如下： 系统封面页：通过使用JavaScript中计时器的功能，在指定的时间内，自动跳转到系统首页中。 首页：在页面中添加一个“page”容器，在绑定的容器“pagecreate”事件中，将API获取的指定数据显示在容器中的列表元素中；并添加一个按钮，单击后进入“订阅管理页”。 订阅管理页：在该页中获取用户已订阅的新闻类别，并与全部类别相比较，将未订阅的新闻类别以列表的形式显示在“page”容器中；单击列表右侧“添加”按钮时，更新用户已订阅的新闻类别信息，并刷新当前容器。 类别新闻页：该页由上下两部分组成，上面展示一幅本类别的专属图片，图片的下面以列表的形式显示本类别下的全部新闻标题；单击新闻标题后，进入新闻详情页。 新闻详情页：在该页中接收“localStorage”对象传回的新闻Id号，根据该Id号调用API获取对应新闻的详细内容，并显示在页面指定的各元素中。

图书封面

---

 jQuery Mobile权威指南下载 更多精彩书评

---