移動(dòng)Web開發(fā)從入門到精通：基于HTML 5+jQuery Mobile+PhoneGap

目 錄
Chapter 1 Web 開發(fā)基礎(chǔ)..............1
1.1 認(rèn)識(shí)網(wǎng)頁和網(wǎng)站...................... 1
1.1.1 什么是網(wǎng)頁..................... 1
1.1.2 什么是網(wǎng)站..................... 1
1.2 網(wǎng)頁的基本構(gòu)成元素.............. 2
1.3 網(wǎng)頁和網(wǎng)站制作...................... 3
1.3.1 網(wǎng)站發(fā)展趨勢(shì)................. 3
1.3.2 制作網(wǎng)頁的基本流程..... 4
1.3.3 網(wǎng)站制作流程................. 5
1.3.4 網(wǎng)站設(shè)計(jì)原則................. 6
1.4 HTML 基礎(chǔ)............................ 6
1.4.1 HTML 初步.................... 7
1.4.2 字體格式設(shè)置................. 7
1.4.3 使用標(biāo)示標(biāo)記............... 11
1.4.4 使用區(qū)域和段落標(biāo)記..... 12
1.4.5 使用表格標(biāo)記............... 14
1.4.6 使用表單標(biāo)記............... 17
1.5 CSS 技術(shù)基礎(chǔ)....................... 20
1.5.1 基本語法....................... 20
1.5.2 CSS 屬性介紹............... 21
1.5.3 CSS 編碼規(guī)范............... 23
1.6 JavaScript 基礎(chǔ).................... 24
1.6.1 JavaScript 概述............. 24
1.6.2 JavaScript 運(yùn)算符......... 25
1.6.3 JavaScript 循環(huán)語句..... 26
1.6.4 JavaScript 函數(shù)............. 28
1.6.5 JavaScript 事件............. 30
Chapter 2 移動(dòng)應(yīng)用程序開發(fā)基礎(chǔ)..........................33
2.1 智能手機(jī)介紹........................ 33
2.2 主流智能手機(jī)系統(tǒng)................ 33
2.2.1 Symbian（塞班）......... 34
2.2.2 Android ......................... 34
2.2.3 iOS 系統(tǒng)....................... 35
2.2.4 Windows Phone ............ 36
2.2.5 Blackberry OS（黑莓） ....................... 37
2.3 Android 系統(tǒng)介紹................ 38
2.3.1 強(qiáng)大的開發(fā)團(tuán)隊(duì).......... 38
2.3.2 誘人的獎(jiǎng)勵(lì)機(jī)制.......... 38
2.3.3 開源.............................. 39
2.4 iOS 系統(tǒng)介紹........................ 39
2.4.1 iOS 發(fā)展史................... 39
2.4.2 iOS 系統(tǒng)....................... 40
2.4.3 從iPhone 到iPad ......... 41
2.5 創(chuàng)建能在通用設(shè)備上運(yùn)行的網(wǎng)站....................................... 41
2.5.1 確定應(yīng)用程序類型....... 41
2.5.2 使用CSS 改善HTML外觀.............................. 42
2.5.3 加入移動(dòng)meta 標(biāo)簽..... 44
2.5.4 優(yōu)化網(wǎng)站...................... 45
2.6 將站點(diǎn)升級(jí)至HTML 5 ....... 46
2.6.1 確定何時(shí)升級(jí)和升級(jí)的具體方式...................... 46
2.6.2 升級(jí)到HTML 5 的步驟.............................. 47
2.6.3 將HTML5 特性作為額外內(nèi)容添加至網(wǎng)站.......... 48
2.6.4 使用HTML 5 為移動(dòng)Web 提供的服務(wù)........... 49
2.7 將Web 程序遷移到移動(dòng)設(shè)備....................................... 49
2.7.1 選擇Web 編輯器......... 49
2.7.2 測(cè)試應(yīng)用程序.............. 50
2.7.3 移動(dòng)網(wǎng)站內(nèi)容的特點(diǎn)..... 50
2.7.4 為移動(dòng)設(shè)備調(diào)整可視化的設(shè)計(jì).......................... 51
2.7.5 HTML5 及CSS3 檢測(cè).... 52
2.8 搭建Android 開發(fā)環(huán)境....... 53
2.8.1 安裝Android SDK 的系統(tǒng)要求....................... 53
2.8.2 安裝JDK ...................... 54
2.8.3 獲取并安裝Eclipse 和Android SDK ................ 58
2.8.4 安裝ADT ..................... 61
2.8.5 設(shè)定Android SDKHome............................. 63
2.8.6 驗(yàn)證開發(fā)環(huán)境............... 64
2.8.7 創(chuàng)建Android 虛擬設(shè)備（AVD） .............. 65
2.8.8 啟動(dòng)AVD 模擬器........ 67
2.9 搭建iOS 開發(fā)環(huán)境............... 68
2.9.1 開發(fā)前的準(zhǔn)備——加入
iOS 開發(fā)團(tuán)隊(duì)............... 69
2.9.2 安裝Xcode ................... 70
2.9.3 Xcode 介紹................... 71
2.9.4 下載并安裝Xcode ....... 71
2.9.5 創(chuàng)建一個(gè)Xcode 項(xiàng)目并啟動(dòng)模擬器................... 74
Chapter 3 HTML5 基本元素詳解..........................79
3.1 分欄設(shè)計(jì)................................ 79
3.2 使用標(biāo)記元素........ 80
3.2.1 常用屬性....................... 80
3.2.2 實(shí)現(xiàn)下拉彈出效果....... 82
3.3 使用標(biāo)記元素... 83
3.4 使用標(biāo)記元素.......... 84
3.4.1 標(biāo)記屬性介紹.... 85
3.4.2 實(shí)現(xiàn)右鍵菜單功能....... 87
3.5 使用標(biāo)記.......... 88
3.6 使用標(biāo)記元素.... 91
3.7 使用標(biāo)記元素......... 93
3.8 使用樹節(jié)點(diǎn)標(biāo)記元素............ 95
3.8.1 元素............... 95
3.8.2 元素.................... 95
3.8.3 元素............... 96
Chapter 4 使用表單元素............. 98
4.1 表單元素的類型................... 98
4.1.1 “email”類型.............. 98
4.1.2 “url”類型................ 100
4.1.3 “number”類型........ 101
4.1.4 “range”類型............ 103
4.1.5 Date Pickers（日期檢出器） ........ 104
4.1.6 “search”類型.......... 106
4.2 表單元素中的屬性............. 108
4.2.1 保存表單中的數(shù)據(jù)..... 108
4.2.2 驗(yàn)證表單中輸入的數(shù)據(jù)是否合法............ 111
4.2.3 在文本框中顯示提示信息............................ 112
4.2.4 驗(yàn)證文本框中的內(nèi)容是否為空.................... 113
4.2.5 開啟表單的自動(dòng)完成功能.................... 115
4.2.6 重寫表單中的某些屬性.................... 116
4.2.7 自動(dòng)設(shè)置表單中傳遞數(shù)字............................ 117
4.2.8 在表單中選擇多個(gè)上傳文件.................... 118
Chapter 5 多媒體應(yīng)用............... 120
5.1 處理視頻............................. 120
5.1.1 使用標(biāo)記....... 120
5.1.2 標(biāo)記的屬性.... 121
5.2 處理音頻............................. 125
5.2.1 標(biāo)記............... 125
5.2.2 標(biāo)記的屬性.... 126
5.3 高級(jí)應(yīng)用............................. 129
5.3.1 為播放的視頻準(zhǔn)備一幅素材圖片............ 129
5.3.2 顯示加載視頻的狀態(tài)............................ 132
5.3.3 出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息............ 133
5.3.4 檢測(cè)瀏覽器是否支持這個(gè)媒體類型............. 135
5.3.5 顯示視頻的播放狀態(tài)............................. 137
5.3.6 顯示播放視頻的時(shí)間信息............................. 139
Chapter 6 Canvas 繪圖處理.......142
6.1 Canvas 標(biāo)記基礎(chǔ)................ 142
6.2 使用HTML DOM Canvas對(duì)象...................................... 143
6.3 HTML 5 繪圖實(shí)踐............. 144
6.3.1 在指定位置繪制指定角度的相交線............. 144
6.3.2 繪制一個(gè)圓................. 145
6.3.3 在畫布中顯示一幅指定的圖片..................... 146
6.3.4 繪制一個(gè)指定大小的正方形......................... 147
6.3.5 繪制一個(gè)帶邊框的矩形............................. 149
6.3.6 繪制一個(gè)漸變圖形..... 151
6.3.7 繪制不同的圓形......... 152
6.3.8 繪制一個(gè)漸變圓形..... 156
6.3.9 移動(dòng)、縮放和旋轉(zhuǎn)網(wǎng)頁中的圖形............. 158
6.3.10 使用組合的方式顯示圖形..................... 160
Chapter 7 數(shù)據(jù)存儲(chǔ)...................163
7.1 Web 存儲(chǔ)............................. 163
7.1.1 什么是Web 存儲(chǔ)....... 163
7.1.2 Web 存儲(chǔ)的影響........ 163
7.2 HTML 5 中的兩種存儲(chǔ)方法..................................... 164
7.2.1 使用localStorage方法............................. 164
7.2.2 使用sessionStorage方法............................. 165
7.3 數(shù)據(jù)存儲(chǔ)對(duì)象...................... 166
7.3.1 使用sessionStorage對(duì)象............................ 166
7.3.2 使用localStorage對(duì)象............................ 170
7.3.3 使用clear()方法......... 173
7.3.4 使用localStorage屬性............................ 175
7.4 WebDB 存儲(chǔ)方式............... 177
7.4.1 WebDB 存儲(chǔ)基礎(chǔ)...... 177
7.4.2 執(zhí)行事物操作............ 179
7.4.3 調(diào)用執(zhí)行SQL 語句..... 181
Chapter 8 jQuery Mobile 基礎(chǔ)... 184
8.1 jQuery Mobile 簡介........... 184
8.1.1 jQuery 介紹................ 184
8.1.2 jQuery Mobile的特點(diǎn)........................ 185
8.1.3 對(duì)瀏覽器的支持........ 186
8.1.4 對(duì)平臺(tái)的支持............ 186
8.2 jQuery Mobile 的特性....... 187
8.2.1 跨所有移動(dòng)平臺(tái)的統(tǒng)一UI ....................... 187
8.2.2 簡化的標(biāo)記驅(qū)動(dòng)的開發(fā)............................ 188
8.2.3 漸進(jìn)式增強(qiáng)................ 188
8.2.4 響應(yīng)式設(shè)計(jì)................ 188
8.3 獲取jQuery Mobile ........... 189
8.3.1 下載插件.................... 189
8.3.2 使用URL 方式加載插件文件.................... 191
8.4 搭建測(cè)試環(huán)境..................... 191
8.5 實(shí)戰(zhàn)演練——使用jQueryMobile 設(shè)計(jì)網(wǎng)頁................ 193
Chapter 9 jQuery Mobile 語法基礎(chǔ)......................... 197
9.1 頁面結(jié)構(gòu)............................. 197
9.1.1 基本框架介紹............ 197
9.1.2 多頁面模板................ 200
9.1.3 設(shè)置內(nèi)部頁面的頁面標(biāo)題.................... 202
9.1.4 比較單頁面文檔和多頁面文檔................. 203
9.2 導(dǎo)航鏈接處理...................... 204
9.2.1 設(shè)置外部頁面鏈接..... 204
9.2.2 頁面后退鏈接............. 204
9.3 使用Ajax 修飾導(dǎo)航........... 205
9.3.1 使用Ajax.................... 206
9.3.2 使用函數(shù)changePage() .......................... 208
9.3.3 配置Ajax 導(dǎo)航........... 209
Chapter 10 預(yù)加載、頁面緩存、頁面腳本和對(duì)話框..........210
10.1 預(yù)加載................................ 210
10.2 頁面緩存............................ 212
10.3 轉(zhuǎn)換.................................... 213
10.4 頁面腳本............................ 213
10.4.1 創(chuàng)建頁面................... 214
10.4.2 跳轉(zhuǎn)頁面................... 215
10.5 創(chuàng)建對(duì)話框的方法............ 217
10.6 實(shí)現(xiàn)常用的對(duì)話框............ 219
10.6.1 實(shí)現(xiàn)基本的對(duì)話框效果........................... 219
10.6.2 實(shí)現(xiàn)操作表樣式對(duì)話框........................... 220
10.6.3 實(shí)現(xiàn)警告框............... 223
10.6.4 關(guān)閉對(duì)話框............... 225
Chapter 11 實(shí)現(xiàn)導(dǎo)航功能.........227
11.1 導(dǎo)航基礎(chǔ)............................ 227
11.2 頁眉欄（頭部）................ 227
11.2.1 頁眉基礎(chǔ)................... 227
11.2.2 頁眉欄的基本結(jié)構(gòu)..... 228
11.2.3 實(shí)現(xiàn)頁眉定位........... 229
11.3 在頁眉中使用按鈕............ 229
11.3.1 設(shè)置后退按鈕的文字........................... 230
11.3.2 手動(dòng)添加按鈕........... 232
11.3.3 只有圖標(biāo)的按鈕....... 233
11.3.4 設(shè)定按鈕位置........... 233
11.3.5 實(shí)現(xiàn)回退按鈕效果.... 234
11.4 實(shí)現(xiàn)分段導(dǎo)航功能........... 234
11.4.1 使用分段控件.......... 234
11.4.2 設(shè)置導(dǎo)航欄的圖標(biāo)... 239
11.4.3 設(shè)置導(dǎo)航欄圖標(biāo)的位置.......................... 240
11.4.4 自定義導(dǎo)航欄的圖標(biāo)...................... 240
11.4.5 截?cái)鄻?biāo)題.................. 243
Chapter 12 頁腳欄、工具欄和標(biāo)簽...................... 245
12.1 頁腳欄（尾部欄） ........... 245
12.1.1 頁腳基礎(chǔ)知識(shí).......... 245
12.1.2 頁腳定位.................. 247
12.1.3 頁腳按鈕.................. 250
12.2 工具欄............................... 252
12.2.1 帶有圖標(biāo)的工具欄... 253
12.2.2 帶有分段控件的工具欄...................... 255
12.3 標(biāo)簽欄............................... 255
12.3.1 帶有標(biāo)準(zhǔn)圖標(biāo)的標(biāo)簽欄...................... 255
12.3.2 永久標(biāo)簽欄.............. 257
12.3.3 有自定義圖標(biāo)的標(biāo)簽欄...................... 258
12.3.4 帶有分段控件的標(biāo)簽欄...................... 260
Chapter 13 按鈕和表單............ 261
13.1 鏈接按鈕........................... 261
13.2 表單按鈕........................... 263
13.3 為按鈕設(shè)置圖像............... 264
13.3.1 使用圖像按鈕.......... 264
13.3.2 使用有圖標(biāo)的按鈕... 264
13.3.3 使用只帶有圖標(biāo)的按鈕.......................... 265
13.4 內(nèi)聯(lián)按鈕........................... 265
13.5 實(shí)現(xiàn)按鈕定位................... 266
13.6 自定義按鈕圖標(biāo)............... 268
13.7 實(shí)現(xiàn)分組按鈕................... 268
13.7.1 分組按鈕基礎(chǔ).......... 268
13.7.2 使用分組按鈕........... 269
13.8 使用動(dòng)態(tài)按鈕.................... 271
13.8.1 按鈕選項(xiàng)................... 271
13.8.2 按鈕方法................... 272
13.8.3 按鈕事件................... 273
13.9 表單基礎(chǔ)............................ 273
13.9.1 動(dòng)態(tài)輸入文本........... 273
13.9.2 文本輸入選項(xiàng)........... 274
13.9.3 文本輸入方法........... 276
13.9.4 文本輸入事件........... 276
13.10 選擇菜單.......................... 276
13.10.1 使用基本的選擇菜單........................... 276
13.10.2 自定義選擇菜單..... 278
13.10.3 占位符選項(xiàng)............. 278
13.10.4 動(dòng)態(tài)選擇菜單......... 279
13.10.5 選擇菜單選項(xiàng)......... 279
13.10.6 選擇菜單的方法..... 281
13.10.7 選擇菜單事件......... 281
13.11 單選按鈕.......................... 281
13.11.1 使用簡單的單選按鈕........................... 282
13.11.2 復(fù)選框和單選按鈕的事件............... 282
13.11.3 復(fù)選框和單選按鈕的事件............... 282
13.12 使用復(fù)選框...................... 283
13.12.1 動(dòng)態(tài)復(fù)選框............. 283
13.12.2 水平放置復(fù)選框..... 285
13.12.3 使用動(dòng)態(tài)復(fù)選框..... 286
13.13 使用滑動(dòng)條...................... 288
13.13.1 滑動(dòng)條基礎(chǔ)............. 288
13.13.2 滑動(dòng)條的選項(xiàng)......... 288
13.13.3 滑動(dòng)條方法............. 289
13.13.4 滑動(dòng)條事件............. 289
Chapter 14 PhoneGap 基礎(chǔ).......292
14.1 PhoneGap 簡介................. 292
14.1.1 產(chǎn)生背景介紹........... 292
14.1.2 什么是PhoneGap ..... 293
14.1.3 PhoneGap 的發(fā)展歷程.......................... 293
14.1.4 全新的功能.............. 294
14.1.5 PhoneGap 的發(fā)展現(xiàn)狀.......................... 295
14.2 原生應(yīng)用、Web 應(yīng)用和混合型應(yīng)用....................... 295
14.2.1 原生應(yīng)用.................. 295
14.2.2 Web 應(yīng)用.................. 296
14.2.3 混合型應(yīng)用.............. 296
14.2.4 PhoneGap 的優(yōu)點(diǎn)和缺點(diǎn)...................... 297
14.3 PhoneGap API 基礎(chǔ)......... 298
14.4 PhoneGap 的工作............ 299
14.5 PhoneGap 開發(fā)必備技術(shù)................................... 299
14.5.1 Titanium 框架........... 299
14.5.2 Adobe AIR 技術(shù)....... 300
14.5.3 Corona 庫.................. 301
14.5.4 常用的JavaScript移動(dòng)UI 框架............ 301
Chapter 15 PhoneGap 事件詳解...................... 303
15.1 PhoneGap 的事件概述.... 303
15.2 deviceready 事件.............. 304
15.2.1 deviceready 事件基礎(chǔ).......................... 304
15.2.2 使用deviceready事件.......................... 305
15.3 pause 和resume 事件...... 306
15.3.1 使用pause 事件....... 306
15.3.2 使用resume 事件..... 308
15.4 online 事件和offline事件................................... 310
15.4.1 online 事件............... 310
15.4.2 offline 事件............... 311
15.5 batterycritical、batterylow和batterystatus ................ 313
15.5.1 使用batterycritical事件.......................... 313
15.5.2 使用batterylow事件........................... 314
15.5.3 使用batterystatus事件........................... 315
15.6 backbutton 事件............... 318
15.7 searchbutton 事件............ 319
15.8 其他事件............................ 320
15.8.1 使用menubutton事件........................... 320
15.8.2 使用startcallbutton事件........................... 321
15.8.3 使用endcallbutton事件........................... 322
15.8.4 使用volumedownbutton事件........................... 322
15.8.5 使用volumeupbutton事件........................... 323
Chapter 16 API——應(yīng)用和通知詳解........................324
16.1 應(yīng)用API............................ 324
16.1.1 白名單安全機(jī)制....... 324
16.1.2 訪問對(duì)象的方法....... 325
16.2 Notification 提醒.............. 326
16.2.1 主要對(duì)象................... 326
16.2.2 使用alert 方法.......... 326
16.2.3 使用confirm 方法.... 328
16.2.4 使用beep 方法......... 331
16.2.5 使用vibrate 方法...... 332
16.2.6 活動(dòng)指示器和進(jìn)度對(duì)話框通知............... 334
16.2.7 狀態(tài)燈通知............... 337
16.3 綜合演練——演示各種API的基本用法........................ 337
Chapter 17 API——設(shè)備、網(wǎng)絡(luò)連接和加速計(jì)..................344
17.1 設(shè)備API............................ 344
17.1.1 主要對(duì)象................... 344
17.1.2 使用name 方法........ 344
17.1.3 使用phonegap方法.......................... 345
17.1.4 使用platform方法.......................... 345
17.1.5 使用uuid 方法......... 346
17.1.6 使用version 方法..... 346
17.1.7 實(shí)戰(zhàn)演練——使用設(shè)備API................... 346
17.2 網(wǎng)絡(luò)連接API.................... 347
17.2.1 屬性和常量.............. 347
17.2.2 使用網(wǎng)絡(luò)連接API ... 348
17.3 加速計(jì)API........................ 349
17.3.1 使用acceleration對(duì)象.......................... 349
17.3.2 使用getCurrentAcceleration 方法..... 350
17.3.3 使用watchAcceleration方法.......................... 352
17.3.4 使用clearWatch方法.......................... 354
17.3.5 加速計(jì)API 的參數(shù).. 356
17.4 綜合演練——實(shí)現(xiàn)一個(gè)藍(lán)牙控制器....................... 356
Chapter 18 地理位置API 詳解... 375
18.1 地理位置基礎(chǔ)................... 375
18.1.1 應(yīng)用背景.................. 375
18.1.2 Geolocation 接口介紹.......................... 376
18.2 Geolocation 對(duì)象詳解...... 376
18.2.1 Position 對(duì)象............ 376
18.2.2 PositionError 對(duì)象.... 378
18.2.3 Coordinates 對(duì)象...... 378
18.3 參數(shù)詳解........................... 380
18.3.1 geolocationSuccess..... 381
18.3.2 geolocationError ....... 381
18.3.3 geolocationOptions..... 381
18.4 操作方法........................... 382
18.4.1 獲取設(shè)備當(dāng)前的地理位置信息.................. 382
18.4.2 定期獲取設(shè)備的地理位置信息................... 384
18.4.3 取消定期獲取設(shè)備的地理位置信息........... 386
Chapter 19 指南針API 詳解......389
19.1 指南針API 的四個(gè)對(duì)象... 389
19.1.1 “CompassHeading”對(duì)象........................... 389
19.1.2 “CompassError”對(duì)象........................... 390
19.1.3 “CompassSuccess”對(duì)象........................... 390
19.1.4 “CompassOptions”對(duì)象........................... 390
19.2 指南針方法........................ 390
19.2.1 獲取設(shè)備當(dāng)前的指南針信息............... 390
19.2.2 定期獲取設(shè)備的指南針信息............... 392
19.2.3 取消定期獲取設(shè)備的指南針信息............... 394
19.2.4 獲取羅盤的朝向度數(shù)........................... 396
19.2.5 停止監(jiān)聽................... 398
Chapter 20 照相機(jī)API 詳解......400
20.1 三個(gè)方法............................ 400
20.1.1 方法“camera.get
Picture” ................... 400
20.1.2 方法“camera
Success”.................. 402
20.1.3 方法“camera
Error” ...................... 403
20.1.4 實(shí)戰(zhàn)演練——使用照相機(jī)API............... 403
20.2 業(yè)務(wù)操作........................... 403
20.2.1 業(yè)務(wù)操作基礎(chǔ).......... 405
20.2.2 實(shí)戰(zhàn)演練.................. 406
20.3 綜合演練——實(shí)現(xiàn)拍照并設(shè)置為頭像................... 409
Chapter 21 采集API 詳解......... 414
21.1 Capture 的對(duì)象................ 414
21.1.1 Capture 對(duì)象............. 414
21.1.2 CaptureAudioOptions對(duì)象.......................... 414
21.1.3 CaptureImageOptions對(duì)象.......................... 415
21.1.4 CaptureVideoOptions對(duì)象.......................... 416
21.1.5 CaptureCB 對(duì)象....... 416
21.1.6 CaptureErrorCB對(duì)象.......................... 417
21.1.7 ConfigurationData對(duì)象.......................... 417
21.1.8 MediaFile 對(duì)象......... 418
21.1.9 MediaFileData 對(duì)象.. 418
21.2 Capture 的方法................ 418
21.2.1 capture.captureAudio方法.......................... 418
21.2.2 capture.captureImage方法.......................... 421
21.2.3 MediaFile.getFormatData 方法.................. 423
21.2.4 capture.captureVideo 方法................ 423