jQuery Mobile从入门到精通

第0章 移动Web开发学习指南 1

本章教学录像：25分钟

移动Web程序是指能够在智能手机、平板电脑、电子书阅读器等可移动设备中完整运行的Web程序。和传统桌面式Web程序相比，移动Web要求程序更加简单且高效，而且具备传统桌面Web程序所没有的硬件优势，如GPS定位、传感器应用等。本章将简要介绍开发移动Web应用程序的基础知识，为读者步入本书后面知识的学习打下基础。

0.1　Web标准开发技术　2

0.1.1　结构化标准语言　2

0.1.2　表现性标准语言　2

0.1.3　行为标准　2

0.2　移动Web开发概览　3

0.2.1　主流移动平台介绍　3

0.2.2　移动Web的特点　5

0.2.3　设计移动网站时需要考虑的问题　6

0.2.4　主流移动设备屏幕的分辨率　6

0.2.5　使用标准的HTML、CSS和JavaScript技术　7

0.3　移动Web开发必备技术　7

0.4　移动Web开发学习路线图　8

0.5　jQuery Mobile学习路线图　9

第1篇　基础知识

第1章　jQuery Mobile基础　12

本章教学录像：21分钟

jQuery　Mobile 不仅会给主流移动平台带来jQuery核心库，而且拥有一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。本章详细讲解jQuery Mobile的基础知识，为读者步入本书后面知识的学习打下基础。

1.1　jQuery Mobile简介　13

1.1.1　jQuery介绍　13

1.1.2　jQuery的分支——jQuery Mobile　13

1.2　jQuery Mobile的特性　14

1.2.1　跨所有移动平台的统一UI　14

1.2.2　简化的标记驱动的开发　15

1.2.3　渐进式增强　15

1.2.4　响应式设计　15

1.3　获取jQuery Mobile　16

1.3.1　下载插件　16

1.3.2　使用URL方式加载插件文件　17

1.4　搭建轻量级测试环境　18

1.5　使用jQuery Mobile设计网页　19

1.6　综合应用——使用jQuery Mobile设计第一个网页　21

1.7　高手点拨　23

1.8　实战练习　24

第2章　jQuery Mobile开发必备知识　25

本章教学录像：36分钟

jQuery　Mobile 开发是一项浩瀚的工程，不仅需要具备HTML5、CSS和JavaScript方面的知识，而且需要Android和iOS等智能设备系统开发的基本知识。本章详细讲解jQuery Mobile开发所必须具备的基础知识，为读者步入本书后面知识的学习打下基础。

2.1　HTML简介　26

2.1.1　HTML初步　26

2.1.2　字体格式设置　27

2.1.3　使用标示标记　30

2.1.4　使用区域和段落标记　32

2.1.5　使用表格标记　34

2.1.6　使用表单标记　37

2.1.7　全新的HTML5　40

2.2　XML技术　41

2.2.1　XML概述　41

2.2.2　XML语法　42

2.2.3　如何获取XML文档　43

2.3　CSS技术基础　45

2.3.1　基本语法　45

2.3.2　CSS属性介绍　46

2.4　JavaScript技术基础　48

2.4.1　JavaScript概述　48

2.4.2　JavaScript运算符　50

2.4.3　JavaScript循环语句　51

2.4.4　JavaScript函数　53

2.4.5　JavaScript事件　56

2.4.6　常用的Web页面脚本　58

2.5　综合应用—— 一个典型的页面文件　60

2.6　高手点拨　62

2.7　实战练习　63

第2篇　核心技术

第3章　jQuery Mobile语法基础　66

本章教学录像：24分钟

本书前面介绍了jQuery　Mobile独一无二的一些重要特征和开发所必须具备的基础知识。本章开始正式步入jQuery Mobile的学习阶段，讲解jQuery Mobile的基础语法知识和具体用法，为读者步入本书后面知识的学习打下基础。

3.1　页面结构　67

3.1.1　基本框架介绍　67

3.1.2　多页面模板　69

3.1.3　设置内部页面的页面标题　71

3.2　导航链接处理　72

3.2.1　设置外部页面链接　73

3.2.2　实现页面后退链接　75

3.3　使用Ajax修饰导航　76

3.3.1　使用Aajx　77

3.3.2　使用函数changePage()　80

3.3.3　配置Ajax导航　80

3.4　综合应用 —— 开发一个综合性移动版Ajax网页　81

3.5　高手点拨　88

