通过本书的学习，读者能够快速掌握使用jQuery Mobile进行移动开发的方法和过程。本书整个体系包括基础知识、界面展示、项目实战、跨平台开发等移动开发人员必须掌握的技能，尤其是本书的界面展示与项目实战部分，不但能让读者了解做什么（what）与怎么做（how），更能让读者清楚为什么要这么做（why）。同时，本书还讲解了很多跨平台移动开发的工具和技巧。

　　jQuery Mobile是目前*流行的跨平台移动开发框架，本书以实例驱动讲解的方式，让零基础的读者也能轻松掌握jQuery Mobile下的应用开发。
　　本书分为4篇，*篇是移动开发入门篇，介绍了jQuery Mobile、HTML 5和移动开发的一些基础知识，以及如何搭建开发环境；第二篇是jQuery Mobile基础篇，介绍了jQuery Mobile中对话框、工具栏、按钮、表单、布局和插件的使用；第三篇是跨平台APP实战篇，介绍了6个使用jQuery Mobile开发的实际APP；第四篇是发布和推广应用篇，介绍了在开发完成之后，如何发布和推广自己的APP。
　　本书内容详尽、实例丰富，是广大jQuery Mobile初学者、跨平台移动开发人员必备的参考书，同时也适合作为高等院校和培训学校相关专业师生的教学参考书。

　　李柯泉，研究生学历,现就职于大连海事大学信息科学技术中心是大连海事大学CSDN高校俱乐部*任负责人。

*篇 移动开发入门
第1章 初探移动开发 3
1.1 如今的移动行业 3
1.1.1 手机和平板的世界 3
1.1.2 移动互联网的神话 7
1.2 跨平台移动开发框架 9
1.2.1 什么是跨平台移动开发框架 9
1.2.2 为什么选择跨平台移动开发框架 10
1.2.3 常见的跨平台移动开发框架 11
1.3 真正认识HTML 5 15
1.3.1 初识HTML 5 16
1.3.2 只要在网站上加一句就是HTML 5网站了吗 17
1.3.3 HTML 5变迁 17
1.3.4 HTML 5浪潮 18
1.4 认识jQuery Mobile 20
1.4.1 为什么选择jQuery Mobile 20
1.4.2 渐进式增强的主题界面 21
1.4.3 简单但是有条理的标记化语言规范 22
1.4.4 响应式布局 23
1.4.5 jQuery Mobile的缺点 24
1.4.6 jQuery Mobile案例 25
1.5 小结 29

