建立 jQuery Mobile 程式與佈 景 3-1 jQuery Mobile 的基礎3-1 jQuery Mobile 的基礎 3-2 行動網路瀏覽器與 Viewport3-2 行動網路瀏覽器與 Viewport 3-3 下載、安裝與使用 jQuery Mobile3-3 下載、安裝與使用 jQuery.

Presentation on theme: "建立 jQuery Mobile 程式與佈 景 3-1 jQuery Mobile 的基礎3-1 jQuery Mobile 的基礎 3-2 行動網路瀏覽器與 Viewport3-2 行動網路瀏覽器與 Viewport 3-3 下載、安裝與使用 jQuery Mobile3-3 下載、安裝與使用 jQuery."— Presentation transcript:

1

2 建立 jQuery Mobile 程式與佈 景 3-1 jQuery Mobile 的基礎3-1 jQuery Mobile 的基礎 3-2 行動網路瀏覽器與 Viewport3-2 行動網路瀏覽器與 Viewport 3-3 下載、安裝與使用 jQuery Mobile3-3 下載、安裝與使用 jQuery Mobile 3-4 建立第一個 jQuery Mobile 程式3-4 建立第一個 jQuery Mobile 程式 3-5 jQuery Mobile 頁面結構3-5 jQuery Mobile 頁面結構 3-6 jQuery Mobile 的佈景3-6 jQuery Mobile 的佈景 3

3 3-1 jQuery Mobile 的基礎 3-1-1 認識 jQuery Mobile 3-1-2 jQuery Mobile 的檔案與支援平台

4 3-1-1 認識 jQuery Mobile jQuery Mobile 是由 jQuery 專案小組開發， 在 2011 年 11 月推出 1.0 正式版，它是一套建 立在 jQuery 函數庫之上的使用介面系統 （ User Interface System ， UI ），一個觸控 最佳化的 Web 框架，提供眾多最佳化觸控 操作的使用介面元素，可以讓我們不用撰 寫一行 JavaScript 程式碼，就輕鬆使用 HTML 標籤建立跨行動裝置網站或 Mobile Web 應用程式的使用介面。

5 3-1-2 jQuery Mobile 的檔案與支援平台 - 檔案 jQuery Mobile 所需的檔案 在 jQuery Mobile 的 HTML5 網頁文件需要內 嵌 JavaScript 函數庫和 CSS 外部樣式，其檔 案內容如下所示： –jQuery 函數庫的 JavaScript 程式檔。 –jQuery Mobile 核心 JavaScript 程式檔。 –jQuery Mobile 核心 CSS 外部樣式檔。 –jQuery Mobile 佈景的外部樣式檔（選項）。

6 3-1-2 jQuery Mobile 的檔案與支援平台 - 支援平台 作業系統平台平台版本 iOS 3.2~6.0 版 Android 2.1~2.3 、 3.1 、 4.0 、 4.1 版 Windows Phone 7.0~7.5 版 BlackBerry OS 6.0~7.0 版、 Playbook 1.0-2.0 版 Palm WebOS 1.4 、 2.0 、 3.0 版 Kindle3 and Fire Samsung bada 2.0 版 Meego 1.2 版 Opera Mobile11.5~12 Symbian Nokia N8 、 C7 、 N97 版本（不支援 Ajax ）

7 3-2 行動網路瀏覽器與 Viewport 3-2-1 行動網路瀏覽器與模擬器 3-2-2 Meta 標籤 Viewport 3-2-3 瀏覽 Mobile 網頁

8 3-2-1 行動網路瀏覽器與模擬器 目前桌上型電腦的主要瀏覽器有： Internet Explorer 、 Firefox 、 Safari 、 Opera 和 Chrome 等， 在 Mobile 平台的行動網路瀏覽器也一樣有很多種， 除了各平台內建的行動網路瀏覽器外，還有一些 桌上型瀏覽器的 Mobile 版，例如： Opera 和 Firefox 。 基本上，行動裝置的行動網路瀏覽器和桌上型瀏 覽器之間的最大差異在行動裝置的螢幕尺寸比較 小，目前巿面上行動裝置平台有 Apple 的 iPhone iOS 、 Google 的 Android 和 Windows Phone 等平台， 其內建行動網路瀏覽器都支援最新 HTML5 、 CSS3 和 JavaScript 。

9 3-2-2 Meta 標籤 Viewport- 語法 Meta 標籤 Viewport 最早出現在 Apple 公司 iPhone 手機的 Safari 瀏覽器，可以正確告訴行動瀏覽器所 看到的網頁尺寸，如果沒有此 Meta 標籤 Viewport ， 行動瀏覽器會認為它是在瀏覽一頁桌上型電腦看 到的網頁，如下所示： 上述 標籤的 name 屬性值是 viewport ，可以 告訴使用 WebKit 瀏覽器引擎的行動瀏覽器，和需 要顯示的頁面尺寸為何？