3.6　实战练习　90

第4章　预加载、页面缓存和页面脚本　91

本章教学录像：13分钟

顾名思义，Web中的预加载就是在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。本章详细讲解jQuery　Mobile中预加载和页面缓存的基础知识和具体用法，为读者步入本书后面知识的学习打下基础。

4.1　预加载　92

4.2　页面缓存　94

4.3　页面脚本　96

4.3.1　创建页面　96

4.3.2　跳转页面　98

4.4　综合应用——动态切换当前显示的页面　98

4.5　高手点拨　100

4.6　实战练习　100

第5章　对话框　101

本章教学录像：15分钟

对话框与页面相似，只不过对话框的边界是有间距的(inset)，从而产生模态对话框（modal　dialog）的外观。本章详细讲解jQuery Mobile中对话框的基础知识，为读者步入本书后面知识的学习打下基础。

5.1　创建对话框的方法　102

5.2　实现一个简单对话框　102

5.3　实现常用的对话框　104

5.3.1　实现基本的对话框效果　104

5.3.2　实现操作表样式对话框　106

5.3.3　实现警告框　109

5.3.4　关闭对话框　111

5.4　综合应用——实现竖屏和横屏自适应　113

5.5　高手点拨　115

5.6　实战练习　116

第6章　实现导航功能　117

本章教学录像：33分钟

导航是一个网页的门面，在整个网站中起着非常重要的作用。本章详细讲解在jQuery　Mobile中实现页面导航的基础知识，为读者步入本书后面知识的学习打下基础。

6.1　页眉栏　118

6.1.1　页眉基础　118

6.1.2　页眉栏的基本结构　118

6.1.3　实现页眉定位　119

6.2　在页眉中使用按钮　122

6.2.1　设置后退按钮的文字　122

6.2.2　手动添加按钮　124

6.2.3　既有文本又有图标的按钮　126

6.2.4　只有图标的按钮　127

6.2.5　设定按钮位置　129

6.2.6　实现回退按钮效果　131

6.3　实现分段导航功能　133

6.3.1　使用分段控件　133

6.3.2　设置导航栏的图标　136

6.3.3　设置导航栏图标的位置　138

6.3.4　自定义导航栏的图标　139

6.3.5　截断标题　142

6.4　综合应用——打造一个影片展示器　143

6.5　高手点拨　146

6.6　实战练习　146

第7章　页脚栏、工具栏和标签栏　147

本章教学录像：16分钟

在jQuery　Mobile页面中，页脚栏和页眉栏的组件几乎相同，只是位置有差别而已。工具栏可用来辅助管理当前屏幕中的内容。另外，通过标签栏可以以不同的视图来查看应用程序。本章详细讲解在jQuery Mobile页面中分别实现页脚栏、工具栏和标签栏的基础知识，为读者步入本书后面知识的学习打下基础。

7.1　页脚栏　148

7.1.1　页脚基础　148

7.1.2　页脚定位　149

7.1.3　页脚按钮　152

7.2　工具栏　155

7.2.1　带有图标的工具栏　155

7.2.2　带有分段控件的工具栏　157

7.3　标签栏　159

7.3.1　带有标准图标的标签栏　159

7.3.2　带有自定义图标的标签栏　161

7.4　综合应用——带有分段控件的标签栏　164

7.5　高手点拨　167

7.6　实战练习　168

第8章　按钮　169

本章教学录像：26分钟

按钮是移动App中最常使用的控件之一，能够提供非常高效的用户体验。在本书前面的许多例子中，已经用到了按钮。本章详细讲解在jQuery　Mobile中实现按钮功能的基础知识，为读者步入本书后面知识的学习打下基础。

8.1　链接按钮　170

8.2　表单按钮　171

8.3　为按钮设置图像　172

8.3.1　使用图像按钮　173

8.3.2　使用有图标的按钮　174

8.3.3　使用只带有图标的按钮　175

8.4　内联按钮　177

8.5　实现按钮定位　179

8.6　自定义按钮图标　181

8.7　实现分组按钮　184

8.7.1　分组按钮基础　185

8.7.2　使用分组按钮　185

8.8　使用主题按钮　188

8.9　使用动态按钮　189

8.9.1　按钮选项　189

8.9.2　按钮方法　190

8.9.3　按钮事件　191

8.10　综合应用——实现动态按钮　191

8.11　高手点拨　195

8.12　实战练习　195

