HTML5移动Web开发指南

章节摘录

版权页：   插图：   9.13 本章小结 Sencha Touch是目前一款比较成熟的基于HTML5标准的移动Web应用程序框架。SenchaTouch框架的实现原理和ExtJS基本相同，因此其语法方面基本上一致。 由于上述这个原因，本章并没有针对Sencha Touch的实现原理及核心功能做详细的探讨，而是主要介绍了一些比较常用的界面组件库，例如工具栏、Tab、浮动层、选择器、列表等，以及一些在开发移动Web应用中比较重要的组件。然而，我们并没深入地探讨Sencha Touch的各种特性，而是通过大量示例代码来讲解各个组件库的使用方法。 在介绍完UI组件库后，我们还根据Sencha Touch对HTML5的支持情况进行了简单的分析并通过示例代码来讲述如何运用这些特性。 在本章的最后，我们还讨论了Sencha Touch的一项重要特性：MVC模式的基本用法。并通过对MVC开发模式的入门介绍，让读者学到如何使用Sencha Touch开发真正的移动Web应用程序。 第10章 跨平台的PhoneGap应用介绍 PhoneGap是一个非常有趣的跨平台Web应用框架。本章我们将为读者介绍这款非常优秀的框架，并通过介绍其API接口让读者对PhoneGap有基本认识。 10.1 PhoneGap概述 PhoneGap是一款基于HTML5标准的跨平台开源手机Web应用开发框架。它允许用户通过Web技术访问移动设备的本地应用、API接口及应用程序库等。 PhoneGap将移动设备提供的API进行了抽象和简化，提供了丰富的API接口供开发者调用，开发者只要会编写HTML和JavaScript语言，就可以利用PhoneGap提供的API去调用移动设备内置的各种功能，开发者只需要开发一套Web应用程序，就能运行在多平台手机上。 PhoneGap的官方网站是http：／／www.phonegap.com。读者可以通过官方网站获取关于PhoneGap的最新信息、版本及API文档。 功能特性 PhoneGap是一套非常优秀的手机应用程序框架，它具有以下一些特性： 开源、免费。 跨平台框架，目前支持多种移动设备平台，包括：iOS、Android、BlackBerry、WebOS、Symbian、Windows Phone、Bada等。 基于HTML5标准的手机应用框架，支持HTML5、CSS3、JavaScript等Web技术。 Written once，run everywhere。真正实现了编写一次，云端运行。

媒体关注与评论

　　当HTML5遇到移动，一切似曾相识，又那么不同。本书帮助传统Web开发者搭乘HTML5快车，轻松部署移动应用，也使移动开发者得以充分发掘Web潜力，在工业标准的起点上获得跨平台支持。“HTML5研究小组”是由个人和企业HTML5开发者于2011年共同发起的，是中国首个HTML5推广和交流的开放组织。本书作者三桥是小组的个人成员，长期专注于Web前端技术的研究，为小组贡献颇多。欣闻三桥的新书出版，我们非常荣幸地向广大HTML5爱好者推荐本书！请多支持！　　——HTML5研究小组　　　　HTML5技术的到来以及近年3G网络的快速发展，让我们摆脱了单调乏味的Wap页面，取而代之的是手机像电脑一样访问酷炫移动Web页面，这大大增强了网站在移动Web方面的用户体验。《HTML5移动Web开发指南》用丰富的实例来为读者解读HTML5在移动Web领域开发中运用到的技术和应用，以及主流的移动Web应用框架，是移动互联网从业者入门的最佳选择。　　——HTML5中文网移动　　　　Web开发在近一年来逐渐被开发者所关注和研究。著名的jQuery和Sencha分别推出全新的移动开发框架-iQuery Mobile和Sencha Touch，与此同时，打通Web和Native的开源中间件-Phone Gap的出现，让很多开发者能够更加轻松地开发基于手机的Web应用程序。特别是得益于HTML5标准的诞生，移动Web应用的功能也变得更为丰富。本书将着重为读者介绍如何把移动Web框架与HTML5技术相结合，开发出更具实际意义的移动Web应用。　　——移动Web开发社区

