第1章HTML5移動入門11.1認識HTML1
1.1.1HTML的構成1
1.1.2CSS的構成2
1.1.3JavaScript的構成3
1.2認識HTML54
1.2.1HTML5的發展與理念5
1.2.2HTML5和XHTML的對比6
1.3制作一個簡單的HTML5移動APP7
1.3.1開發工具的選擇8
1.3.2APP代碼的編寫8
1.3.3調試運行HelloAPP9
1.4HTML5的移動特色10
1.5本章小結10
第2章移動特性1——移動表單11
2.1豐富的表單屬性11
2.2移動Web表單的input類型12
2.2.1search類型文本12
2.2.2email類型文本13
2.2.3number類型文本14
2.2.4range類型文本15
2.2.5tel類型文本15
2.2.6url類型文本16
2.3HTML5表單新屬性16
2.3.1autocomplete屬性16
2.3.2autofocus屬性17
2.4范例——創建一個HTML5版的APP注冊頁面18
2.4.1代碼設計19
2.4.2代碼分析24
2.5本章小結26
第3章移動特性2——多媒體形式27
3.1音頻視頻27
3.1.1音頻視頻的格式27
3.1.2使用video/audio元素27
3.1.3音頻視頻的通信29
3.2范例——制作音樂播放器APP31
3.3范例——制作視頻播放器APP33
3.3.1普通視頻播放器34
3.3.2添加視頻進度條37
3.3.3添加視頻快進慢進按鈕40
3.3.4處理帶字幕的視頻41
3.4本章小結43
第4章移動特性3——地理位置定位44
4.1認識地理位置44
4.1.1緯度和經度坐標44
4.1.2定位數據45
4.1.3構建地理位置應用46
4.2手機地理位置定位47
4.3谷歌地圖的使用49
4.3.1追蹤用戶的位置49
4.3.2查找路線53
4.3.3用戶自定義的地理定位61
4.4高德地圖的使用65
4.5本章小結67
第5章移動特性4——離線緩存68
5.1離線緩存應用68
5.1.1離線緩存API簡介68
5.1.2使用Manifest方法71
5.1.3使用ApplicationCacheAPI方法72
5.1.4搭建簡單的離線APP72
5.2離線事件處理76
5.3范例——離線貼吧APP80
5.4本章小結84
第6章移動特性5——Canvas繪圖85
6.1HTML5的繪圖API85
6.1.1什么是Canvas85
6.1.2加載Canvas86
6.1.3什么是SVG87
6.1.4什么是WebGL89
6.1.5Paper.js圖形庫90
6.2應用Canvas91
6.2.1繪制圖形92
6.2.2繪制文字96
6.2.3顏色漸變103
6.3范例——帶特效的相冊APP106
6.4本章小結114
第7章移動特性6——CSS3視覺輔助115
7.1CSS3的變化115
7.2背景(Backgrounds)116
7.3文字效果(TextEffects)117
7.4邊框(Border)118
7.5用戶界面(Userinterface)120
7.6轉換(Transform)122
7.7過渡(Transition)123
7.8范例——用CSS3畫哆啦A夢124
7.8.1頭和臉125
7.8.2脖子和鈴鐺129
7.8.3身體和四肢131
7.8.4讓眼睛動起來135
7.9本章小結136
第8章移動特性7——調用手機設備137
8.1HTML5調用手機攝像頭137
8.2HTML5調用手機相冊140
8.3HTML5調用手機通訊錄146
8.4本章小結149
第9章HTML5移動性能優化150
9.1HTML5的性能考量150
9.1.1瀏覽器性能150
9.1.2網絡性能153
9.1.3開發效率154
9.2加載優化156
9.2.1減少HTTP請求156
9.2.2充分利用緩存160
9.2.3壓縮161
9.2.4優化JavaScript加載性能165
9.2.5其他加載優化173
9.3CSS優化175
9.3.1了解頁面的渲染過程176
9.3.2避免在HTML標簽中寫Style屬性178
9.3.3正確使用display屬性179
9.3.4避免使用CSS表達式179
9.3.5請勿濫用float屬性180
9.3.6不濫用Web字體182
9.3.7不聲明過多的Font-size184
9.3.8優化選擇器的使用185
9.4圖片優化187
9.4.1使用CSS3代替圖片187
9.4.2使用DataURI代替圖片190
9.4.3使用SVG代替圖片194
9.4.4IconFont與SVG優劣對比196
9.4.5使用壓縮圖片197
9.4.6使用srcset198
9.4.7使用WebP200
9.5渲染優化201
9.5.1渲染流程202
9.5.2使用Viewport加速頁面渲染203
9.5.3動畫優化204
9.5.4高頻事件優化207
9.5.5GPU加速210
9.6腳本優化211
9.6.1腳本執行優化211
9.6.2條件JavaScript212
9.6.3緩存DOM操作215
9.6.4盡量使用事件代理以避免批量綁定事件219
9.6.5盡量使用ID選擇器221
9.6.6click事件優化223
9.7本章小結225
第10章jQueryMobile移動框架226
10.1初步接觸jQueryMobile226
10.1.1jQueryMobile框架特點226
10.1.2jQueryMobile框架安裝與配置227
10.1.3創建第一個jQueryMobileAPP229
10.2jQueryMobile頁面與導航231
10.2.1jQueryMobile單頁面231
10.2.2jQueryMobile多頁面233
10.2.3jQueryMobile對話框頁面236
10.2.4jQueryMobile導航241
10.2.5jQueryMobile加載246
10.2.6jQueryMobile動畫效果250
10.3jQueryMobileCSS樣式253
10.3.1按鈕樣式253
10.3.2圖標樣式260
10.3.3網格布局樣式264
10.4jQueryMobile小部件268
10.4.1工具條268
10.4.2導航條271
10.4.3選項卡275
10.4.4面板278
10.4.5彈出框281
10.5jQueryMobile表單284
10.5.1輸入框284
10.5.2復選框286
10.5.3單選按鈕288
10.5.4下拉列表框289
10.5.5滑塊控件291
10.6本章小結293
第11章SenchaTouch框架294
11.1初步接觸SenchaTouch294
11.1.1SenchaTouch框架特點294
11.1.2SenchaTouch框架環境搭建295
11.1.3創建第一個SenchaTouchAPP303
11.1.4SenchaTouchAPP代碼解析307
11.1.5運行SenchaTouchAPP318
11.2SenchaTouch核心概念320
11.2.1類系統320
11.2.2容器組件332
11.2.3組件布局334
11.2.4事件338
11.3SenchaTouch組件343
11.3.1導航視圖343
11.3.2旋燈視圖348
11.3.3表單351
11.4本章小結354
第12章jQueryMobile框架實戰——移動便箋APP355
12.1項目介紹355
12.2項目功能模塊356
12.2.1主頁356
12.2.2便箋內容瀏覽頁面358
12.2.3登錄頁面360
12.2.4便箋內容瀏覽頁面(用戶權限)362
12.2.5新建便箋內容364
12.2.6編輯便箋內容367
12.2.7刪除便箋內容367
12.2.8清空便箋內容368
12.3本章小結369
第13章SenchaTouch框架實戰——通訊錄APP370
13.1項目介紹370
13.2項目功能模塊371
13.2.1app.js主入口文件371
13.2.2Model模型372
13.2.3Store存儲372
13.2.4View主視圖373
13.2.5Contacts視圖類375
13.2.6Controller控制器376
13.3測試運行項目378
13.4本章小結380