第2章 启程跨平台开发之旅 30
2.1 为什么选择跨平台 30
2.2 创建一个应用 30
2.2.1 创建跨平台应用 31
2.2.2 同步本地应用到云端资源库 33
2.2.3 真机同步调试 34
2.2.4 云端编译打包 35
2.3 小结 36
第3章 使用jQuery Mobile快速开发APP 37
3.1 开发环境的选择 37
3.1.1 Sublime Text编辑器 37
3.1.2 Notepad++编辑器 38
3.1.3 WebStorm编辑器 40
3.1.4 在设备上测试应用 41
3.1.5 打包应用的方法 44
3.2 原理解析 46
3.2.1 选择元素 47
3.2.2 设置属性 47
3.3 链接和按钮 48
3.4 工具栏 48
3.5 列表 49
3.6 表单控件 49
3.7 小结 50
第二篇 jQuery Mobile基础
第4章 页面与对话框 53
4.1 依然从hello world开始 53
4.2 利用jQuery脚本DIY闪光灯效果 55
4.3 不断切换的场景 58
4.4 整人游戏：我不是弱智！ 62
4.5 警告！你的手机遭到入侵 65
4.6 实现渐变的背景 67
4.7 另一种对话框 68
4.8 对话框的高级属性 69
4.9 基于jQuery Mobile的简单相册 73
4.10 总结 76
第5章 工具栏的使用 77
5.1 稍微复杂的页面 77
5.1.1 尝试使用工具栏 77
5.1.2 让工具栏固定 80
5.1.3 一次无聊的实验 82
5.2 方便的快捷键 84
5.3 失效的按钮 86
5.4 导航栏的应用 87
5.5 导航栏的全屏属性 90
5.6 内容栏的使用 92
5.7 会弹出的面板 95
5.8 小结 98
第6章 按钮的使用 99
6.1 简单按钮的使用 99
6.2 为按钮加入图标 101
6.3 更加个性化的显示图标 104
6.4 自定义按钮的图标 107
6.5 播放器的面板设计 109
6.6 头部栏中的按钮图标 111
6.7 一个按钮也可以玩得很开心 114
6.8 简单的QWER键盘 117
6.9 方形的按钮 119
6.10 对话框中的按钮 120
6.11 小结 122
第7章 表单元素的使用 123
7.1 简单的QQ登录界面 123
7.2 手机调查问卷 127
7.3 精准的进度控制 129
7.4 多彩的调色板 131
7.5 熄灯，请闭眼 132
7.6 做一道选择题 135
7.7 多项选择题 137
7.8 请问先生需要什么服务 139
7.9 对话框中的表单 141
7.10 小结 143
第8章 列表控件的使用 144
8.1 简单的新闻列表 144
8.2 音乐专辑列表的显示 147
8.3 更完善的音乐专辑列表 149
8.4 显示销量的商品列表 151
8.5 图书销售排名 153
8.6 简单的电话通讯录 155
8.7 让查找更加便捷 157
8.8 比较高级的新闻列表 159
8.9 小结 162
第9章 jQuery Mobile的布局 163
9.1 改良后的QQ登录界面 163
9.2 一种简洁的通讯录设计 166
9.3 完美实现九宫格 170
9.4 可以折叠的QQ好友列表 172
9.5 展开图标的设置 177
9.6 两种不同的Metro效果实现思路 179
9.6.1 完全利用分栏布局的方法 180
9.6.2 利用纯CSS调整色块尺寸的方法 181
9.7 简洁的课程表 184
9.8 小结 186
第10章 jQuery Mobile的高级特性 187
10.1 jQuery Mobile的多页面模板 187
10.2 jQuery Mobile中的事件 192
10.3 jQuery Mobile中的触发事件 194
10.4 触发事件的简单应用 194
10.5 jQuery Mobile的属性 198
10.6 小结 200
第11章 在jQuery Mobile中使用插件 201
11.1 jQuery Mobile插件概述 201
11.2 相册类插件 202
11.2.1 PhotoSwipe的使用 203
11.2.2 Camera的使用 207
11.3 菜单类插件 208
11.4 选择器插件以及其他插件 209
11.5 如何获取jQuery Mobile插件 210
11.6 小结 212
第12章 jQuery Mobile界面综合实战 213
12.1 清爽的电子书阅读器 213
12.2 简单的计算器 216
12.3 移动BBS模板 218
12.4 基于jQuery Mobile的简单记事本 221
12.5 基于jQuery Mobile的全键盘界面 223
12.6 小结 226
第三篇 跨平台APP实战
第13章 大学移动校园实战项目 229
13.1 项目背景 229
13.2 界面设计 230
13.3 框架设计 231
13.4 主界面的制作 232
13.5 二级栏目的制作 238
13.6 内容页的制作 241
13.7 校园风光模块 243
13.8 小结 243
第14章 个人博客项目实战 244
14.1 项目规划 244
14.2 主界面设计 246
14.3 文章列表的设计 248
14.4 文章内容页的实现 253
14.5 文章类的设计 255
14.6 测试环境的搭建 257
14.7 数据库的设计 262
14.8 内容页功能的实现 268
14.9 文章列表的实现 273
14.10 首页的实现 277
14.11 小结 279
第15章 在线音乐播放器 280
15.1 项目介绍 280
15.2 界面布局设计 283
15.2.1 首页界面设计 283
15.2.2 推荐专题页面的设计 284
15.2.3 歌手列表界面设计 285
15.2.4 专辑列表界面设计 286
15.3 控制面板功能的实现 286
15.3.1 audio控件简介 286
15.3.2 需求分析 290
15.3.3 功能实现 292
15.4 界面的实现 297
15.4.1 首页界面的实现 298
15.4.2 推荐专题界面的实现 299
15.4.3 歌手列表界面的实现 301
15.4.4 专辑列表界面的实现 303
15.5 数据库的设计 304
15.6 后台的实现 309
15.6.1 数据库连接类的实现 309
15.6.2 主页功能的实现 311
15.6.3 推荐专题页面功能实现 313
15.6.4 歌手列表功能的实现 321
15.6.5 专辑列表功能的实现 323
15.7 小结 325
第16章 在线视频播放器 326
16.1 项目需求 326
16.2 界面设计 327
16.3 界面的实现 329
16.3.1 主题文件的获取 329
16.3.2 主页界面的实现 331
16.3.3 二级页面的实现 333
16.3.4 视频播放界面的实现 335
16.4 数据库设计 337
16.5 功能的实现 340
16.5.1 首页功能的实现 340
16.5.2 专辑列表功能的实现 343
16.5.3 播放页面的实现 346
16.6 小结 349
第17章 大学校园表白墙 350
17.1 项目介绍 350
17.2 页面设计 351
17.2.1 主页兼登录页面的设计 351
17.2.2 注册页面的设计 352
17.2.3 信息发布页面的设计 353
17.3 界面的实现 353
17.3.1 首页界面的实现 353
17.3.2 登录界面的实现 355
17.3.3 注册页面的实现 359
17.3.4 表白模块的实现 361
17.4 数据库的设计 362
17.5 功能的实现 365
17.5.1 注册功能的实现 365
17.5.2 主页功能的实现 369
17.5.3 发表留言功能的实现 374
17.5.4 首页的完善 377
17.6 小结 381
第18章 天天背单词项目实战 382
18.1 项目说明 382
18.2 *版的实现 383
18.2.1 *版界面的实现 383
18.2.2 数据库的建立 386
18.2.3 功能的实现 386
18.2.4 阶段性总结 388
18.3 改进和完善 389
18.3.1 方案描述 389
18.3.2 列表页面的实现 389
18.3.3 列表页面功能的实现 391
18.3.4 背单词页面的改进 393
18.4 小结 396
第四篇 发布和推广应用
第19章 应用的发布和推广 399
19.1 如何生成跨平台的应用 399
19.2 怎样发布应用 401
19.3 怎样推广应用 403
19.4 小结 403