内容概要

唐俊开，Web前端工程师、软件工程师，HTML5研究小组成员之一。拥有多年Web开发经验，热爱并长期专注于Web前端技术的研究，现从事Web前端工作、HTML5研究以及移动Web应用的实践。擅长HTML、CSS、JavaScript、Java等开发技术。热爱读书，阅读过大量技术书籍。

书籍目录

第1章移动互联网时代的Web技术
1

1.1  移动互联网的发展
1

1.2  智能手机发展迅速
2

1.3  智能手机的Web浏览器
4

1.4  移动Web应用的发展
7

1.5  基于HTML5的移动Web应用
8

第2章移动设备HTML5页面布局
12

2.1  页面语义化简介
12

2.1.1  HTML5新语义元素概述
12

2.1.2  更多HTML5新元素
16

2.2  页面结构与移动设备的布局
16

2.2.1  常见的移动应用布局
17

2.2.2  使用HTML5创建标准的移动Web页面
18

2.3  本章小结
22

第3章  HTML5规范的本地存储
23

3.1  移动设备的支持
23

3.2  localStorage
24

3.3  sessionStorage
28

3.4  Storage事件监听
29

3.5  本章小结
33

第4章移动Web的离线应用
34

4.1  离线Web概述
34

4.1.1  离线与缓存
34

4.1.2  离线的意义
35

4.2  移动设备的支持
35

4.3  applicationCache和manifest
36

4.3.1  manifest文件
36

4.3.2  applicationCache对象和事件
38

4.4  本章小结
39

第5章移动设备的常见HTML5表单元素
40

5.1  丰富的表单属性
40

5.2  移动Web表单的input类型
42

5.2.1  search类型文本
42

5.2.2  email类型文本
43

5.2.3  number类型文本
44

5.2.4  range类型文本
45

5.2.5  tel类型文本
45

5.2.6  url类型文本
46

5.2.7  更多的类型
46

5.3  表单属性应用范围
47

5.4  本章小结
47

第6章移动Web界面样式
48

6.1  CSS3
48

6.2  选择器
49

6.2.1  属性选择器
49

6.2.2  伪类选择器
51

6.3  阴影
53

6.3.1  box-shadow
53

6.3.2  text-shadow
54

6.4  背景
54

6.4.1  background-size
55

6.4.2  background-clip
55

6.4.3  background-origin
55

6.4.4  background
56

6.5  圆角边框
56

6.6  Media Queries移动设备样式
57

6.6.1  传统网站在iPhone上的显示问题
57

6.6.2  viewport设置适应移动设备屏幕大小
59

6.6.3  Media Queries如何工作
60

6.6.4  Media Queries语法总结
63

6.6.5  如何将官方网站移植成移动Web网站
65

6.7  本章小结
73

第7章Geolocation地理定位
74

7.1  功能介绍
74

7.2  浏览器支持情况
75

7.3  如何使用Geolocation API
75

7.3.1  首次获取当前位置
75

7.3.2  监视移动设备的位置变化
77

7.4  本章小结
78

第8章轻量级框架jQuery Mobile初探
79

8.1  jQuery Mobile概述
79

8.2  入门示例Hello World
80

8.2.1  部署文件
80

8.2.2  编码
81

8.3  基于HTML5的自定义属性驱动组件
82

8.3.1  dataset自定义属性
82

8.3.2  使用dataset属性驱动jQuery Mobile组件
83

8.4  页面与视图
85

8.4.1  标准的移动Web页面
85

8.4.2  移动设备的视图
86

8.4.3  多视图Web页面
88

8.4.4  改变页面标题的视图
90

8.4.5  视图切换动画
91

8.4.6  dialog对话框
92

