jQuery Mobile權(quán)威指南

前言
第1章　初識(shí)jQuery Mobile/1
1.1　jQuery Mobile簡(jiǎn)介/2
1.1.1　功能特點(diǎn)/2
1.1.2　支持平臺(tái)/3
1.1.3　與jQTouch、Sencha Touch、SproutCore的比較/4
1.2　如何獲取jQuery Mobile/5
1.2.1　下載插件文件/5
1.2.2　使用URL方式加載插件文件/6
1.3　jQuery Mobile應(yīng)用開(kāi)發(fā)迅速上手/6
1.4　本章小結(jié)/10
第2章　頁(yè)面與對(duì)話框/11
2.1　jQuery Mobile頁(yè)面結(jié)構(gòu)/12
2.1.1　基本框架/12
2.1.2　多容器頁(yè)面結(jié)構(gòu)/13
2.1.3　外部頁(yè)面鏈接/15
2.1.4　頁(yè)面后退鏈接/18
2.2　預(yù)加載與頁(yè)面緩存/20
2.2.1　預(yù)加載/20
2.2.2　頁(yè)面緩存/22
2.3　頁(yè)面的腳本/23
2.3.1　創(chuàng)建頁(yè)面/23
2.3.2　跳轉(zhuǎn)頁(yè)面/25
2.3.3　加載頁(yè)面/27
2.4　對(duì)話框/29
2.4.1　創(chuàng)建簡(jiǎn)單對(duì)話框/29
2.4.2　關(guān)閉對(duì)話框/31
2.5　本章小結(jié)/33
第3章　工具欄與格式化內(nèi)容/34
3.1　頭部欄/35
3.1.1　頭部欄的基本結(jié)構(gòu)/35
3.1.2　設(shè)置后退按鈕的文字/37
3.1.3　添加按鈕/39
3.1.4　設(shè)定按鈕位置/41
3.2　導(dǎo)航欄/43
3.2.1　導(dǎo)航欄的基本結(jié)構(gòu)/43
3.2.2　頭部導(dǎo)航欄/44
3.2.3　導(dǎo)航欄的圖標(biāo)/46
3.2.4　設(shè)置導(dǎo)航欄圖標(biāo)位置/48
3.2.5　自定義圖標(biāo)/50
3.3　尾部欄/54
3.3.1　添加按鈕/54
3.3.2　添加表單元素/56
3.4　內(nèi)容格式化/57
3.4.1　網(wǎng)格布局/57
3.4.2　可折疊的區(qū)塊/60
3.4.3　可嵌套的折疊區(qū)塊/62
3.4.4　折疊組標(biāo)記/63
3.5　本章小結(jié)/65
第4章　頁(yè)面常用組件/66
4.1　按鈕/67
4.1.1　內(nèi)聯(lián)按鈕/67
4.1.2　按鈕組標(biāo)記/69
4.2　表單/71
4.2.1　文本輸入/71
4.2.2　滑塊/73
4.2.3　翻轉(zhuǎn)切換開(kāi)關(guān)/75
4.2.4　單選按鈕/76
4.2.5　復(fù)選框/78
4.2.6　選擇菜單/81
4.2.7　多項(xiàng)選擇菜單/84
4.3　列表/86
4.3.1　基本列表/86
4.3.2　嵌套列表/87
4.3.3　有序列表/89
4.3.4　分割按鈕列表/91
4.3.5　分割列表項(xiàng)/93
4.3.6　圖標(biāo)與計(jì)數(shù)器/95
4.3.7　內(nèi)容格式化與計(jì)數(shù)器/96
4.4　本章小結(jié)/98
第5章　jQuery Mobile主題/99
5.1　主題的定義及使用場(chǎng)景/100
5.1.1　默認(rèn)主題/100
5.1.2　修改默認(rèn)主題/103
5.1.3　自定義主題/105
5.2　列表與表單元素的主題/108
5.2.1　列表主題/108
5.2.2　表單主題/110
5.2.3　按鈕主題/112
5.2.4　激活狀態(tài)主題/113
5.3　工具欄與頁(yè)面內(nèi)容的主題/115
5.3.1　工具欄主題/115
5.3.2　頁(yè)面主題/117
5.3.3　內(nèi)容主題/119
5.4　本章小結(jié)/121
第6章　jQuery Mobile插件/122
6.1　圖片滑動(dòng)瀏覽插件PhotoSwipe/123
6.2　圖片幻燈片插件Camera/126
6.3　滾動(dòng)選擇時(shí)間插件Mobiscroll/130
6.4　搜索插件AutoComplete/133
6.5　日期對(duì)話框插件DateBox/136
6.6　簡(jiǎn)單對(duì)話框插件SimpleDialog/138
6.7　快捷標(biāo)簽插件ActionSheet/142
6.8　本章小結(jié)/145
第7章　jQuery Mobile API詳解/146
7.1　基本配置項(xiàng)/147
7.1.1　自定義頁(yè)面加載和出錯(cuò)提示信息/147
7.1.2　使用函數(shù)修改gradeA配置值/149
7.2　事件/152
7.2.1　觸摸事件/152
7.2.2　設(shè)置翻轉(zhuǎn)事件/156
7.2.3　屏幕滾動(dòng)事件/158
7.2.4　頁(yè)面顯示或隱藏事件/161
7.3　訪問(wèn)地址的相關(guān)方法/164
7.3.1　訪問(wèn)路徑和URL地址轉(zhuǎn)換方法/164
7.3.2　URL地址驗(yàn)證方法/167
7.3.3　域名比較方法/170
7.3.4　縱向滾動(dòng)方法/172
7.4　本章小結(jié)/175
第8章　jQuery Mobile開(kāi)發(fā)技巧與最佳實(shí)踐/176
8.1　開(kāi)啟或禁用列表項(xiàng)中的箭頭/177
8.2　使用懸浮的方式固定頭部欄與尾部欄/179
8.3　初始化頁(yè)面隨機(jī)顯示背景圖/181
8.4　按鈕標(biāo)題文字的控制/183
8.5　偵聽(tīng)HTML 5畫(huà)布元素的觸摸事件/185
8.6　在jQuery Mobile 中提交表單數(shù)據(jù)/188
8.7　切換按鈕的開(kāi)啟/禁用狀態(tài)/191
8.8　開(kāi)啟或禁用AJAX方式打開(kāi)頁(yè)面鏈接/193
8.9　使用localStorage傳遞鏈接參數(shù)/196
8.10　在jQuery Mobile中構(gòu)建離線功能/198
8.11　本章小結(jié)/201
第9章　開(kāi)發(fā)移動(dòng)終端新聞?dòng)嗛喒芾硐到y(tǒng)/202
9.1　需求分析/203
9.1.1　總體設(shè)計(jì)/203
9.1.2　功能設(shè)計(jì)/203
9.2　數(shù)據(jù)結(jié)構(gòu)/204
9.2.1　數(shù)據(jù)庫(kù)設(shè)計(jì)/204
9.2.2　輸出API設(shè)計(jì)/206
9.3　系統(tǒng)封面開(kāi)發(fā)/208
9.4　系統(tǒng)首頁(yè)開(kāi)發(fā)/210
9.5　訂閱管理頁(yè)開(kāi)發(fā)/214
9.6　類別新聞頁(yè)開(kāi)發(fā)/217
9.7　新聞詳情頁(yè)開(kāi)發(fā)/221
9.8　其余文件/223
9.8.1　樣式文件/224
9.8.2　API接口文件/226
9.9　本章小結(jié)/226
第10章　開(kāi)發(fā)移動(dòng)終端記事本管理系統(tǒng)/227
10.1　需求分析/228
10.1.1　總體設(shè)計(jì)/228
10.1.2　功能設(shè)計(jì)/229
10.2　新手導(dǎo)航頁(yè)開(kāi)發(fā)/229
10.3　系統(tǒng)首頁(yè)開(kāi)發(fā)/233
10.4　記事列表頁(yè)開(kāi)發(fā)/236
10.5　記事詳細(xì)頁(yè)開(kāi)發(fā)/238
10.6　修改記事內(nèi)容頁(yè)開(kāi)發(fā)/241
10.7　添加記事內(nèi)容頁(yè)開(kāi)發(fā)/244
10.8　樣式文件/247
10.9　本章小結(jié)/249
實(shí) 例 目 錄
第1章　初識(shí)jQuery Mobile/1
實(shí)例1-1　Hello World 頁(yè)面的實(shí)現(xiàn)/6
實(shí)例1-2　多頁(yè)面的切換/8
第2章　頁(yè)面與對(duì)話框/11
實(shí)例2-1　jQuery Mobile 基本的頁(yè)面框架/12
實(shí)例2-2　jQuery Mobile多容器間的切換/14
實(shí)例2-3　jQuery Mobile外部頁(yè)面鏈接切換/16
實(shí)例2-4　jQuery Mobile頁(yè)面后退鏈接/18
實(shí)例2-5　jQuery Mobile頁(yè)面預(yù)加載/20
實(shí)例2-6　jQuery Mobile頁(yè)面緩存/22
實(shí)例2-7　jQuery Mobile中的pagecreate事件/24
實(shí)例2-8　使用changePage()方法跳轉(zhuǎn)頁(yè)面/25
實(shí)例2-9　使用loadPage()方法加載頁(yè)面/27
實(shí)例2-10　jQuery Mobile中創(chuàng)建對(duì)話框/29
實(shí)例2-11　jQuery Mobile中關(guān)閉對(duì)話框/31
第3章　工具欄與格式化內(nèi)容/34
實(shí)例3-1　頭部欄的基本結(jié)構(gòu)/35
實(shí)例3-2　設(shè)置后退按鈕的文字/37
實(shí)例3-3　添加按鈕/39
實(shí)例3-4　設(shè)定按鈕位置/41
實(shí)例3-5　添加尾部導(dǎo)航欄/43
實(shí)例3-6　添加頭部導(dǎo)航欄/44
實(shí)例3-7　為導(dǎo)航欄鏈接按鈕添加圖標(biāo)/47
實(shí)例3-8　設(shè)置導(dǎo)航欄鏈接按鈕圖標(biāo)的位置/49
實(shí)例3-9　自定義導(dǎo)航欄鏈接按鈕的圖標(biāo)/51
實(shí)例3-10　在尾部欄中添加按鈕/54
實(shí)例3-11　在尾部欄中添加表單元素/56
實(shí)例3-12　在內(nèi)容區(qū)域添加多種類型的網(wǎng)格布局/58
實(shí)例3-13　在正文中顯示可折疊的區(qū)塊/60
實(shí)例3-14　在正文中顯示可嵌套的折疊區(qū)塊/62
實(shí)例3-15　在正文中顯示折疊組標(biāo)記/63
第4章　頁(yè)面常用組件/66
實(shí)例4-1　內(nèi)聯(lián)按鈕/67
實(shí)例4-2　按鈕組標(biāo)記/69
實(shí)例4-3　不同類型的文本輸入/71
實(shí)例4-4　拖動(dòng)滑塊改變?cè)乇尘吧?73
實(shí)例4-5　翻轉(zhuǎn)切換開(kāi)關(guān)/75
實(shí)例4-6　用兩種方式顯示單選按鈕/77
實(shí)例4-7　用兩種方式顯示復(fù)選框/79
實(shí)例4-8　用兩種方式顯示選擇菜單/81
實(shí)例4-9　多項(xiàng)選擇菜單/84
實(shí)例4-10　基本列表/86
實(shí)例4-11　嵌套列表/88
實(shí)例4-12　有序列表/89
實(shí)例4-13　分割按鈕列表/91
實(shí)例4-14　分割列表項(xiàng)/93
實(shí)例4-15　列表中的圖標(biāo)與計(jì)數(shù)器/95
實(shí)例4-16　內(nèi)容格式化與計(jì)數(shù)器/97
第5章　jQuery Mobile主題/99
實(shí)例5-1　通過(guò)下拉框選擇并保存主題/101
實(shí)例5-2　修改默認(rèn)主題/103
實(shí)例5-3　自定義主題/105
實(shí)例5-4　列表容器混搭主題/108
實(shí)例5-5　改變表單主題/110
實(shí)例5-6　顯示5種按鈕主題風(fēng)格/112
實(shí)例5-7　激活狀態(tài)主題/114
實(shí)例5-8　工具欄主題混搭效果/115
實(shí)例5-9　改變頁(yè)面主題/117
實(shí)例5-10　折疊區(qū)域中的內(nèi)容主題/119
第6章　jQuery Mobile插件/122
實(shí)例6-1　圖片滑動(dòng)瀏覽插件PhotoSwipe的應(yīng)用/123
實(shí)例6-2　圖片幻燈片插件Camera的應(yīng)用/126
實(shí)例6-3　滾動(dòng)選擇時(shí)間插件Mobiscroll的應(yīng)用/130
實(shí)例6-4　搜索插件AutoComplete的應(yīng)用/133
實(shí)例6-5　日期對(duì)話框插件DateBox的應(yīng)用/137
實(shí)例6-6　簡(jiǎn)單對(duì)話框插件SimpleDialog的應(yīng)用/139
實(shí)例6-7　快捷標(biāo)簽插件ActionSheet的應(yīng)用/142
第7章　jQuery Mobile API詳解/146
實(shí)例7-1　自定義頁(yè)面加載和出錯(cuò)提示信息/147
實(shí)例7-2　使用函數(shù)修改gradeA配置值/149
實(shí)例7-3　使用觸摸事件滑動(dòng)瀏覽圖片/153
實(shí)例7-4　使用翻轉(zhuǎn)事件檢測(cè)移動(dòng)設(shè)備的手持方向/156
實(shí)例7-5　使用屏幕滾動(dòng)事件控制頁(yè)面顯示的文字與樣式/159
實(shí)例7-6　綁定頁(yè)面的顯示與隱藏事件/161
實(shí)例7-7　makePathAbsolute()和makeUrlAbsolute()轉(zhuǎn)換方法/165
實(shí)例7-8　isRelativeUrl()和isAbsoluteUrl()驗(yàn)證方法/168
實(shí)例7-9　域名比較方法isSameDomain()的使用/171
實(shí)例7-10　縱向滾動(dòng)方法silentScroll()的使用/173
第8章　jQuery Mobile開(kāi)發(fā)技巧與最佳實(shí)踐/176
實(shí)例8-1　開(kāi)啟或禁用列表項(xiàng)中的箭頭/177
實(shí)例8-2　使用懸浮的方式固定頭部欄與尾部欄/179
實(shí)例8-3　初始化頁(yè)面隨機(jī)顯示背景圖/181
實(shí)例8-4　按鈕標(biāo)題文字的控制/183
實(shí)例8-5　偵聽(tīng)HTML 5畫(huà)布元素的觸摸事件/185
實(shí)例8-6　在jQuery Mobile 中提交表單數(shù)據(jù)/188
實(shí)例8-7　切換按鈕的開(kāi)啟/禁用狀態(tài)/191
實(shí)例8-8　開(kāi)啟或禁用AJAX方式打開(kāi)頁(yè)面鏈接/193
實(shí)例8-9　使用localStorage傳遞鏈接參數(shù)/196
實(shí)例8-10　在jQuery Mobile中構(gòu)建離線功能/199
第9章　開(kāi)發(fā)移動(dòng)終端新聞?dòng)嗛喒芾硐到y(tǒng)/202
實(shí)例9-1　新聞?dòng)嗛喯到y(tǒng)封面開(kāi)發(fā)/208
實(shí)例9-2　新聞?dòng)嗛喯到y(tǒng)首頁(yè)開(kāi)發(fā)/210
實(shí)例9-3　新聞?dòng)嗛喒芾眄?yè)開(kāi)發(fā)/214
實(shí)例9-4　類別新聞頁(yè)開(kāi)發(fā)/217
實(shí)例9-5　新聞詳情頁(yè)開(kāi)發(fā)/221
第10章　開(kāi)發(fā)移動(dòng)終端記事本管理系統(tǒng)/227
實(shí)例10-1　新手導(dǎo)航頁(yè)開(kāi)發(fā)/229
實(shí)例10-2　記事本管理系統(tǒng)首頁(yè)開(kāi)發(fā)/233
實(shí)例10-3　記事列表頁(yè)開(kāi)發(fā)/236
實(shí)例10-4　記事詳細(xì)頁(yè)開(kāi)發(fā)/239
實(shí)例10-5　修改記事內(nèi)容頁(yè)開(kāi)發(fā)/241
實(shí)例10-6　添加記事內(nèi)容頁(yè)開(kāi)發(fā)/244