　　第 4 章
　　页面与对话框 ?
　　本章将以实例介绍在jQuery Mobile中使用page控件的方法。page控件不仅是jQuery Mobile中非常重要的控件，更是必不可少的控件。虽然它的用法非常简单，却能反映出程序员对编码理解的深度。
　　本章还将介绍利用原生jQuery提高页面交互性的例子。本章主要的知识点包括：
　　page控件，包括page的高级用法，以及如何人为修改jQuery Mobile中已定义的属性
　　适应各种屏幕的方法
　　利用链接来实现页面间切换的方法
　　对话框的使用方法
　　4.1 依然从hello world开始
　　有人说每个程序员都曾经有过改变世界的梦想，笔者认为，这与程序员年轻时编写的*个程序有着莫大的关系。一句简单的hello world让年轻的心开始相信梦想，用一种低调的壮志凌云向世界展示自己的存在。那么，今天就让我们从hello world开始逐梦之旅吧。
　　【范例4-1 简单的页面—hello world】
　　01
　　02
　　03
　　04
　　05 //本节的重点所在
　　06 hello world //title属性在应用中是不显示的
　　07 //jQuery Mobile样式文件
　　08 //引入jQuery脚本
　　09 //引入jQuery Mobile脚本
　　10
　　11
　　12 //此处为页面控件
　　13 hello world //在空间中插入内容hello world
　　14
　　15
　　16
　　程序运行结果如图4-1所示。
　　该例虽然看上去非常简单，但是它就像C语言中的hello world一样，是今后利用jQuery Mobile进行应用开发时*基础的模板。
　　这实际上就是一个HTML页面，但是仔细观察会发现第5行的代码比较陌生：
　　这行代码限定了页面的宽度要与设备的宽度保持一致。因为移动设备的种类实在太多，作为开发者，肯定没有办法考虑到每一种设备的兼容性，因此只有借助于HTML本身来帮助我们。
　　接下来还有一个更加令人感到陌生的属性initial-scale=1，这个属性又是什么意思呢？可将1改为2运行之后看一下效果，结果如图4-2所示。
　　图4-1 hello world 图4-2 修改后的hello world
　　可以看到屏幕中的字体放大了一倍。原来initial-scale=1的作用是规定页面在加载时所要放大的倍数，等于1时即为保持原尺寸不变。
　　目前，电脑屏幕的分辨大多是1366×768像素，而*近一些以高分辨率为亮点的智能手机的分辨率已经达到了720×1280像素，与此同时大多数人所使用手机的分辨率还停留在一个较低的水平。这就导致了如果没有一种切实可行的手段来区分这些用户，开发人员就无法做到真正完美的用户体验。
　　那么到底有没有这样一种方法呢？当然是有的，只要通过修改initial-scale属性的值来放大页面的内容尺寸，就能够很好地实现不同设备上的兼容问题。在本章*后的综合项目实例中将给出一个这样的例子。
　　meta是HTML中非常重要的一个标签，但是它的应用却常常被开发者所忽略。
　　4.2 利用jQuery脚本DIY闪光灯效果
　　在电影的开头常常会播放一段非常简短但是又特别炫目的动画来吸引观众的注意力，笔者一直对这样炫目的镜头向往不已，但是这些效果都需要专业人士通过专业的设备来完成，这不免令人遗憾。不过没有关系，经过笔者多年的研究，有一些办法可以实现一些简单的影视特效。如本节要介绍的闪光灯效果的代码。
　　实际上原理非常简单，就是利用jQuery不断地切换页面的背景颜色，代码如下：
　　【范例4-2 闪光灯】
　　01
　　02 //注意本书的html头标记都是HTML 5标记
　　03
　　04
　　05
　　06
　　07 不断闪动的页面
　　08
　　09
　　10
　　11
　　12
　　28
　　29
　　30
　　31
　　32
　　33
　　运行之后可以看到页面以很快的速度闪动，颜色不断地在红黄两色之间切换。其中第12~27行即为使用的脚本程序。程序将在页面加载完成后开启setInterval()计数器，其中的100表示的是计数器运行的间隔为100ms，设置了一个临时变量i用来记录当前的状态，当背景变为红色时将i置为0，变成黄色再还原为1。$("div")选择了页面中的所有div标签，由于该页面中只有一个div，因此选中了page控件，然后利用CSS改变页面的属性。
　　既然这是一本介绍jQuery Mobile的书，介绍这样的内容有跑题的嫌疑，但是真相并非如此。笔者也曾想过选用page颜色为黑白两色的两套主题，然后利用jQuery来修改page的主题属性应该是*完美的方法，为此，曾经做出如下代码：
　　【范例4-3 利用jQuery Mobile主题的闪光灯】
　　01
　　02
　　03
　　04
　　05
　　06 使用jQuery Mobile主题的闪光灯
　　07
　　08
　　09
　　10
　　11
　　27
　　28
　　29
　　30
　　31
　　32
　　运行之后页面停在开始的黑色背景处，为了确认jQuery确实起到了修改页面属性的作用，笔者对jQuery脚本做了一点修改，使其在运行时能够以对话框的形式显示出page控件当前所使用的主题：
　　运行结果如图4-3所示。
　　……