10 3-2-2 Meta 標籤 Viewport- 參數 1 在 content 屬性提供一些參數來定義進一步尺寸和 縮放資訊，相關參數說明如下表所示： 參數說明 width 指定瀏覽器顯示的寬度，屬性值 device-width 是行動裝置的 螢幕寬度，也可以指定數值的絕對寬度 height 指定瀏覽器顯示的高度，屬性值 device-height 是行動裝置的 螢幕高度，也可以指定數值的絕對高度 initial-scale 指定畫面是使用多少倍 viewport 來顯示， 1 就是指 1 個 viewport 顯示螢幕的像素（即 1 個點）等於 1 個螢幕像素 user-scalable 是否允許使用者調整螢幕縮放，值 1 、 yes 或 true 表示允許； 0 、 no 或 false 表示不允許 minimum-scale 指定可以使用的最小縮放，值的範圍是 0~10 maximum-scale 指定可以使用的最大縮放，值的範圍是 0~10

11 3-2-2 Meta 標籤 Viewport- 參數 2 在 Android 作業系統的內建行動瀏覽器支援 額外參數，其說明如下表所示： 參數說明 target-densityDpi 參數可以告訴行動裝置此 Mobile 網頁設計的 dpi （ Dots per Inch ，每英吋的像數），值 device-dpi 是 符合行動裝置螢幕的 dpi ，值 high-dpi 、 medium-dpi 和 low-dpi 分別是高、中和低 dpi ，也可以指定 70~400 之間的值

12 3-2-2 Meta 標籤 Viewport- 範例 現在，我們就可以建立 Ch3_2_2.html ，在 區塊加上 Meta 標籤 Viewport 來建立 Mobile 網頁， 如下所示： Ch3_2_2.html 上述 content 屬性的參數指定使用行動裝置的螢幕 寬度， 1 個 viewport 顯示螢幕的像素等於 1 個螢幕 像素。

13 3-2-3 瀏覽 Mobile 網頁 現在，我們就可以使用 iPhone Simulator 和 Opera Mobile Emulator 來瀏覽 Mobile 網頁。

14 3-3 下載、安裝與使用 jQuery Mobile 3-3-1 下載 jQuery 與 jQuery Mobile 3-3-2 安裝 jQuery Mobile 至 WebMatrix 站台 3-3-3 在 HTML 網頁使用 jQuery Mobile

15 3-3-1 下載 jQuery 與 jQuery Mobile- 下載 下載 jQuery Mobile jQuery Mobile 可以在官方網站免費下載，在本書 使用的是 1.2.0 版，其下載網址如下所示： –jQuery Mobile ： http://jquerymobile.com/download/ http://jquerymobile.com/download/ 下載 jQuery 函數庫 jQuery 函數庫可以在官方網站免費下載， jQuery Mobile 建議使用的版本為 1.6.4 或 1.8.2 ，在本書是 使用 1.8.2 版，其下載網址如下所示： –jQuery 函數庫： http://jquery.com/download/ http://jquery.com/download/

16 3-3-1 下載 jQuery 與 jQuery Mobile- 檔案 在 jQuery Mobile 下載檔案包含所需的.js 和.css 檔案。基本上，建立 jQuery Mobile 程 式所需的檔案和目錄，如下所示： – 「 images 」目錄： jQuery Mobile 使用的圖示檔。 –jquery.mobile-1.2.0.min.css ： jQuery Mobile 的 CSS 樣式檔案。 –jquery.mobile-1.2.0.min.js ： jQuery Mobile 的 外部 JavaScript 程式檔案。

17 3-3-2 安裝 jQuery Mobile 至 WebMatrix 站台 請將 jQuery.mobile.min.css 、 jquery.mobile.min.js 檔案、 「 image 」目錄和 jQuery 函數 庫的 jquery.min.js ，都加入 WebMatrix 站台 Ch03 的根目 錄，就完成 jQuery Mobile 的 安裝，如右圖所示：

18 3-3-3 在 HTML 網頁使用 jQuery Mobile-1 使用下載的 jQuery Mobile 程式碼檔案 當我們將 jQuery Mobile 相關檔案和目錄置於 HTML 網頁的 同一個資料夾後，就可以在 HTML 網頁 標籤的 子標籤含括外部 JavaScript 程式碼檔案的 jQuery 函 數庫和 jQuery Mobile ，如下所示： ……