第9章　表单　197

本章教学录像：50分钟

在jQuery　Mobile页面中，表单在网页中主要负责数据采集功能。本章详细讲解在jQuery Mobile中实现表单功能的基础知识，为读者步入本书后面知识的学习打下基础。

9.1　表单基础 198 9.2 在表单中输入文本　199

9.2.1　动态输入文本　200

9.2.2　文本输入选项　200

9.2.3　文本输入方法　202

9.2.4　文本输入事件　204

9.3　选择菜单　206

9.3.1　使用基本的选择菜单　207

9.3.2　自定义选择菜单　208

9.3.3　动态选择菜单　210

9.3.4　选择菜单选项　211

9.3.5　选择菜单的方法　214

9.3.6　选择菜单事件　216

9.4　单选按钮　219

9.4.1　使用简单的单选按钮　219

9.4.2　复选框和单选按钮的选项　221

9.4.3　复选框和单选按钮的方法　221

9.4.4　复选框和单选按钮的事件　223

9.5　使用复选框　225

9.5.1　动态复选框　225

9.5.2　水平放置复选框　227

9.5.3　使用动态复选框　228

9.6　使用滑动条　230

9.6.1　滑动条基础　231

9.6.2　滑动条选项　232

9.6.3　滑动条方法　233

9.6.4　滑动条事件　234

9.7　使用开关控件　237

9.7.1　开关控件基础　237

9.7.2　使用动态开关事件　239

9.8　使用本地表单元素　241

9.9　综合应用——创建一个日期选择器　245

9.10　高手点拨　247

9.11　实战练习　248

第10章　列表　249

本章教学录像：36分钟

在Web应用中，列表是一种广受欢迎的用户界面组件，能够为用户提供简单且有效进行浏览的体验。本章详细讲解在jQuery　Mobile中设计和配置列表的知识，为读者步入本书后面知识的学习打下基础。

10.1　基本列表　250

10.1.1　列表基础　250

10.1.2　创建一个基本列表　251

10.2　内置列表　252

10.3　嵌套列表　254

10.4　列表分割　255

10.4.1　创建列表分割线　255

10.4.2　使用列表分割线　256

10.5　带有缩略图和图标的列表　259

10.5.1　缩略图和图标列表基础　259

10.5.2　实现缩略图列表　259

10.5.3　实现带有图标的列表　262

10.5.4　实现带有图标和计数器的列表　264

10.6　内容格式化与计数器　265

10.7　使用拆分按钮列表　266

10.7.1　拆分按钮列表基础　267

10.7.2　实现带有图标按钮的分割列表　268

10.8　使用编号列表　272

10.8.1　编号列表基础　272

10.8.2　实现一个有序列表效果　274

10.9　使用只读列表　274

10.10　使用列表徽章　277

10.11　使用搜索栏过滤列表　280

10.12　实现动态列表效果　283

10.12.1　列表选项　283

10.12.2　列表方法　286

10.12.3　列表事件　286

10.13　综合应用——多页面模板综合实战　288

10.14　高手点拨　291

10.15　实战练习　292

第3篇　知识进阶

第11章　内容格式化　294

本章教学录像：24分钟

jQuery　Mobile页面的内容是完全开放的，jQuery Mobile框架提供了一些有用的工具及组件，如可折叠的面板、多列网格布局等。通过这些工具和组件可以方便地为移动设备格式化指定的内容。本章详细讲解在jQuery Mobile中格式化内容的知识，为读者步入本书后面知识的学习打下基础。

11.1　使用基本的HTML样式　295

11.2　使用表格布局　295

11.2.1　表格模板　295

11.2.2　两列表格　296

11.2.3　三列表格　298

11.2.4　带有App图标的四列表格　299

11.2.5　五列表格　300

11.2.6　多行表格　301

11.2.7　不规则的表格　302

11.2.8　Springboard　305

11.2.9　使用Glyphish图标样式化方法　307

11.2.10　使用多类型的表格布局　309

11.3　可折叠的内容块　311

11.3.1　嵌套折叠和折叠组　312

11.3.2　创建可折叠的内容块　314

11.3.3　在正文中显示可折叠的区块　317

11.4　折叠组标记　317

11.4.1　折叠组标记基础　318

11.4.2　实战演练　319

11.5　使用CSS实现设置样式　321

11.5.1　实现背景渐变　321

11.5.2　在Mozilla浏览器实现背景渐变　324

