作者序
jQuery Mobile 是一個免費的、開放原始碼的、跨平台的行動開發框架,是以HTML 5 為基礎的快速開發工具,它能夠相當大地節省開發者的時間和精力。目前關於jQuery Mobile 的資料非常少,而且不夠詳細。作者結合自己的開發經驗,在本書中全面介紹了jQuery Mobile 和HTML 5、jQuery Mobile 的控制項、jQuery Mobile 的版面配置,以及jQuery Mobile 開發和發佈應用的方法。本書的目的是力求透過實戰讓讀者在練習中熟練掌握利用jQuery Mobile快速開發的方法,並能夠真實地將技術轉化為經濟利益。可以說,jQueryMobile 的前途和錢途都是不可限量的。
本書特色
1. 實戰,實戰,還是實戰
本書採用實例驅動的方式介紹jQuery Mobile 下的APP 開發,全書提供70餘個實戰案例教會讀者進行行動開發,最後還透過6 個小型專案來複習和加強所學基礎知識。
2. 不是iOS 平台、Android 平台、Windows Phone 平台下的開發,是全平台開發本書開發的專案是全平台應用,讀者可移植到任意的行動平台,這是jQuery Mobile 風靡的原因,也是本書的宗旨,即實現真正的跨平台應用。
3. 技術來自生活,案例也來自生活
本書的案例包含很多應用,如天天背單字APP、行動校園APP、線上音
樂播放機、線上視訊播放機、通訊錄、課程表、Metro 介面、新聞清單、手機調查問卷、計算機、行動BBS、電子閱讀器等,全部來自真實的生活。
4. 低門檻、淺閱讀,輕輕鬆松就能學會
書方便初學者入門,筆者的初衷是,不但能讓讀者了解做什麼(What)與怎麼做(How),更能讓讀者清楚為什麼要這麼做(Why),本書還提供了很多跨平台行動APP 的工具和技巧,幫助讀者找到最佳的學習路徑和專案解決方案。
本書結構
本書共4 篇19 章,主要章節規劃如下。
第一篇(第1~3 章)行動開發入門
跨平台的框架有很多,為什麼選擇jQuery Mobile ?選擇它後,如何為它架設開發環境?架設完環境後,又如何開發第一個Hello World 應用?如何測試和包裝應用?這些都是本篇要介紹的內容,除此之外,筆者還解答了初學者對於HTML 5 的一些常見錯誤。
第二篇(第4~12 章)jQuery Mobile 基礎
凡是玩過智慧型手機的人都知道,一個APP 大概會包含頁面、對話方塊、工具列、按鈕、表單、清單等可視元素,本篇就是介紹如何用jQuery Mobile 製作這些元素,並在手機上顯示出來。學會這些後,還介紹jQuery Mobile 的一些進階特性,如版面配置、外掛程式、事件等。本篇最後透過計算機、行動BBS、電子閱讀器、記事本、全鍵盤介面這5 個小案例來複習這些jQueryMobile 的重要基礎知識。
第三篇(第13~18 章)跨平台APP 實戰
本篇介紹了6 個利用jQuery Mobile 實現的專案,分別為大學行動校園、個人部落格專案、線上音樂播放機、線上視訊播放機、大學校園表白牆、天天背單字。本書不僅列出了這些專案的原始程式碼,還列出了資料庫和APP UI 的一些設計技巧。
第四篇(第19 章)發佈和推廣應用
本篇內容不多, 卻是APP 能被大家認可的關鍵內容。本篇說明了如何將
jQuery Mobile 開發的應用透過PhoneGap 套件,然後產生各個平台可執行檔。本篇還介紹了發佈和推廣應用的方法,讓讀者能真正將開發的應用轉化為經濟效益。
針對讀者HTML 5 初學者與HTML 5 開發人員、跨平台行動應用程式開發人員、前端開發人員和前端設計人員、jQuery Mobile 初學者和開發人員、大專院校及教育訓練中心的師生
範例程式
本書範例程式下載網址為http://www.topteam.cc 查閱本書書名下載
下載如有問題請發送電子郵件至booksaga@163.com,郵件標題為「求jQueryMobile 程式」。
繁體版特別說明
◎ 本書作者為中國籍,因此本書大部分圖片均取自作者原文為簡體中文。
◎ 本書之程式碼亦以簡體中文為主,讀者可至本公司官網下載簡體及繁體兩個語系的原書程式碼。
jQuery Mobile 是一個免費的、開放原始碼的、跨平台的行動開發框架,是以HTML 5 為基礎的快速開發工具,它能夠相當大地節省開發者的時間和精力。目前關於jQuery Mobile 的資料非常少,而且不夠詳細。作者結合自己的開發經驗,在本書中全面介紹了jQuery Mobile 和HTML 5、jQuery Mobile 的控制項、jQuery Mobile 的版面配置,以及jQuery Mobile 開發和發佈應用的方法。本書的目的是力求透過實戰讓讀者在練習中熟練掌握利用jQuery Mobile快速開發的方法,並能夠真實地將技術轉化為經濟利益。可以說,jQueryMobile 的前途和錢途都是不可限量的...
目錄
前言
第一篇 行動開發入門
Chapter 01 初探行動開發
1.1 如今的行動企業
1.1.1 手機和平板的世界
1.1.2 行動網際網路的神話
1.2 跨平台行動開發框架
1.2.1 什麼是跨平台行動開發框架
1.2.2 為什麼選擇跨平台行動開發框架
1.2.3 常見的跨平台行動開發框架
1.3 真正認識HTML 5
1.3.1 HTML 5 是一項新技術嗎
1.3.2 只要在網站上加一句 就是HTML 5網站了嗎
1.3.3 HTML 5 與之前版本相比僅是好看
1.3.4 使用HTML 5 能夠讓我更有王霸之氣
1.4 認識jQuery Mobile
1.4.1 為什麼選擇jQuery Mobile
1.4.2 漸進式增強的主題介面
1.4.3 簡單但是有條理的標記化語言標準
1.4.4 自我調整版面配置
1.4.5 jQuery Mobile 的缺點
1.4.6 jQuery Mobile 案例
1.5 小結
Chapter 02 啟程Android 開發之旅
2.1 為什麼選擇Android
2.2 Android 開發環境的架設
2.2.1 JDK 的設定
2.2.2 Eclipse 與ADT 的設定
2.2.3 SDK 的更新
2.2.4 第一個程式
2.2.5 使用實體機測試第一個程式
2.3 錯誤解決方法
2.3.1 編譯執行顯示出錯的解決方法
2.3.2 無法更新SDK
2.3.3 啟動AVD 失敗
2.4 小結
Chapter 03 使用jQuery Mobile 快速開發APP
3.1 開發環境的選擇
3.1.1 Dreamweaver 編輯器
3.1.2 Notepad++ 編輯器
3.1.3 在PC 上測試應用
3.1.4 套件包裝應用的方法
3.2 原理解析
3.2.1 選擇元素
3.2.2 設定屬性
3.3 連結和按鈕
3.4 工具列
3.5 列表
3.6 表單控制項
3.7 小結
第二篇 jQuery Mobile 基礎
Chapter 04 頁面與對話方塊
4.1 依然從hello world 開始
4.2 利用jQuery 指令稿DIY 閃光燈效果
4.3 不斷切換的場景
4.4 整人遊戲:我不是弱智!
4.5 警告!你的手機遭到入侵
4.6 實現漸層的背景
4.7 另一種對話方塊
4.8 對話方塊的進階屬性
4.9 以jQuery Mobile 為基礎的簡單相簿
4.10 歸納
Chapter 05 工具列的使用
5.1 稍微複雜的頁面
5.1.1 嘗試使用工具列
5.1.2 讓工具列固定
5.1.3 一次無聊的實驗
5.2 方便的快速鍵
5.3 故障的按鈕
5.4 導覽列的應用
5.5 導覽列的全螢幕屬性
5.6 內容欄的使用
5.7 會出現的面板
5.8 小結
Chapter 06 按鈕的使用
6.1 簡單按鈕的使用
6.2 為按鈕加入圖示
6.3 更加個性化的顯示圖示
6.4 自訂按鈕的圖示
6.5 播放機的面板設計
6.6 頁首欄中的按鈕圖示
6.7 一個按鈕也可以玩得很開心
6.8 簡單的QWER 鍵盤
6.9 方形的按鈕
6.10 對話方塊中的按鈕
6.11 小結
Chapter 07 表單元素的使用
7.1 簡單的QQ 登入介面
7.2 手機問卷調查
7.3 精準的進度控制
7.4 多彩的調色盤
7.5 熄燈,請閉眼
7.6 做一道選擇題
7.7 多選
7.8 請問先生需要什麼服務
7.9 對話方塊中的表單
7.10 小結
Chapter 08 清單控制項的使用
8.1 簡單的新聞列表
8.2 音樂專輯清單的顯示
8.3 更完整的音樂專輯清單
8.4 顯示銷量的商品清單
8.5 圖書銷售排名
8.6 簡單的電話通訊錄
8.7 讓尋找更加便捷
8.8 比較進階的新聞列表
8.9 小結
Chapter 09 jQuery Mobile 的版面配置
9.1 改良後的QQ 登入介面
9.2 一種簡潔的通訊錄設計
9.3 完美實現九宮格
9.4 可以折疊的QQ 好友列表
9.5 展開圖示的設定
9.6 兩種不同的Metro 效果實現想法
9.6.1 完全利用分欄版面配置的方法
9.6.2 利用純CSS 調整色塊尺寸的方法
9.7 簡潔的課程表
9.8 小結
Chapter 10 jQuery Mobile 的進階特性
10.1 jQuery Mobile 的多頁面範本
10.2 jQuery Mobile 中的事件
10.3 jQuery Mobile 中的觸發事件
10.4 觸發事件的簡單應用
10.5 jQuery Mobile 的屬性
10.6小結
Chapter 11 在jQuery Mobile 中使用外掛程式
11.1 jQuery Mobile 外掛程式概述
11.2 相簿類別外掛程式
11.2.1 PhotoSwipe 的使用
11.2.2 Camera 的使用
11.3 選單類別外掛程式
11.4 選擇器外掛程式以及其他外掛程式
11.5 如何取得jQuery Mobile 外掛程式
11.6 小結
Chapter 12 jQuery Mobile 介面綜合實戰
12.1 清爽的電子書閱讀器
12.2 華麗的計算機
12.3 行動BBS 範本
12.4 以jQuery Mobile 為基礎的簡單記事本
12.5 以jQuery Mobile 為基礎的全鍵盤介面
12.6 小結
第三篇 跨平台APP 實戰
Chapter 13 大學行動校園實戰專案
13.1 專案背景
13.2 介面設計
13.3 框架設計
13.4 主介面的製作
13.5 二級專欄的製作
13.6 內容頁的製作
13.7 校園風光模組
13.8 小結
Chapter 14 個人部落格專案實戰
14.1 專案規劃
14.2 主介面設計
14.3 文章列表的設計
14.4 文章內容頁的實現
14.5 文章類別的設計
14.6 測試環境的架設
14.7 資料庫的設計
14.8 內容頁功能的實現
14.9 文章列表的實現
14.10 首頁的實現
14.11 小結
Chapter 15 線上音樂播放機
15.1 專案介紹
15.2 介面版面配置設計
15.2.1 首頁介面設計
15.2.2 推薦主題頁面的設計
15.2.3 歌手清單介面設計
15.2.4 專輯清單介面設計
15.3 主控台功能的實現
15.3.1 audio 控制項簡介
15.3.2 需求分析
15.3.3 功能實現
15.4 介面的實現
15.4.1 首頁介面的實現
15.4.2 推薦主題頁面的實現
15.4.3 歌手清單介面的實現
15.4.4 專輯列表的實現
15.5 資料庫的設計
15.6 後台的實現
15.6.1 資料庫連接類別的實現
15.6.2 首頁功能的實現
15.6.3 推薦主題頁面功能實現
15.6.4 歌手列表的實現
15.6.5 專輯列表的實現
15.7 小結
Chapter 16 線上視訊播放機
16.1 專案需求
16.2 介面設計
16.3 介面的實現
16.3.1 主題檔案的取得
16.3.2 首頁介面的實現
16.3.3 二級頁面的實現
16.3.4 視訊播放介面的實現
16.4 資料庫設計
16.5 功能的實現
16.5.1 首頁功能的實現
16.5.2 專輯列表功能的實現
16.5.3 播放頁面的實現
16.6 小結
Chapter 17 大學校園告白牆
17.1 專案介紹
17.2 頁面設計
17.2.1 首頁兼登入頁面的設計
17.2.2 註冊頁面的設計
17.2.3 資訊發佈頁面的設計
17.3 介面的實現
17.3.1 首頁介面的實現
17.3.2 登入介面的實現
17.3.3 註冊頁面的實現
17.3.4 告白模組的實現
17.4 資料庫的設計
17.5 功能的實現
17.5.1 註冊功能的實現
17.5.2 首頁功能的實現
17.5.3 發表留言功能的實現
17.5.4 首頁的增強
17.6 小結
Chapter 18 天天背單字專案實戰
18.1 專案說明
18.2 第一版的實現
18.2.1 第一版介面的實現
18.2.2 資料庫的建立
18.2.3 功能的實現
18.2.4 階段性歸納
18.3 改進和增強
18.3.1 方案描述
18.3.2 清單頁面的實現
18.3.3 清單頁面功能的實現
18.3.4 背單字頁面的改進
18.4 小結
第四篇 發佈和推廣應用
Chapter 19 應用的發佈和推廣
19.1 如何產生跨平台的應用
19.1.1 產生iOS 應用
19.1.2 產生WebOS 應用
19.1.3 產生WP 應用
19.2 怎樣發佈應用
19.3 怎樣推廣應用
19.4 小結
前言
第一篇 行動開發入門
Chapter 01 初探行動開發
1.1 如今的行動企業
1.1.1 手機和平板的世界
1.1.2 行動網際網路的神話
1.2 跨平台行動開發框架
1.2.1 什麼是跨平台行動開發框架
1.2.2 為什麼選擇跨平台行動開發框架
1.2.3 常見的跨平台行動開發框架
1.3 真正認識HTML 5
1.3.1 HTML 5 是一項新技術嗎
1.3.2 只要在網站上加一句 就是HTML 5網站了嗎
1.3.3 HTML 5 與之前版本相比僅是好看
1.3.4 使用HTML 5 能夠讓我更有王霸之氣
1.4 認識jQuery Mobile
1.4.1 為什麼選擇jQuery Mobile
1.4.2 漸...