19 3-3-3 在 HTML 網頁使用 jQuery Mobile-2 使用 CDN CDN 是將資料存放在網路系統的多個電腦節點，以加速資 料存取，換句話說，我們並不用下載 jQuery 和 jQuery Mobile 程式碼檔案，可以直接使用儲存在 CDN 的程式碼檔 案，如下所示： <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile- 1.2.0.min.css" />

20 3-4 建立第一個 jQuery Mobile 程式 - 步驟一 步驟一： HTML5 的 DOCTYPE jQuery Mobile 程式是一個 HTML5 網頁，所 以在第 1 行需要加上 HTML5 的 DOCTYPE ， 如下所示：

21 3-4 建立第一個 jQuery Mobile 程式 - 步驟二 步驟二： 標籤指定編碼和縮放比例 在 HTML 的 區塊需要加上 標籤指定 編碼和行動裝置的尺寸與縮放比例，如下所示： 第 1 個 標籤指定編碼為 utf-8 ，以便可以正 確顯示中文內容，第 2 個 標籤指定瀏覽器 的寬度和縮放比例。

22 3-4 建立第一個 jQuery Mobile 程式 - 步驟三 步驟三：含括 jQuery 和 jQuery Mobile 程式碼 檔案和樣式表 將相關.js 和.css 檔案和「 image 」目錄都複製至 Ch3_4.html 的同一個資料夾後，就可以在 區塊使用 和 標籤含括 jQuery 和 jQuery Mobile 程式碼檔案和樣式表，如下所示：

23 3-4 建立第一個 jQuery Mobile 程式 - 步驟四 步驟四：建立頁面 jQuery Mobile 是使用標記驅動（ Markup-driven ）來設定 與配置頁面，我們是使用 HTML5 的 data-role 屬性定義 div 元素是什麼，如下所示： Mobile Web 開發 ASP.NET 支援 Mobile Web 的跨行動裝置網站開發，... 製作者 : 陳會安

24 3-4 建立第一個 jQuery Mobile 程式 - 步驟五 步驟五：預覽網頁內容

25 3-5 jQuery Mobile 頁面結構 3-5-1 jQuery Mobile 框架架構 3-5-2 單一頁面結構與角色

26 3-5-1 jQuery Mobile 框架架構 - 說明 jQuery Mobile 框架是使用簡單和功能強大的方式 來定義網頁內容，即頁面（ Pages ），並且提供 Ajax 技術的巡覽系統，可以建立動畫效果的頁面 轉換，事實上，框架架構的基本單位就是頁面， jQuery Mobile 是使用卡片觀念來建立頁面結構， 如同一盒卡片，盒子是 HTML 網頁文件，每一張 卡片就是一個扮演 page 角色的 標籤。

27 3-5-1 jQuery Mobile 框架架構 - 圖例

28 3-5-2 單一頁面結構與角色 - 單一頁面結構 ( 說明 ) 對於 Android 、 iOS 、 Windows Phone 和 webOS 等 行動作業系統平台來說， jQuery Mobile 在顯示頁 面時會試圖捲動頁面來隱藏上方 URL 位址欄位， 其目的是為了建立更像原生應用程式的使用介面。 因為 jQuery Mobile 是使用標記驅動（ Markup- driven ）來設定與配置頁面，使用 HTML5 的 data- role 屬性定義 div 元素是什麼，例如：頁面屬性值 是 page ，單一頁面的 標籤包含 3 個子 標籤的區段，其屬性值分別為 header 、 content 和 footer 。

29 3-5-2 單一頁面結構與角色 - 單一頁面結構 ( 區段 ) Mobile Web 開發 ASP.NET 支援 Mobile Web 的跨行動裝置網站開發， … 可以幫助我們建立跨平台行動裝置的網站。 製作者 : 陳會安

30 3-5-2 單一頁面結構與角色 - 單一頁面結構 ( 區段說明 ) 各 標籤區段的說明，如下表所示： 標籤的區段說明 頁面的標題列，我們可以在此元素 建立巡覽列 頁面實際的內容 頁面的註腳列，我們也可以在此元 素建立巡覽列，如果加上 data- position="fixed" 屬性，可以讓註腳 列永遠顯示在底部

31 3-5-2 單一頁面結構與角色 - 角色屬性 data-role 屬性值說明 page 定義頁面，這是 jQuery Mobile 顯示使用介面的基本單位 header 定義頁面的標題列 content 定義頁面的內容 footer 定義頁面的註腳列 dialog 定義對話方塊的頁面 navbar 定義巡覽工具列 button 產生按鈕介面元件 controlgroup 群組介面元素成水平或垂直排列 listview 建立 ListView 元件 collapsible 建立可摺疊內容 collapsible-set 建立手風琴選單 fieldcontain 表單欄位的容器 slider 建立滑動軸 nojs 在支援 jQuery Mobile 瀏覽器隱藏元素