11.6　综合应用——实现页眉渐变效果　326

11.7　高手点拨　329

11.8　实战练习　330

第12章　主题化设计　331

本章教学录像：34分钟

jQuery　Mobile应用中提供了一个内置的主题框架，允许设计人员迅速地自定义和重新样式化用户界面。本章详细讲解主题框架的基础知识及jQuery Mobile包含的默认主题，并详细讲解为组件分配主题的三种方式，以及创建自定义主题的方法。

12.1　主题设计基础　332

12.2　主题和调色板　334

12.2.1　主题设置　334

12.2.2　全局主题设置　336

12.2.3　结构　336

12.3　主题的默认值　337

12.3.1　使用主题的默认值　337

12.3.2　通过下拉框选择并保存主题　339

12.3.3　修改默认的主题　341

12.4　主题的继承　343

12.4.1　继承主题e的显示样式　343

12.4.2　使用显式主题　345

12.5　自定义主题　348

12.5.1　手动创建自定义调色板　348

12.5.2　使用自定义主题　349

12.5.3　自定义一个主题　355

12.6　组件主题　358

12.6.1　列表主题　358

12.6.2　表单主题　360

12.6.3　按钮主题　361

12.6.4　激活状态主题　362

12.6.5　工具栏主题　363

12.6.6　页眉主题　364

12.6.7　内容主题　366

12.7　ThemeRoller　367

12.7.1　调色板和全局设置　368

12.7.2　Preview Inspector和QuickSwatch Bar　368

12.7.3　使用Adobe Kuler集成工具　369

12.7.4　使用ThemeRoller　370

12.8　综合应用——使用ThemeRoller创建样式　371

12.9　高手点拨　375

12.10　实战练习　376

第13章　jQuery Mobile API　377

本章教学录像：43分钟

jQuery　Mobile包含一个相当强大的API，这个API包含所有简便的特性。本章首先讲解如何配置jQuery Mobile，以及jQuery Mobile内的每一个特性，重点讲解它的默认设置，并演示如何使用API来配置每一个选项。然后讲解jQuery Mobile所具有的最受欢迎的方法、页面事件和属性。最后讲解一个列出所有jQuery Mobile数据属性的已排序表格，对每个属性都会给出简单描述、示例和它增强的组件示意图。在讲解过程中通过具体的实例进行演示，为读者步入本书后面知识的学习打下基础。

13.1　配置jQuery Mobile　378

13.1.1　mobileinit事件　378

13.1.2　可配置的jQuery Mobile选项　380

13.2　方法　385

13.3　事件　403

13.3.1　触摸事件　403

13.3.2　虚拟鼠标事件　407

13.3.3　设备方向变化事件　407

13.3.4　滚屏事件　411

13.3.5　页面加载事件　415

13.3.6　页面显示/隐藏事件　417

13.3.7　页面初始化事件　418

13.3.8　动画事件　420

13.3.9　触发事件　422

13.4　属性　422

13.5　数据属性　423

13.6　有响应的布局助手　426

13.6.1　方向类　426

13.6.2　最小/最大宽度折断点　426

13.6.3　添加宽度折断点　427

13.6.4　运行媒介查询　427

13.7　综合应用——实现页面跳转　428

13.8　高手点拨　431

13.9　实战练习　432

第14章　jQuery Mobile常用插件　433

本章教学录像：23分钟

随着智能手机的普及，越来越多的用户喜欢通过手机浏览网页。前面已经详细讲解jQuery　Mobile技术的基础知识和具体用法。在现实开发应用中，除了可以使用jQuery Mobile的基本技术外，还可以使用第三方插件来实现更加强大的功能。本章详细讲解jQuery Mobile常用插件的基础知识，为读者步入本书后面知识的学习打下基础。

14.1　使用PhotoSwipe插件　434

14.1.1　PhotoSwipe插件基础　434

14.1.2　使用PhotoSwipe插件　435

14.2　使用Camera插件　438

14.2.1　Camera插件基础　438

14.2.2　使用Camera插件　439

14.3　使用Mobiscroll插件　441

14.3.1　Mobiscroll插件基础　441

14.3.2　使用Mobiscroll插件　442

14.4　使用AutoComplete插件　443

14.4.1　AutoComplete插件基础　444

14.4.2　使用AutoComplete插件　445

14.5　使用DateBox插件　447

14.5.1　DateBox插件基础　447

14.5.2　使用DateBox插件　448