8.4.7  页面主题
93

8.5  button按钮
94

8.5.1  button组件
94

8.5.2  具有icon图标的button组件
95

8.5.3  具有内联样式的button
98

8.5.4  具有分组功能的button按钮
99

8.6  Bar工具栏
102

8.6.1  如何使用工具栏
103

8.6.2  含有后退按钮的Header工具栏
104

8.6.3  多按钮的Footer工具栏
107

8.6.4  导航条工具栏
109

8.6.5  定义fixed工具栏
113

8.6.6  全屏模式工具栏
114

8.7  内容区域格式布局
114

8.7.1  网格布局
114

8.7.2  仿9宫格排列的按钮组例子
120

8.7.3  折叠块功能
122

8.7.4  创建具有手风琴效果的例子
124

8.8  Form表单
125

8.8.1  如何使用表单提交功能
126

8.8.2  HTML5文本框类型
126

8.8.3  HTML5搜索类型输入框
127

8.8.4  Slider类型
128

8.8.5  Toggle类型
129

8.8.6  单选按钮类型
130

8.8.7  复选框类型
133

8.8.8  下拉选择菜单
135

8.9  List列表
144

8.9.1  基本列表类型
145

8.9.2  普通链接列表
147

8.9.3  多层次嵌套列表
149

8.9.4  有序编号列表
151

8.9.5  只读列表
153

8.9.6  可分割按钮列表
154

8.9.7  列表的分隔符
155

8.9.8  列表搜索过滤器
157

8.9.9  含有气泡式计数的列表
159

8.9.10  显示列表项右侧文本格式的列表
160

8.9.11  列表项含有图标的列表
162

8.9.12  数据项含有图片的列表
163

8.9.13  内嵌列表
164

8.9.14  列表的性能问题
166

8.10  配置选项
166

8.11  Event事件
170

8.11.1  页面加载事件
171

8.11.2  其他事件类型
171

8.12  实用方法和工具
173

8.12.1  页面视图辅助工具
174

8.12.2  数据存储
176

8.12.3  地址路径辅助工具
177

8.12.4  loading显示/隐藏
184

8.13  主题系统
185

8.14  本章小结
186

第9章重量级富框架Sencha Touch入门
187

9.1  Sencha Touch概述
187

9.1.1  功能特点
187

9.1.2  官方套件包
188

9.2  入门示例Hello World
190

9.2.1  部署文件
190

9.2.2  开始编码
190

9.2.3  调试环境
192

9.2.4  页面调整
192

9.3  事件管理
194

9.3.1  自定义事件
194

9.3.2  初始化事件
195

9.3.3  Touch触控事件
196

9.3.4  事件管理器Ext.EventManager
197

9.4  核心组件库
199

9.4.1  Ext.lib.Component
199

9.4.2  属性、方法、事件
200

9.5  Toolbar工具栏
210

9.5.1  创建一个只有标题的工具栏例子
211

9.5.2  模拟前进返回按钮的工具栏例子
212

9.5.3  具有图标效果按钮的工具栏例子
214

9.5.4  按钮组的工具栏
216

9.6  Tabs选项卡
219

9.6.1  使用TabPanel组件定义Tab页面
219

9.6.2  选项卡功能
220

9.7  Carousel
222

9.8  Overlays遮罩层
224

9.8.1  Alert提示信息类型
224

9.8.2  Confirm确认提示框类型
226

9.8.3  Prompt提示输入类型
227

9.8.4  ActionSheet选择器类型
229

9.8.5  Overlay浮动层显示框类型
232

9.9  Picker选择器
234

9.9.1  创建单列的选择器例子
235

9.9.2  创建允许选择日期的选择器例子
236

9.10  List列表
238

9.10.1  创建基本的列表例子
238

9.10.2  改进的分组列表例子
240

9.10.3  使用Ajax异步请求的列表
242

9.10.4  XTemplate模板的应用
245