32 3-6 jQuery Mobile 的佈景 3-6-1 jQuery Mobile 佈景的基礎 3-6-2 ThemeRoller 線上工具的基礎 3-6-3 使用 ThemeRoller 建立自訂佈景 3-6-4 在 jQuery Mobile 程式使用自訂佈景

33 3-6-1 jQuery Mobile 佈景的基礎 - 說明 jQuery Mobile 佈景是一組字型、文字色彩、背景 色彩和漸層的 CSS 樣式，可以定義至少 5 種 （ a~e ）；至多 26 種（ a~z ）不同的色彩搭配。 基本上，每一個 jQuery Mobile 佈景除了使用英文 字母 a~z 代表不同色彩搭配外，佈景還擁有一些全 域定義（ Global Definitions ），可以使用在每一 種色彩搭配的共同樣式，如下所示： – 文字和方框特效，例如：陰影和圓角。 –jQuery Mobile 框架按鈕等元件取得焦點顯示的樣式。

34 3-6-1 jQuery Mobile 佈景的基礎 - 預設佈景 jQuery Mobile 預設佈景只提供 5 種色彩搭配， 即字母 a~e ，如下表所示： 字母預設佈景的色彩說明 a 黑色工具列的預設樣式，最高等級的佈景 b 藍色次高等級的佈景 c 銀色大部分情況使用的佈景 d 灰色替代的次高等級佈景 e 黃色強調的佈景色彩

35 3-6-2 ThemeRoller 線上工具的基礎 ThemeRoller 線上工具是源於 jQuery UI 的佈景編 輯工具，可以直接使用拖拉方式更改元件樣式， 幫助我們快速建立自訂佈景，其網址如下所示： –ThemeRoller ： http://jquerymobile.com/themeroller http://jquerymobile.com/themeroller

36 3-6-3 使用 ThemeRoller 建立自訂佈景 - 選擇色彩 ( 方法一 ) ThemeRoller 提供三種方式來選擇色彩，第一種 是在右上方調色盤選擇色彩，和在下方調整亮度 與飽和度，我們只需拖拉色塊至左邊色彩樣式的 欄位上，就可以更改色彩，如下圖所示：

37 3-6-3 使用 ThemeRoller 建立自訂佈景 - 選擇色彩 ( 方法二 ) 第二種方法是長按左邊色彩樣式欄位，可以顯示 圓形的色彩選擇器來選擇色彩，如下圖所示：

38 3-6-3 使用 ThemeRoller 建立自訂佈景 - 選擇色彩 ( 方法三 ) 第三種方法是最直覺的方式，請打開左邊上方的 【 Inspector 】開闢，然後就可以直接拖拉上方色 塊至下方預覽元件來更改指定元件的色彩，如下 圖所示：

39 3-6-3 使用 ThemeRoller 建立自訂佈景 - 編輯全域定義的樣式 在左上方選【 Global 】 標籤，就可以編輯全 域定義樣式，這是套 用在所有不同色彩搭 配的共用樣式，如右 圖所示：

40 3-6-3 使用 ThemeRoller 建立自訂佈景 - 編輯色彩搭配的樣式 在【 Global 】標籤 之後是至少 3 種；最 多 26 種色彩搭配的 a~z ，只需選擇大寫 英文字母標籤，就 可以切換編輯指定 字母的色彩搭配， 如右圖所示：

41 3-6-3 使用 ThemeRoller 建立自訂佈景 - 下載自訂佈景 在完成自訂佈景的樣式編輯後，就可以下載自訂 佈景的檔案，如下圖所示：

42 3-6-3 使用 ThemeRoller 建立自訂佈景 - 自訂佈景檔案的內容 在成功下載 ZIP 格式的自訂佈景檔後，以此例是名 為【 jquery-mobile-theme-022657-0.zip 】的檔案， 在解壓檔案至本章目錄後，可以看到「 themes 」 子資料夾和 index.html 範例檔案，請開啟 「 themes 」子資料夾，如下圖所示：

43 3-6-4 在 jQuery Mobile 程式使用自訂佈景 - 標 籤 在 jQuery Mobile 程式使用自訂佈景，除了自訂佈景的外部 CSS 檔案外，還需要 jquery.mobile.structure-x.x.min.css ， 其中 x.x 是版本（在 jQuery Mobile 下載檔案中），在 jQuery Mobie 程式需要使用它來取代預設佈景的外部 CSS 檔案，如下所示：

44 3-6-4 在 jQuery Mobile 程式使用自訂佈景 - 站台結構 與執行結果