jQuery Mobile 基礎

1. jQuery Mobile基礎

2. 教材 陳會安 著（2013）， PHP+MySQL與 jQuery Mobile 跨行動裝置網站開發， 碁峰資訊股份有限公司， ISBN 9789862768563 （書號 ACL037900） 楊仁和 譯（2012）， 深入淺出行動網站開發， 碁峰資訊股份有限公司， ISBN 9789862765005 （書號 A310） 榮欽科技、陳婉凌(2012)， 網頁設計必學的程式實作技術-HTML5+CSS3+JavaScript， 博碩文化， ISBN: 978-986-201-664-0 （書號 PG31237 ）

3. 大綱 jQuery Mobile的基礎 行動網路瀏覽器與Viewport 下載、安裝與使用jQuery Mobile 建立第一個jQuery Mobile程式 jQueryMobile頁面結構 jQueryMobile的佈景

4. 認識 jQuery Mobile • 由jQuery專案小組開發 • 2011年11月推出1.0正式版 • 一套建立在jQuery函數庫之上的使用介面系統（User Interface System，UI） • 觸控最佳化的Web框架 • 以較少的 JavaScript 程式碼做更多的事情

5. jQuery Mobile 的檔案 • jQuery函數庫的 JavaScript 程式檔 • jQuery Mobile 核心 JavaScript 程式檔 • jQuery Mobile 核心 CSS 外部樣式檔 • jQuery Mobile 布景的問部樣式檔(選項) <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /> <link rel="stylesheet" href="my-custom-theme.min.css">

6. jQuery Mobile 的檔案 <link rel="stylesheet" href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> <link rel="stylesheet" href="my-custom-theme.min.css"> <link rel="stylesheet" href="jquery.mobile.structure.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script>

7. jQuery Mobile 支援平台

8. Meta 標籤 Viewport • 最早出現在 Apple iPhone 的 Safari 瀏覽器 • 可以正確告訴行動瀏覽器所看到的網頁尺寸，如果沒有此Meta標籤Viewport，行動瀏覽器會認為它是在瀏覽一頁桌上型電腦看到的網頁，如下所示： • WebKit瀏覽器引擎 <meta name="viewport" content="width=device-width,initial-scale=1">

9. Meta 標籤 Viewport <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script>

10. Meta 標籤 Viewport

11. Meta 標籤 Viewport • Android 額外參數

12. 下載 jQuery 與 jQuery Mobile • 下載 jQuery Mobile • http://jquerymobile.com/download/ • 下載 jQuery • http://jquery.com/download/

13. 使用 CDN • Content Delivery Network • 將資料存放在網路系統的多個電腦節點，加速資料存取 • http://jquerymobile.com/download/ • http://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_3

14. 使用 CDN <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1">

15. 建立第一個 jQuery Mobile 程式

16. jQuery Mobile 框架 • 基本單位：頁面 (Page) • 頁面結構如同一盒卡片，盒子是HTML網頁文件，每一張卡片是一個扮演page角色的<div>標籤

17. 單一頁面結構 • jQuery Mobile 在顯示頁面時會捲動頁面隱藏上方URL位址欄位 • 像原生應用程式的使用介面 • 標記驅動（Markup-driven） • 使用 HTML5 的 data-role 定義 div 元素 • Header • Content • Footer

18. HTML5 格式宣告。 宣告行動裝置的比例和大小。 自動載入Query Mobile JavaScript 和css檔案。 單一頁面(page) 的程式架構。

19. 單一頁面結構 <div data-role="page"> <div data-role="header"> <h1>Mobile Web開發</h1> </div> <div data-role="content"> <p>PHP支援Mobile Web的跨行動裝置網站開發， … 可以幫助我們建立跨平台行動裝置的網站。</p> </div> <div data-role="footer"> <h1>製作者: 陳會安</h1> </div> </div>

20. 單一頁面結構

21. 角色屬性

22. jQuery Mobile 佈景 • Theme 是一組字型、文字色彩、背景色彩和漸層的CSS樣式

23. ThemeRoller • jQuery UI 佈景編輯工具 • http://jquerymobile.com/themeroller

24. ThemeRoller • 下載 ZIP 格式自訂佈景檔，解壓檔案 • Themes 資料夾和 index.html 範例檔案

25. 使用自訂佈景 • 需要 jquery.mobile.structure-x.x.min.css <link rel="stylesheet" href="my-custom-theme.min.css"> <link rel="stylesheet" href="jquery.mobile.structure.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script>

26. 使用自訂佈景

27. 練習: 單一頁面 下載單一頁面唐詩練習素材 以 Opera Mobile Classic Emulator 預覽

29. 練習：自訂樣式 以 ThemeRoller建立自訂樣式 將自訂套用於單一頁面唐詩練習