jQuery Mobile權(quán)威指南

前言

創(chuàng)作背景在近幾年的IT行業(yè)發(fā)展中，最熱、最快的無疑是移動互聯(lián)網(wǎng)，它是繼互聯(lián)網(wǎng)之后的又一次信息技術(shù)革命。移動互聯(lián)網(wǎng)巨大的市場潛力創(chuàng)造了無限商機，人們紛紛加入其中，各種與之相應(yīng)的新技術(shù)、新應(yīng)用層出不窮。移動應(yīng)用離不開移動終端設(shè)備，如PC、手機、平板電腦等。據(jù)估算，到今年年底，市場中各類型智能手機的出貨量將突破1.4億臺，應(yīng)用的前景十分樂觀。目前，移動應(yīng)用的開發(fā)平臺大體分為三個方向，一個是收益穩(wěn)定的iOS系統(tǒng)，另一個是如日中天的Android系統(tǒng)，還有一個是蓄勢待發(fā)的Windows Phone系統(tǒng)。豐富的開發(fā)平臺增加了開發(fā)人員選擇的靈活性，但同時也帶了一個問題，就是應(yīng)用平臺的兼容性，而這種兼容性目前在各平臺中是不可調(diào)和的。因此，一個應(yīng)用需要開發(fā)三個不同平臺的版本，這種現(xiàn)狀將直接導(dǎo)致應(yīng)用開發(fā)和后期維護成本的上升。針對目前的這種多平臺現(xiàn)狀，如果以Web作為統(tǒng)一的平臺、瀏覽器作為應(yīng)用的入口，即以WebApp 的方式實現(xiàn)相應(yīng)的應(yīng)用，將大大簡化開發(fā)過程和減少應(yīng)用投入成本，這點也逐漸成為廣大Web開發(fā)者的共識。雖然WebApp開發(fā)應(yīng)用將會成為移動開發(fā)的一個主方向，但移動設(shè)備中瀏覽器的運行環(huán)境遠比PC端更為復(fù)雜，因此，使用原有的頁面框架遠不能解決各類型移動設(shè)備中瀏覽器的兼容性問題，必須引入其他輕量級、高性能的Web頁面框架。而在這方面，jQuery Mobile 在眾多移動頁面開發(fā)框架中脫穎而出，成為眾多開發(fā)者的首選。jQuery Mobile 的宗旨是在各移動設(shè)備的瀏覽器平臺中形成一個統(tǒng)一、靈活、漸進增強的系統(tǒng)，并使該系統(tǒng)在基于jQuery和jQuery UI的基礎(chǔ)上進行無縫地工作。它的簡略之處在于以純HTML結(jié)構(gòu)為中心的布局，頁面放置DIV和其他標準的HTML組件元素，這種結(jié)構(gòu)方式更容易集成其他的Web服務(wù)，同時，與jQuery的集成也將更加有利于移動框架的擴展。jQuery Mobile 除繼承了jQuery輕量級、兼容性好的框架主要特征外，還把“write less, do more”主旨提升到更高的一個層次，使開發(fā)者在學習和開發(fā)成本較低的前提下開發(fā)一個兼容各種主流移動平臺瀏覽器的WebApp的愿望成為現(xiàn)實。作為一項新的技術(shù)，jQuery Mobile雖然建立在jQuery和jQuery UI基礎(chǔ)之上，以HTML 5 新特征為依據(jù)，但其中包括眾多的頁面結(jié)構(gòu)、UI部件、主題和各類型的API，開發(fā)人員需要相應(yīng)的書籍來引導(dǎo)以快速而高效地學習并掌握它，并最終能夠真正運用到自己鐘愛的移動項目中。相信本書的誕生，一定會讓你在WebApp 開發(fā)方面有所得、有所悟。本書特點“學以致用”是本書的一個重要特點。全書始終體現(xiàn)一個“用”字，無論是理論知識的介紹，還是實例的開發(fā)，無一例外都是從實用的角度出發(fā)，每一個實例都是經(jīng)過精心選擇，每一個示意圖都是作者精心編排并進行扼要說明，使讀者通過直觀的頁面效果加深對應(yīng)用的理解。全書以實例為主線，由淺入深，逐步推進，通過全面、詳細和完整地介紹，不但能夠激發(fā)讀者的閱讀興趣，還能使讀者迅速地掌握jQuery Mobile的頁面布局和API用法。如何閱讀本書全書從一個普通移動頁面開發(fā)者的角度，詳細地介紹了關(guān)于jQuery Mobile所涉及的全部新組件與API的用法。全書共10章，整體框架分為三個部分：第一部分（第1～5章）為jQuery Mobile基礎(chǔ)知識。包括初識jQuery Mobile、頁面與對話框、工具欄與格式化內(nèi)容、頁面常用組件、jQuery Mobile主題。第二部分（第6～7章）為jQuery Mobile插件和API介紹。詳細介紹了jQuery Mobile的各種插件的使用方法，以及jQuery Mobile API的應(yīng)用。第三部分（第8～10章）為jQuery Mobile實踐技巧與案例開發(fā)。系統(tǒng)地講解了jQuery Mobile開發(fā)的技巧與方法，并通過兩個完整的案例，將本書的理論應(yīng)用于實際的開發(fā)中，使讀者能夠做到學以致用。本書針對的是Web開發(fā)者，無論是前端開發(fā)還是后臺程序，都可以使用本書。本書的結(jié)構(gòu)是層進式的，章節(jié)之間有一定的關(guān)聯(lián)，因此，建議讀者按章節(jié)的編排，逐章閱讀。在閱讀過程中，盡量不要照抄實例，重點是理解核心代碼，自己動手開發(fā)相似功能的應(yīng)用，并逐步完善其功能，這樣才能真正掌握其代碼的實質(zhì)?？闭`和支持希望這部歷時半年、積累我個人心得與技術(shù)感悟的拙著能給讀者帶來移動開發(fā)思路上的啟發(fā)與技術(shù)上的提升，使每位讀者通過本書能夠有所悟或有所得。同時，也非常希望能借本書出版之機與國內(nèi)熱衷于WebApp 移動開發(fā)技術(shù)的開發(fā)者進行交流。除封面署名作者外，參加本書編寫工作的還有：劉義、李建洲、李靜、裴星如、李建勤、陶紅英、陳建平、孫文華、孫義、陶林英、閔慎華、孫芳、趙剛。由于作者的水平有限、編寫時間倉促，書中難免會出現(xiàn)一些錯誤或者不準確之處，懇請讀者批評指正。書中的全部源代碼文件可以從華章網(wǎng)站下載。如果您有更多的寶貴意見，也歡迎發(fā)送郵件至郵箱tao_guo_rong@163.com，期待能夠得到大家真摯的反饋。致謝本書的出版首先要感謝機械工業(yè)出版社華章分社的編輯們，尤其是楊福川與白宇編輯，正是由于他們的斧正點撥和全程指導(dǎo)，才使本書的創(chuàng)作思路不斷提升、案例框架不斷優(yōu)化，并最終順利完稿。另外，還要感謝我的家人，正是由于他們的理解與默默支持，使我全心寫作，順利完成本書的編寫。陶國榮2012年6月

內(nèi)容概要

　　《jQuery Mobile權(quán)威指南》由資深專家根據(jù)jQuery Mobile最新版本撰寫，是一本全面而系統(tǒng)的jQuery Mobile教程，對jQuery Mobile的所有功能、特性、開發(fā)方法和技巧進行了全面而透徹的講解，是系統(tǒng)學習jQuery Mobile的權(quán)威參考書。在寫作方式上，《jQuery Mobile權(quán)威指南》以一種開創(chuàng)性的方式使理論與實踐達到了極好的平衡，不僅對理論知識進行了清晰而透徹的闡述，而且根據(jù)讀者理解這些知識的需要精心設(shè)計和構(gòu)思了92個完整的實戰(zhàn)案例，每個案例分為功能說明、實現(xiàn)代碼、頁面效果和源碼分析4個部分，旨在幫助讀者通過實踐的方式達到迅速掌握jQuery Mobile的目的。　　全書共10章，從基礎(chǔ)理論到最佳實踐，內(nèi)容幾乎涵蓋了jQuery Mobile的各個方面。第1章介紹了jQuery Mobile的功能特點、獲取方法，以及與其他移動開發(fā)框架的對比；第2~5章分別講解了jQuery Mobile的頁面與對話框、工具欄與格式化內(nèi)容、頁面常用組件、主題等基礎(chǔ)知識；第6章和第7章分別詳細介紹了jQuery Mobile的插件和API；第8章探討了jQuery Mobile的開發(fā)技巧與最佳實踐；第9章和第10章以迭代的方式詳細地講解了兩個具有代表性的綜合案例的實現(xiàn)過程，不僅能幫助讀者將前面所學的理論知識融會貫通，而且還能從中迅速獲得實戰(zhàn)經(jīng)驗。

作者簡介

陶國榮，資深Web技術(shù)專家，有10余年開發(fā)經(jīng)驗，是國內(nèi)較早專業(yè)從事Web開發(fā)的一線技術(shù)人員和培訓講師。一直致力于對HTML5、JavaScript、CSS3、jQuery、jQUery Mobile等Web開發(fā)技術(shù)的研究和實踐，在HTML頁面的優(yōu)化與用戶體驗的研究，以及頁面框架搭建、數(shù)據(jù)流向分析、頁面靜態(tài)優(yōu)化等方面都擁有豐富的實踐經(jīng)驗。他還是微軟技術(shù)方面的專家，精通C#、ASP．NET和SQL Server等技術(shù)。此外，他還是一位知名的技術(shù)作家，出版了多部技術(shù)著作，其中《jQuery權(quán)威指南》和《HTML5實戰(zhàn)》是他的代表作，這兩本書憑借過硬的質(zhì)量和良好的學習體驗獲得了廣大讀者的高度評價，并取得了驕人的銷售成績。

書籍目錄

前言 第1章 初識jQueryMobile1 1.1 jQueryMobile簡介2 1.1.1 功能特點2 1.1.2 支持平臺3 1.1.3 與jQTouch、SenchaTouch、SproutCore的比較4 1.2 如何獲取jQueryMobile5 1.2.1 下載插件文件5 1.2.2 使用URL方式加載插件文件6 1.3 jQueryMobile應(yīng)用開發(fā)迅速上手6 1.4 本章小結(jié)10 第2章 頁面與對話框11 2.1 jQueryMobile頁面結(jié)構(gòu)12 2.1.1 基本框架12 2.1.2 多容器頁面結(jié)構(gòu)13 2.1.3 外部頁面鏈接15 2.1.4 頁面后退鏈接18 2.2 預(yù)加載與頁面緩存20 2.2.1 預(yù)加載20 2.2.2 頁面緩存22 2.3 頁面的腳本23 2.3.1 創(chuàng)建頁面23 2.3.2 跳轉(zhuǎn)頁面25 2.3.3 加載頁面27 2.4 對話框29 2.4.1 創(chuàng)建簡單對話框29 2.4.2 關(guān)閉對話框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)航欄的圖標46 3.2.4 設(shè)置導(dǎo)航欄圖標位置48 3.2.5 自定義圖標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 折疊組標記63 3.5 本章小結(jié)65 第4章 頁面常用組件66 4.1 按鈕67 4.1.1 內(nèi)聯(lián)按鈕67 4.1.2 按鈕組標記69 4.2 表單71 4.2.1 文本輸入71 4.2.2 滑塊73 4.2.3 翻轉(zhuǎn)切換開關(guān)75 4.2.4 單選按鈕76 4.2.5 復(fù)選框78 4.2.6 選擇菜單81 4.2.7 多項選擇菜單84 4.3 列表86 4.3.1 基本列表86 4.3.2 嵌套列表87 4.3.3 有序列表89 4.3.4 分割按鈕列表91 4.3.5 分割列表項93 4.3.6 圖標與計數(shù)器95 4.3.7 內(nèi)容格式化與計數(shù)器96 4.4 本章小結(jié)98 第5章 jQueryMobile主題99 5.1 主題的定義及使用場景100 5.1.1 默認主題100 5.1.2 修改默認主題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 工具欄與頁面內(nèi)容的主題115 5.3.1 工具欄主題115 5.3.2 頁面主題117 5.3.3 內(nèi)容主題119 5.4 本章小結(jié)121 第6章 jQueryMobile插件122 6.1 圖片滑動瀏覽插件PhotoSwipe123 6.2 圖片幻燈片插件Camera126 6.3 滾動選擇時間插件Mobiscroll130 6.4 搜索插件AutoComplete133 6.5 日期對話框插件DateBox136 6.6 簡單對話框插件SimpleDialog138 6.7 快捷標簽插件ActionSheet142 6.8 本章小結(jié)145 第7章 jQueryMobileAPI詳解146 7.1 基本配置項147 7.1.1 自定義頁面加載和出錯提示信息147 7.1.2 使用函數(shù)修改gradeA配置值149 7.2 事件152 7.2.1 觸摸事件152 7.2.2 設(shè)置翻轉(zhuǎn)事件156 7.2.3 屏幕滾動事件158 7.2.4 頁面顯示或隱藏事件161 7.3 訪問地址的相關(guān)方法164 7.3.1 訪問路徑和URL地址轉(zhuǎn)換方法164 7.3.2 URL地址驗證方法167 7.3.3 域名比較方法170 7.3.4 縱向滾動方法172 7.4 本章小結(jié)175 第8章 jQueryMobile開發(fā)技巧與最佳實踐176 8.1 開啟或禁用列表項中的箭頭177 8.2 使用懸浮的方式固定頭部欄與尾部欄179 8.3 初始化頁面隨機顯示背景圖181 8.4 按鈕標題文字的控制183 8.5 偵聽HTML5畫布元素的觸摸事件185 8.6 在jQueryMobile中提交表單數(shù)據(jù)188 8.7 切換按鈕的開啟禁用狀態(tài)191 8.8 開啟或禁用AJAX方式打開頁面鏈接193 8.9 使用localStorage傳遞鏈接參數(shù)196 8.10 在jQueryMobile中構(gòu)建離線功能198 8.11 本章小結(jié)201 第9章 開發(fā)移動終端新聞訂閱管理系統(tǒng)202 9.1 需求分析203 9.1.1 總體設(shè)計203 9.1.2 功能設(shè)計203 9.2 數(shù)據(jù)結(jié)構(gòu)204 9.2.1 數(shù)據(jù)庫設(shè)計204 9.2.2 輸出API設(shè)計206 9.3 系統(tǒng)封面開發(fā)208 9.4 系統(tǒng)首頁開發(fā)210 9.5 訂閱管理頁開發(fā)214 9.6 類別新聞頁開發(fā)217 9.7 新聞詳情頁開發(fā)221 9.8 其余文件223 9.8.1 樣式文件224 9.8.2 API接口文件226 9.9 本章小結(jié)226 第10章 開發(fā)移動終端記事本管理系統(tǒng)227 10.1 需求分析228 10.1.1 總體設(shè)計228 10.1.2 功能設(shè)計229 10.2 新手導(dǎo)航頁開發(fā)229 10.3 系統(tǒng)首頁開發(fā)233 10.4 記事列表頁開發(fā)236 10.5 記事詳細頁開發(fā)238 10.6 修改記事內(nèi)容頁開發(fā)241 10.7 添加記事內(nèi)容頁開發(fā)244 10.8 樣式文件247 10.9 本章小結(jié)249 

章節(jié)摘錄

版權(quán)頁：   插圖：   9.1 需求分析 在本系統(tǒng)中，需要實現(xiàn)的需求包括以下幾個方面： 在進入系統(tǒng)前，先瀏覽封面頁，停留3秒后自動進入首頁。 在首頁中，顯示用戶自己訂閱的新聞類別，單擊某類別時，進入相應(yīng)的類別頁；當用戶在首頁單擊“管理訂閱”按鈕時，進入訂閱管理頁。 在類別新聞頁中，瀏覽該類別中的今日圖片與列表新聞，單擊圖片或列表中的某選項時，進入對應(yīng)的新聞詳情頁。 在訂閱管理頁中，以列表的方式，展示用戶還沒有訂閱的新聞類別，當用戶單擊列表中最右側(cè)的“添加”按鈕時，即完成了訂閱功能。 在新聞詳情頁中，顯示某條新聞的對應(yīng)主題、加入時間、來源和正文信息。 9.1.1 總體設(shè)計 考慮到移動終端設(shè)備中各瀏覽器的復(fù)雜特性和與PC端在機器性能、網(wǎng)絡(luò)環(huán)境的諸多差異，在使用jQuery Mobile開發(fā)移動應(yīng)用項目時，必須把握下面幾個主要方面： 易操作，鑒于移動設(shè)備的屏幕特征，必須使開發(fā)出來的功能容易操作。 體積小，大部分的移動設(shè)備在使用上網(wǎng)服務(wù)時，需要根據(jù)流量來計費，因此，如果項目在使用時加載的數(shù)據(jù)過大，將會消耗用戶很高的流量。 性能好，必須保證用戶在使用移動網(wǎng)絡(luò)時，數(shù)據(jù)的交互流暢、安全，因此，不應(yīng)過多請求服務(wù)器的數(shù)據(jù)，盡可能使用本地或CDN緩存技術(shù)實現(xiàn)數(shù)據(jù)交互。 綜合上述各方面的因素，并考慮到整體的實際需求，本系統(tǒng)的總體設(shè)計如圖9—1所示。 圖9—1中列出了系統(tǒng)的功能和操作流程，本系統(tǒng)有5個功能，分別由系統(tǒng)封面頁、首頁、訂閱管理頁、類別新聞頁、新聞詳情頁實現(xiàn)。在操作流程上，先通過系統(tǒng)封面頁進入首頁，在首頁中可以進入類別新聞頁和訂閱管理頁，只有在類別新聞頁中，才能進入新聞詳情頁。 9.1.2 功能設(shè)計 本系統(tǒng)針對需求分析，使用jQuery Mobile開發(fā)了5項功能，說明如下： 系統(tǒng)封面頁：通過使用JavaScript中計時器的功能，在指定的時間內(nèi)，自動跳轉(zhuǎn)到系統(tǒng)首頁中。 首頁：在頁面中添加一個“page”容器，在綁定的容器“pagecreate”事件中，將API獲取的指定數(shù)據(jù)顯示在容器中的列表元素中；并添加一個按鈕，單擊后進入“訂閱管理頁”。 訂閱管理頁：在該頁中獲取用戶已訂閱的新聞類別，并與全部類別相比較，將未訂閱的新聞類別以列表的形式顯示在“page”容器中；單擊列表右側(cè)“添加”按鈕時，更新用戶已訂閱的新聞類別信息，并刷新當前容器。 類別新聞頁：該頁由上下兩部分組成，上面展示一幅本類別的專屬圖片，圖片的下面以列表的形式顯示本類別下的全部新聞標題；單擊新聞標題后，進入新聞詳情頁。 新聞詳情頁：在該頁中接收“l(fā)ocalStorage”對象傳回的新聞Id號，根據(jù)該Id號調(diào)用API獲取對應(yīng)新聞的詳細內(nèi)容，并顯示在頁面指定的各元素中。

媒體關(guān)注與評論

隨著移動應(yīng)用的普及和HTML5技術(shù)的成熟，Web APP也越來越流行，因為Web APP有著真正的跨平臺特性。jQuery Mobile 的使命是為所有主流移動瀏覽器提供一種統(tǒng)一的體驗，跨所有流行的智能手機和平板電腦等移動設(shè)備工作。本書非常具有前瞻性：一方面表現(xiàn)在它的出版時機非常及時，當前jQuery Mobile的應(yīng)用剛剛興起，但是市面上同類書極少；另一方面，本書完全是基于jQuery Mobile的最新技術(shù)撰寫的。此外，它的系統(tǒng)性和實戰(zhàn)性都很強，學完本書，應(yīng)該能熟練地利用jQuery Mobile開發(fā)自己心儀的APP了，強烈推薦！——51CTO 中國領(lǐng)先的IT技術(shù)網(wǎng)站在眾多的移動開發(fā)框架中，我們選擇使用jQuery Mobile的理由有很多，但是有三個理由最重要：第一，jQuery開發(fā)人員使用jQuery Mobile時可以駕輕就熟，因為兩者使用共享的代碼庫；第二，真正的跨平臺和跨設(shè)備，有強大的兼容性；第三，社區(qū)和企業(yè)對它的廣泛支持，整個技術(shù)鏈越來越成熟。如果你想學習jQuery Mobile，本書有兩個理由讓你選擇它：第一，內(nèi)容系統(tǒng)而全面，基本涵蓋了jQuery Mobile知識點的方方面面；第二，實戰(zhàn)性強，包含90余個小案例和2個大案例，便于操作實踐。——jQuery Mobile中文用戶組

編輯推薦

《jQuery Mobile權(quán)威指南》由資深專家根據(jù)jQuery Mobile最新版本撰寫，對jQuery Mobile的所有功能、特性、使用方法和開發(fā)技巧進行了全面而透徹的講解，是系統(tǒng)學習jQuery Mobile的權(quán)威參考書。92個精心設(shè)計的經(jīng)典案例對各個理論知識點進行了充分闡釋，理論與實踐完美結(jié)合。

圖書封面

圖書標簽Tags

無

評論、評分、閱讀與下載

---

    jQuery Mobile權(quán)威指南 PDF格式下載

---