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

目 錄
Chapter 1 Web 開發(fā)基礎(chǔ)..............1
1.1 認(rèn)識網(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ā)展趨勢................. 3
1.3.2 制作網(wǎng)頁的基本流程..... 4
1.3.3 網(wǎng)站制作流程................. 5
1.3.4 網(wǎng)站設(shè)計原則................. 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 運算符......... 25
1.6.3 JavaScript 循環(huán)語句..... 26
1.6.4 JavaScript 函數(shù)............. 28
1.6.5 JavaScript 事件............. 30
Chapter 2 移動應(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)隊.......... 38
2.3.2 誘人的獎勵機(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è)備上運行的網(wǎng)站....................................... 41
2.5.1 確定應(yīng)用程序類型....... 41
2.5.2 使用CSS 改善HTML外觀.............................. 42
2.5.3 加入移動meta 標(biāo)簽..... 44
2.5.4 優(yōu)化網(wǎng)站...................... 45
2.6 將站點升級至HTML 5 ....... 46
2.6.1 確定何時升級和升級的具體方式...................... 46
2.6.2 升級到HTML 5 的步驟.............................. 47
2.6.3 將HTML5 特性作為額外內(nèi)容添加至網(wǎng)站.......... 48
2.6.4 使用HTML 5 為移動Web 提供的服務(wù)........... 49
2.7 將Web 程序遷移到移動設(shè)備....................................... 49
2.7.1 選擇Web 編輯器......... 49
2.7.2 測試應(yīng)用程序.............. 50
2.7.3 移動網(wǎng)站內(nèi)容的特點..... 50
2.7.4 為移動設(shè)備調(diào)整可視化的設(shè)計.......................... 51
2.7.5 HTML5 及CSS3 檢測.... 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 驗證開發(fā)環(huán)境............... 64
2.8.7 創(chuàng)建Android 虛擬設(shè)備（AVD） .............. 65
2.8.8 啟動AVD 模擬器........ 67
2.9 搭建iOS 開發(fā)環(huán)境............... 68
2.9.1 開發(fā)前的準(zhǔn)備——加入
iOS 開發(fā)團(tuán)隊............... 69
2.9.2 安裝Xcode ................... 70
2.9.3 Xcode 介紹................... 71
2.9.4 下載并安裝Xcode ....... 71
2.9.5 創(chuàng)建一個Xcode 項目并啟動模擬器................... 74
Chapter 3 HTML5 基本元素詳解..........................79
3.1 分欄設(shè)計................................ 79
3.2 使用標(biāo)記元素........ 80
3.2.1 常用屬性....................... 80
3.2.2 實現(xiàn)下拉彈出效果....... 82
3.3 使用標(biāo)記元素... 83
3.4 使用標(biāo)記元素.......... 84
3.4.1 標(biāo)記屬性介紹.... 85
3.4.2 實現(xiàn)右鍵菜單功能....... 87
3.5 使用標(biāo)記.......... 88
3.6 使用標(biāo)記元素.... 91
3.7 使用標(biāo)記元素......... 93
3.8 使用樹節(jié)點標(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 驗證表單中輸入的數(shù)據(jù)是否合法............ 111
4.2.3 在文本框中顯示提示信息............................ 112
4.2.4 驗證文本框中的內(nèi)容是否為空.................... 113
4.2.5 開啟表單的自動完成功能.................... 115
4.2.6 重寫表單中的某些屬性.................... 116
4.2.7 自動設(shè)置表單中傳遞數(shù)字............................ 117
4.2.8 在表單中選擇多個上傳文件.................... 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 高級應(yīng)用............................. 129
5.3.1 為播放的視頻準(zhǔn)備一幅素材圖片............ 129
5.3.2 顯示加載視頻的狀態(tài)............................ 132
5.3.3 出錯時在播放屏幕中顯示出錯信息............ 133
5.3.4 檢測瀏覽器是否支持這個媒體類型............. 135
5.3.5 顯示視頻的播放狀態(tài)............................. 137
5.3.6 顯示播放視頻的時間信息............................. 139
Chapter 6 Canvas 繪圖處理.......142
6.1 Canvas 標(biāo)記基礎(chǔ)................ 142
6.2 使用HTML DOM Canvas對象...................................... 143
6.3 HTML 5 繪圖實踐............. 144
6.3.1 在指定位置繪制指定角度的相交線............. 144
6.3.2 繪制一個圓................. 145
6.3.3 在畫布中顯示一幅指定的圖片..................... 146
6.3.4 繪制一個指定大小的正方形......................... 147
6.3.5 繪制一個帶邊框的矩形............................. 149
6.3.6 繪制一個漸變圖形..... 151
6.3.7 繪制不同的圓形......... 152
6.3.8 繪制一個漸變圓形..... 156
6.3.9 移動、縮放和旋轉(zhuǎn)網(wǎng)頁中的圖形............. 158
6.3.10 使用組合的方式顯示圖形..................... 160
Chapter 7 數(shù)據(jù)存儲...................163
7.1 Web 存儲............................. 163
7.1.1 什么是Web 存儲....... 163
7.1.2 Web 存儲的影響........ 163
7.2 HTML 5 中的兩種存儲方法..................................... 164
7.2.1 使用localStorage方法............................. 164
7.2.2 使用sessionStorage方法............................. 165
7.3 數(shù)據(jù)存儲對象...................... 166
7.3.1 使用sessionStorage對象............................ 166
7.3.2 使用localStorage對象............................ 170
7.3.3 使用clear()方法......... 173
7.3.4 使用localStorage屬性............................ 175
7.4 WebDB 存儲方式............... 177
7.4.1 WebDB 存儲基礎(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的特點........................ 185
8.1.3 對瀏覽器的支持........ 186
8.1.4 對平臺的支持............ 186
8.2 jQuery Mobile 的特性....... 187
8.2.1 跨所有移動平臺的統(tǒng)一UI ....................... 187
8.2.2 簡化的標(biāo)記驅(qū)動的開發(fā)............................ 188
8.2.3 漸進(jìn)式增強(qiáng)................ 188
8.2.4 響應(yīng)式設(shè)計................ 188
8.3 獲取jQuery Mobile ........... 189
8.3.1 下載插件.................... 189
8.3.2 使用URL 方式加載插件文件.................... 191
8.4 搭建測試環(huán)境..................... 191
8.5 實戰(zhàn)演練——使用jQueryMobile 設(shè)計網(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ù)加載、頁面緩存、頁面腳本和對話框..........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)建對話框的方法............ 217
10.6 實現(xiàn)常用的對話框............ 219
10.6.1 實現(xiàn)基本的對話框效果........................... 219
10.6.2 實現(xiàn)操作表樣式對話框........................... 220
10.6.3 實現(xiàn)警告框............... 223
10.6.4 關(guān)閉對話框............... 225
Chapter 11 實現(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 實現(xiàn)頁眉定位........... 229
11.3 在頁眉中使用按鈕............ 229
11.3.1 設(shè)置后退按鈕的文字........................... 230
11.3.2 手動添加按鈕........... 232
11.3.3 只有圖標(biāo)的按鈕....... 233
11.3.4 設(shè)定按鈕位置........... 233
11.3.5 實現(xiàn)回退按鈕效果.... 234
11.4 實現(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 截斷標(biāo)題.................. 243
Chapter 12 頁腳欄、工具欄和標(biāo)簽...................... 245
12.1 頁腳欄（尾部欄） ........... 245
12.1.1 頁腳基礎(chǔ)知識.......... 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 實現(xiàn)按鈕定位................... 266
13.6 自定義按鈕圖標(biāo)............... 268
13.7 實現(xiàn)分組按鈕................... 268
13.7.1 分組按鈕基礎(chǔ).......... 268
13.7.2 使用分組按鈕........... 269
13.8 使用動態(tài)按鈕.................... 271
13.8.1 按鈕選項................... 271
13.8.2 按鈕方法................... 272
13.8.3 按鈕事件................... 273
13.9 表單基礎(chǔ)............................ 273
13.9.1 動態(tài)輸入文本........... 273
13.9.2 文本輸入選項........... 274
13.9.3 文本輸入方法........... 276
13.9.4 文本輸入事件........... 276
13.10 選擇菜單.......................... 276
13.10.1 使用基本的選擇菜單........................... 276
13.10.2 自定義選擇菜單..... 278
13.10.3 占位符選項............. 278
13.10.4 動態(tài)選擇菜單......... 279
13.10.5 選擇菜單選項......... 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 動態(tài)復(fù)選框............. 283
13.12.2 水平放置復(fù)選框..... 285
13.12.3 使用動態(tài)復(fù)選框..... 286
13.13 使用滑動條...................... 288
13.13.1 滑動條基礎(chǔ)............. 288
13.13.2 滑動條的選項......... 288
13.13.3 滑動條方法............. 289
13.13.4 滑動條事件............. 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)點和缺點...................... 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移動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 訪問對象的方法....... 325
16.2 Notification 提醒.............. 326
16.2.1 主要對象................... 326
16.2.2 使用alert 方法.......... 326
16.2.3 使用confirm 方法.... 328
16.2.4 使用beep 方法......... 331
16.2.5 使用vibrate 方法...... 332
16.2.6 活動指示器和進(jìn)度對話框通知............... 334
16.2.7 狀態(tài)燈通知............... 337
16.3 綜合演練——演示各種API的基本用法........................ 337
Chapter 17 API——設(shè)備、網(wǎng)絡(luò)連接和加速計..................344
17.1 設(shè)備API............................ 344
17.1.1 主要對象................... 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 實戰(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 加速計API........................ 349
17.3.1 使用acceleration對象.......................... 349
17.3.2 使用getCurrentAcceleration 方法..... 350
17.3.3 使用watchAcceleration方法.......................... 352
17.3.4 使用clearWatch方法.......................... 354
17.3.5 加速計API 的參數(shù).. 356
17.4 綜合演練——實現(xiàn)一個藍(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 對象詳解...... 376
18.2.1 Position 對象............ 376
18.2.2 PositionError 對象.... 378
18.2.3 Coordinates 對象...... 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 的四個對象... 389
19.1.1 “CompassHeading”對象........................... 389
19.1.2 “CompassError”對象........................... 390
19.1.3 “CompassSuccess”對象........................... 390
19.1.4 “CompassOptions”對象........................... 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 三個方法............................ 400
20.1.1 方法“camera.get
Picture” ................... 400
20.1.2 方法“camera
Success”.................. 402
20.1.3 方法“camera
Error” ...................... 403
20.1.4 實戰(zhàn)演練——使用照相機(jī)API............... 403
20.2 業(yè)務(wù)操作........................... 403
20.2.1 業(yè)務(wù)操作基礎(chǔ).......... 405
20.2.2 實戰(zhàn)演練.................. 406
20.3 綜合演練——實現(xiàn)拍照并設(shè)置為頭像................... 409
Chapter 21 采集API 詳解......... 414
21.1 Capture 的對象................ 414
21.1.1 Capture 對象............. 414
21.1.2 CaptureAudioOptions對象.......................... 414
21.1.3 CaptureImageOptions對象.......................... 415
21.1.4 CaptureVideoOptions對象.......................... 416
21.1.5 CaptureCB 對象....... 416
21.1.6 CaptureErrorCB對象.......................... 417
21.1.7 ConfigurationData對象.......................... 417
21.1.8 MediaFile 對象......... 418
21.1.9 MediaFileData 對象.. 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