　　jQuery Mobile是一个免费的、开源的、跨平台的移动开发框架，是基于HTML 5的快速开发工具，它能够极大地解放开发者的时间和精力。遗憾的是，由于国内交流氛围所限，目前关于jQuery Mobile的资料非常少，而且不够详细。作者结合自己的开发经验，在本书中全面介绍了jQuery Mobile的控件、jQuery Mobile的布局，以及jQuery Mobile开发和发布应用的方法。本书的目的是力求通过实战让读者在练习中熟练掌握利用jQuery Mobile快速开发的方法，并能够真实地将技术转化为经济利益。可以这么说，jQuery Mobile的前途和钱途都是不可限量的。
　　本书特色
　　实战，实战，还是实战
　　本书采用实例驱动的方式介绍jQuery Mobile下的APP开发，全书通过70余个实战案例手把手指导读者进行移动开发，*后还通过6个小型项目来复习和巩固所学知识点。
　　不是iOS平台、Android平台下的开发，是全平台开发
　　本书开发的项目是全平台应用，读者可移植到任意的移动平台，这是jQuery Mobile风靡的原因，也是本书的宗旨，即实现真正的跨平台应用。
　　技术来源于生活，案例也来源于生活
　　本书的案例包含了笔者做过的很多应用，包括天天背单词APP、移动校园APP、在线音乐播放器、在线视频播放器、通讯录、课程表、Metro界面、新闻列表、手机调查问卷、计算器、移动BBS、电子阅读器等，这些案例全部来源于真实的生活。
　　低门槛、浅阅读，轻轻松松就能学会
　　为使本书更加详尽易懂，每写完一章，笔者特意邀请3位零基础在校生阅读并提出意见，快速分析出被遗漏的知识点和讲解不清楚的技术点，使本书更方便初学者入门。笔者的初衷是：不但能让读者了解做什么（What）与怎么做（How），更能让读者清楚为什么要这么做（Why），本书还提供了很多跨平台移动APP的工具和使用技巧，帮助读者找到*佳的学习路径和项目解决方案。
　　知识结构
　　本书共四篇19章，主要章节规划如下。
　　*篇（第1~3章）移动开发入门
　　跨平台的框架有很多，为什么选择jQuery Mobile？选择它后，如何为它搭建开发环境？搭建完环境后，又如何开发*个Hello World应用？如何测试和打包应用？这些都是本篇要介绍的内容，除此之外，笔者还解答了初学者对于HTML 5的一些常见误区。
　　第二篇（第4~12章）jQuery Mobile基础
　　凡是玩过智能手机的人都知道，一个APP大概会包含页面、对话框、工具栏、按钮、表单、列表等可视元素，本篇就是介绍如何用jQuery Mobile制作这些元素，并在手机上显示出来。学会这些后，还介绍jQuery Mobile的一些高级特性，如布局、插件、事件等。本篇*后通过计算器、移动BBS、记事本、全键盘界面这几个小案例来复习这些jQuery Mobile的重要知识点。
　　第三篇（第13~18章）跨平台APP实战
　　本篇介绍了6个利用jQuery Mobile实现的项目，分别为大学移动校园、个人博客项目、在线音乐播放器、在线视频播放器、大学校园表白墙、天天背单词。本书不仅仅给出了这些项目的源代码，还给出了数据库和APP UI的一些设计技巧。
　　第四篇（第19章）发布和推广应用
　　本篇内容不多，却是APP能被广大受众认可的关键内容。本篇讲述了如何将jQuery Mobile开发的应用通过APICloud打包，然后生成各个平台可执行文件。本篇还介绍了发布和推广应用的方法，使读者能真正将开发的应用转化为经济效益。
　　面向读者
　　? HTML 5初学者与HTML 5开发人员
　　? 跨平台移动应用开发人员
　　? 前端开发人员和前端设计人员
　　? jQuery Mobile初学者和开发人员
　　? 高等院校及培训学校的师生
　　本书代码下载
　　致谢
　　参与本书创作的人员除了封面署名作者外，还有王立平、刘祥淼、彭霁、樊爱宛、张泽娜、曹卉、林江闽、李阳、宋阳、杨超、赵东、李玉莉、刘岩、李雷霆、韩广义等。在此感谢清华大学出版社图格事业部编辑们的辛苦工作，使本书尽早与读者见面。
　　编 者
　　2017年1月