14.6　使用SimpleDialog插件　449

14.6.1　SimpleDialog插件基础　449

14.6.2　使用SimpleDialog插件　449

14.7　使用ActionSheet插件　452

14.8　使用TN3 Gallery插件　454

14.8.1　TN3 Gallery插件基础　454

14.8.2　使用TN3 Gallery插件　454

14.9　使用Pagination Plugin插件　458

14.9.1　Pagination Plugin插件基础　458

14.9.2　使用Pagination Plugin插件　460

14.10　综合应用——打造一个移动地图系统　461

14.11　高手点拨　464

14.12　实战练习　464

第15章　打造移动Web应用程序　465

本章教学录像：14分钟

前面已经详细讲解jQuery　Mobile技术的基础知识和具体用法，并通过演示实例讲解了知识点的基本用法。本章详细讲解在当今主流移动设备平台Android和iOS系统中创建移动Web程序的方法，为读者步入本书后面知识的学习打下基础。

15.1　创建能在通用设备上运行的网站　466

15.1.1　确定应用程序类型　466

15.1.2　使用CSS改善HTML外观　466

15.1.3　加入移动meta标签　468

15.2　将站点升级至HTML5　469

15.2.1　确定何时升级和升级的具体方式　470

15.2.2　升级到HTML5的步骤　471

15.2.3　将HTML5特性作为额外内容添加至网站　471

15.2.4　使用HTML5为移动Web提供的服务　472

15.3　将Web程序迁移到移动设备　472

15.3.1　选择Web编辑器　473

15.3.2　测试应用程序　473

15.3.3　为移动设备调整可视化的设计　473

15.3.4　HTML5及CSS3检测　474

15.4　高手点拨　476

15.5　实战练习　476

第16章　搭建移动开发环境　490

本章教学录像：18分钟

“工欲善其事，必先利其器”出自《论语》，意思是要想高效地完成一件事，需要有一个合适的工具。对于移动开发人员来说，开发工具同样至关重要。作为一项新兴技术，在进行开发前首先要搭建一个对应的开发环境。本章详细讲解搭建主流移动设备平台Android和iOS开发环境的方法，为读者步入本书后面知识的学习打下基础。

16.1　搭建Android开发环境　478

16.1.1　安装Android SDK的系统要求　478

16.1.2　安装JDK　478

16.1.3　获取并安装Eclipse和Android SDK　482

16.1.4　安装ADT　485

16.1.5　设定Android SDK Home　487

16.1.6　验证开发环境　488

16.1.7　创建Android虚拟设备　488

16.1.8　启动AVD模拟器　490

16.2　搭建iOS开发环境　491

16.2.1　开发前的准备——加入iOS开发团队　492

16.2.2　安装Xcode　494

16.2.3　Xcode介绍　494

16.2.4　下载并安装Xcode　494

16.2.5　创建一个Xcode项目并启动模拟器　497

16.3　高手点拨　501

16.4　实战练习　504

第4篇　综合实战

第17章　电话本管理系统　506

本章教学录像：16分钟

经过本书前面内容的学习，读者应该已经掌握jQuery　Mobile移动Web开发技术的基础知识。本章综合运用本书前面所学的知识，并结合使用HTML5、CSS3和JavaScript的技术，开发一个在移动平台运行的电话本管理系统。希望读者认真阅读本章内容，仔细品味HTML5 jQuery Mobile PhoneGap组合在移动Web开发领域的真谛。

17.1　需求分析　507

17.1.1　产生背景　507

17.1.2　功能分析　507

17.2　创建Android工程　508

17.3　实现系统主界面　509

17.4　实现信息查询模块　511

17.5　实现系统管理模块　513

17.6　实现信息添加模块　516

17.7　实现信息修改模块　519

17.8　实现信息删除模块和更新模块　522

第18章　平板阅读器系统　523

本章教学录像：11分钟

经过本书前面内容的学习，读者应该已经掌握jQuery　Mobile移动Web开发技术的基础知识。本章综合运用本书前面所学的知识，结合使用HTML5、CSS3和jQuery技术开发一个在平板电脑中运行的阅读器系统。希望读者认真阅读本章内容，仔细品味HTML5 jQuery组合在移动Web开发领域的真谛。

18.1　需求分析　524

18.2　创建Android工程　524

18.3　准备素材　525

18.4　系统实现　526

18.4.1　实现展示文件　526

18.4.2　实现样式文件　532