9.11  对HTML5的支持和封装
249

9.11.1  封装HTML5新表单元素
249

9.11.2  HTML5表单应用例子
249

9.11.3  封装GeoLocation地理定位功能
252

9.11.4  本地存储的支持
255

9.11.5  多媒体的支持
257

9.12  MVC开发模式
258

9.12.1  MVC介绍
258

9.12.2  创建application应用程序
259

9.12.3  Model实体对象
262

9.12.4  View视图类
267

9.12.5  setActiveItem使用方法
268

9.12.6  Controller业务逻辑类
270

9.13  本章小结
272

第10章跨平台的PhoneGap应用介绍
273

10.1  PhoneGap概述
273

10.2  搭建PhoneGap开发环境
274

10.2.1  如何在Android平台下搭建PhoneGap开发环境
275

10.2.2  如何在iOS平台下搭建PhoneGap
280

10.3  硬件设备接口
283

10.3.1  Accelerometer加速度传感器
283

10.3.2  Compass对象获取指南针信息
286

10.3.3  使用connection对象检测网络状态
289

10.3.4  File对象操作文件系统
290

10.3.5  使用Device对象获取移动设备的信息
307

10.4  软件接口
309

10.4.1  Camera对象获取照片资源
309

10.4.2  Capture对象采集多媒体资源
312

10.4.3  使用Contacts对象获取通信录资源
317

10.4.4  公告警示信息
326

10.4.5  Media对象
328

10.5  Events事件
328

10.5.1  公共事件
329

10.5.2  网络状态事件
332

10.5.3  Android专有事件
333

10.6  HTML5特性
335

10.6.1  GeoLocation定位位置
336

10.6.2  Storage特性
336

10.7  本章小结
336

第11章构建基于HTML5的生活轨迹Web App
337

11.1  项目背景
337

11.1.1  功能介绍
337

11.1.2  功能模块
339

11.2  创建基本应用程序
340

11.2.1  创建首页
340

11.2.2  创建入口函数
341

11.3  设置Model数据模型
343

11.3.1  创建Model实体类
343

11.3.2  设置Store对象
344

11.4  创建View视图组件
344

11.4.1  列表视图
344

11.4.2  列表组件
346

11.4.3  表单视图
346

11.4.4  浏览生活轨迹视图
349

11.4.5  Sheet组件选择更多功能
350

11.5  业务逻辑
352

11.5.1  定义controller类
352

11.5.2  实现视图之间的切换
352

11.5.3  保存生活轨迹内容
355

11.5.4  实现Geolocation地理定位
355

11.5.5  显示生活轨迹内容
357

11.5.6  显示Google地图
358

11.5.7  显示Sheet组件函数
360

11.5.8  清除所有存储的列表函数
360

11.5.9  删除一条记录的函数
361

11.6  缓存文件
362

11.6.1  设置manifest文件内容
362

11.6.2  设置HTML缓存文件
363

11.7  后端服务器通信
364

11.8  本章小结
365

第12章进阶之路
366

12.1  重新理解HTML5
366

12.2  浏览器的Web开发文档
367

12.3  网站或社区的推荐
367

12.4  移动Web应用框架
368

作者简介

《HTML5移动Web开发指南》主要围绕html5技术，讲述如何利用html5相关技术开发移动web网站和web app应用程序。《HTML5移动Web开发指南》共分为四大部分，第一部分主要讲述web技术的发展及html5标准在移动web技术中的应用；第二部分主要介绍html5的新功能和新特性如何在移动设备浏览器中使用及相关展望；第三部分主要介绍目前比较流行的两套javascript移动开发框架jquery mobile、sencha touch，以及phonegap，并配备丰富的例子作为实践；第四部分主要结合sencha touch框架库和html5技术构建进行讲解，旨在帮助读者将html5技术运用于实践之中。

图书封面

---

 HTML5移动Web开发指南下载 更多精彩书评

---