第 5 章 建立 jQuery Mobile 網頁應用程式 5-1 jQuery Mobile 的基礎 5-1 jQuery Mobile 的基礎 5-2 行動網路瀏覽器與 Mobile 網頁 5-2 行動網路瀏覽器與 Mobile 網頁 5-3 建立 jQuery Mobile 開發環境 5-3 建立.

Presentation on theme: "第 5 章 建立 jQuery Mobile 網頁應用程式 5-1 jQuery Mobile 的基礎 5-1 jQuery Mobile 的基礎 5-2 行動網路瀏覽器與 Mobile 網頁 5-2 行動網路瀏覽器與 Mobile 網頁 5-3 建立 jQuery Mobile 開發環境 5-3 建立."— Presentation transcript:

1 第 5 章 建立 jQuery Mobile 網頁應用程式 5-1 jQuery Mobile 的基礎 5-1 jQuery Mobile 的基礎 5-2 行動網路瀏覽器與 Mobile 網頁 5-2 行動網路瀏覽器與 Mobile 網頁 5-3 建立 jQuery Mobile 開發環境 5-3 建立 jQuery Mobile 開發環境 5-4 第一個 jQuery Mobile 程式 5-4 第一個 jQuery Mobile 程式 5-5 jQuery Mobile 頁面的基本結構 5-5 jQuery Mobile 頁面的基本結構

2 5-1 jQuery Mobile 的基礎 5-1-1 jQuery Mobile 簡介 5-1-2 jQuery Mobile 的檔案與支援平台

3 5-1-1 jQuery Mobile 簡介 - 說明 jQuery Mobile 是基於 jQuery 建立的框架（ Framework ），在 2010 年 10 月推出 1.0a1 的初期版本，可以幫助我們建立跨 行動裝置的 Mobile 網頁應用程式（ Mobile HTML Applications ），在本書是使用 1.1.0 版。 jQuery Mobile 是由 jQuery 專案小組開發，在 2011 年 11 月推 出 1.0 正式版，它是一套建立在 jQuery 之上的使用介面系統 （ User Interface System ， UI ），一個觸控最佳化的 Web 框 架，提供眾多最佳化觸控操作的使用介面元素，可以讓我 們不用撰寫一行 JavaScript 程式碼，就輕鬆使用 HTML 標籤 建立 Mobile 網頁應用程式的使用介面。

4 5-1-1 jQuery Mobile 簡介 - 使用介面系統 一般來說， Mobile 網頁應用程式最重要的部分就是使用介 面， jQuery Mobile 是一套用來建立 Mobile 網頁應用程式的 使用介面框架（ Framework ），因為它是使用宣告方式建 立使用介面，換句話說，我們不用撰寫任何 JavaScript 程式 碼，只需單純使用 HTML 標籤就可以建立一致佈景外觀的 使用介面。 在實務上，雖然我們可以使用 HTML 、 JavaScript 和 CSS 自行 建立 Mobile 網頁應用程式的使用介面，但是，如此作會產 生一些問題，而使用 jQuery Moblie 仍然是一種最佳的選擇 ，如下所示： 跨瀏覽器相容。 撰寫大量的程式或標籤碼。 一致外觀的專業佈景。

5 5-1-1 jQuery Mobile 簡介 - 特點 jQuery Mobile 是使用 jQuery 函數庫，換句話說，它和 jQuery 是使用相同 語法，可以搭配 jQuery 函數庫來快速建立 Mobile 網頁應用程式。 jQuery Mobile 可以讓我們寫很少；作很多，不用撰寫複雜的 JavaScript 程式碼，就可以輕鬆開發 Mobile 網頁應用程式的使用介面。 jQuery Mobile 使用介面是使用標記驅動（ Markup-driven ）來設定與配 置，它是以宣告方式直接使用 HTML5 的 data-* 標籤來建立各種使用介 面元素。 jQuery Mobile 可以跨行動裝置，支援 iOS 、 Android 、 BlackBerry 、 Bada 、 Windows Phone 、 webOS 、 Symbian 和 MeeGo 等 Mobile 網頁應用程式 的開發。 jQuery Mobile 提供觸摸、觸摸且按住、滑過和方向改變等自訂事件， 可以讓我們輕鬆處理手機行動裝置的觸控操作。 jQuery Mobile 是使用佈景（ Themes ）來建立一致的使用介面外觀，可 以讓我們很容易建立客製化的使用介面外觀。

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

7 5-1-2 jQuery Mobile 的檔案與支援平台 - 支援的平台 jQuery Mobile 支援多種不同行動作業系統平台， 目前支援的平台說明，如下表所示： 作業系統平台平台版本 iOS 3.2~5.0 版 Android 2.1~2.3 、 3.1 、 4.0 版 Symbian Nokia N8 、 C7 、 N97 版本（不支援 Ajax ） BlackBerry OS 6.0~7.0 版、 Playbook 1.0-2.0 版 WebOS 1.4 、 2.0 、 3.0 版 Windows 7 7.0~7.5 版 Samsung Bada 2.0 版 MeeGo 1.2 版

8 5-2 行動網路瀏覽器與 Mobile 網頁 5-2-1 行動網路瀏覽器的基礎 5-2-2 使用 HTML 建立 Mobile 網頁

9 5-2-1 行動網路瀏覽器的基礎 行動裝置的行動網路瀏覽器和桌上型瀏覽器之間的最大差 異在螢幕比較小，而且各家行動網路瀏覽器都各自提供專 屬特點，所以，在建立 Mobile Web 應用程式或 Mobile Web 網站時，我們需要避開這些專屬功能，只使用各家行動網 路瀏覽器都支援的功能與技術，以達到最大的相容性。 我們可以不用觸及各行動裝置作業系統的原生 API ，就可 以使用 HTML 、 CSS 和 JavaScript 建立跨平台的 Mobile Web 應 用程式，一個在行動網路瀏覽器執行的 Web 應用程式。 目前巿面上行動裝置的 Mobile 平台主要是 Apple 的 iPhone iOS 和 Google 的 Andorid 兩大平台，其內建行動網路瀏覽器 都是使用 WebKit 瀏覽器引擎，支援最新 HTML5 、 CSS3 和 JavaScript 。

10 5-2-2 使用 HTML 建立 Mobile 網頁 - 建立 Mobile 網頁 (PC 版 ) 首先讓我們來看一頁沒有提供額外資訊的網頁，簡單的說 ，它就是 PC 版的 HTML 網頁，如下所示： Ch5_2_2.htm 我的 Mobile 網頁 基本上，使用 HTML 建立 Mobile 網頁 和桌上型 Web 網頁並沒有什麼不同， … 網頁的文字非常小，好像小抄

11 5-2-2 使用 HTML 建立 Mobile 網頁 - Meta 標籤 viewport( 說明 ) Meta 標籤 viewport 可以正確告訴行動瀏覽器所看 到的網頁尺寸，如果沒有此 Meta 標籤 viewport ， 行動瀏覽器會認為它是在瀏覽一頁桌上型電腦看 到的網頁，如下所示： 標籤的 name 屬性值是 viewport ，可以告訴 使用 WebKit 瀏覽器引擎的行動瀏覽器，和需要顯 示的頁面尺寸為何？

12 5-2-2 使用 HTML 建立 Mobile 網頁 - Meta 標籤 viewport(Mobile 版 1) 在 區塊加上 Meta 標籤 viewport ，如下所示： Ch5_2_2m.htm content 屬性的參數指定使用行動裝置的螢幕寬度， 1 個 viewport 顯示螢幕的像素等於 1 個螢幕像素。 為了隱藏行動瀏覽器上方的 URL 網址欄，所以在 標 籤需要加上 onload 事件處理，如下所示：

13 5-2-2 使用 HTML 建立 Mobile 網頁 - Meta 標籤 viewport(Mobile 版 2) 顯示正確大小 的文字內容 （在網頁下方 可以顯示縮放 鈕來縮放網頁 內容），和隱 藏 URL 網址欄

14 5-3 建立 jQuery Mobile 開發環境 5-3-1 Opera Mobile Emulator 5-3-2 Server2Go 的 Web 伺服器 5-3-3 下載 jQuery Mobile 5-3-4 在 JavaScript 程式使用 jQuery Mobile

15 5-3-1 Opera Mobile Emulator- 說明 Opera Mobile Emulator 是一個可以在桌上型電腦執 行的行動網路瀏覽器，支援 Windows 、 Mac OS X 與 Linux 作業系統，可以讓網頁設計者在建立 Mobile Web 應用程式或網站時，直接在個人電腦模擬顯 示 Mobile 網頁的版面和找出相容性問題。 在本書是使用 Opera Mobile Emulator 瀏覽 Apache 網 站（使用 Server2Go 建立）的 HTML 網頁，就是瀏覽 使用 HTML5 、 CSS3 和 JavaScript 建立的 Mobile Web 應用程式。

16 5-3-1 Opera Mobile Emulator- 下載 Opera Mobile Emulator 可以在 Opera 官方網站免費 下載，其下載網址為： http://www.opera.com/developer/tools/mobile/ ， 如下圖所示：

17 5-3-1 Opera Mobile Emulator- 安裝 在下載 Opera Mobile Emulator 後，就可以在 Windows 電腦安裝 Opera Mobile Emulator ，如下圖 所示：

18 5-3-1 Opera Mobile Emulator- 啟動 按桌面的【 Opera Mobile Emulator 】捷徑，就可以 啟動 Opera Mobile Emulator ，看到「 Opera Mobile Emulator 」交談窗。

19 5-3-2 Server2Go 的 Web 伺服器 - 說明 為了方便測試 jQuery Mobile 程式，我們可以在本 機 Windows 電腦架設 Web 伺服器，常用的 Web 伺服 器有微軟 IIS 或免費的 Apache 伺服器。 筆者準備使用 Server2Go 建立 jQuery Mobile 執行環 境， Server2Go 是一套 Timo Haberkern 開發、不用 安裝，如同 Windows 應用程式一般執行的 PHP+Apache 套件，可以讓我們在 Windows 電腦架 設 Apache 的 Web 伺服器來下載執行 jQuery Mobile 程式，和支援 PHP 伺服端網頁技術。

20 5-3-2 Server2Go 的 Web 伺服器 - 安裝 Server2Go 不需要安裝，所以沒有安裝程式，安裝 步驟只需將資料夾下所有檔案複製到硬碟即可， 例如：「 D:\PhoneGap\Server2Go 」資料夾，如下 圖所示：

21 5-3-2 Server2Go 的 Web 伺服器 - 啟動 1 請按二下【 Server2Go.exe 】執行 Server2Go ，如果看到「使 用者帳戶控制」交談窗，請按【是】鈕，就可以看到版權 頁，稍等一下，就會啟動 Windows 7 內建 Internet Explorer 瀏覽器顯示首頁 index.php 的執行結果，預設網址是 http://127.0.0.1:4001/ 。

22 5-3-2 Server2Go 的 Web 伺服器 - 啟動 2 以 JavaScript 程式 Ch3_1_2.htm 的「 D:\PhoneGap\Server2Go\htdocs\Ch03 \Ch3_1_2.htm 」檔案路徑為例，執行 JavaScript 程式的 URL 網址，如下所示 ： http://127.0.0.1:4001/Ch03/Ch3_1_2.htm 請在 Opera Mobile Emulator 瀏覽器輸 入上述網址，即加上 Ch03/Ch3_1_2.htm ，按 Enter 鍵，即 可以執行此 JavaScript 程式，如右圖 所示：

23 5-3-2 Server2Go 的 Web 伺服器 - 結束 結束 Server2Go 非常的簡單，只需關閉前述執行首 頁 index.php 的 Internet Explorer 瀏覽器視窗，可以 看到結束 Server2Go 的進度，稍等一下，就會自動 結束 Server2Go 。

24 5-3-3 下載 jQuery Mobile- 下載 jQuery Mobile 可以在官方網站免費下載，在本章 使用的是 1.1.0 版，其下載網址如下所示： jQuery Mobile ： http://jquerymobile.com/download/

25 5-3-3 下載 jQuery Mobile- 檔案結構 在 jQuery Mobile 下載檔案包含所需的.js 和.css 檔案 ，「 demos 」目錄是範例程式。基本上，建立 jQuery Mobile 程式所需的檔案和目錄，如下所示 ： 「 images 」目錄： jQuery Mobile 使用的圖示檔。 jQuery.mobile-1.1.0.min.css ： jQuery Mobile 的 CSS 樣式檔 案。 jquery.mobile-1.1.0.min.js ： jQuery Mobile 的外部 JavaScript 程式檔案。

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

27 5-3-4 在 JavaScript 程式使用 jQuery Mobile- 使用 CDN CDN 是將資料存放在網路系統的多個電腦節點，以加速資 料存取，以 Internet 來說，資料是儲存在全球多個不同位 置的伺服器，當存取資料時，就會從最近的伺服器來取得 資料，以便加速資料存取。 我們並不用下載 jQuery 和 jQuery Mobile 程式碼檔案，可以 直接使用儲存在 CDN 的程式碼檔案，如下所示：

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

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

30 5-4 第一個 jQuery Mobile 程式 - 步驟三 步驟三：含括 jQuery 和 jQuery Mobile 程式碼檔案和樣 式表 在將相關.js 和.css 檔案都複製至 Ch5_4.htm 的同一 個資料夾後，我們就可以在 區塊使用 和 標籤含括 jQuery 和 jQuery Mobile 程式碼 檔案和樣式表，如下所示：

31 5-4 第一個 jQuery Mobile 程式 - 步驟四 步驟四：建立頁面 jQuery Mobile 是使用標記驅動（ Markup-driven ）來設定與配置頁面， 我們是使用 HTML5 的 data-role 屬性定義 div 元素是什麼，如下所示： jQuery Mobile jQuery Mobile 是基於 jQuery 建立的框架， 支援 iOS 、 Android 、 BlackBerry 、 bada 、 Windows Phone 、 webOS 、 Symbian 和 MeeGo 的Ｍ obile 網頁應用程式開發。 製作者 : 陳會安

32 5-4 第一個 jQuery Mobile 程式 - 步驟五 步驟五：預覽網頁內容 請啟動 Server2Go ，稍等一下， 就可以在 Internet Explorer 瀏覽 器顯示預設首頁。預設網址是 ： http://127.0.0.1:4001/ ，請在 Opera Mobile Emulator 輸入 Ch5_4.htm 網址： http://127.0.0.1:4001/Ch05/Ch5 _4.htm ，就可以在 Opera Mobile Emulator 顯示行動網頁 的內容，如右圖所示：

33 5-5 jQuery Mobile 頁面的基本結構 5-5-1 jQuery Mobile 框架架構 5-5-2 角色 5-5-3 單一頁面結構

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

35 5-5-2 角色 -HTML5 的 data-* 屬性 jQuery Mobile 是使用標準的 HTML 網頁文件，它是使用屬性 來指定 標籤扮演的角色（ Roles ），使用的是 HTML5 的 data-* 屬性，例如： 使用 data-role 屬性值 page 指定此標籤扮演頁面角色。 HTML5 允許使用者自訂元素屬性，在 HTML 元素中，任何 以小寫「 data- 」字首開頭的屬性都視為合法屬性，這些屬 性並不會影響 HTML 元素的顯示和文件驗證，它只是附加 一些額外資料，如下所示： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 div 元素新增名為 data-step 的自訂屬性。

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

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

38 5-5-3 單一頁面結構 - 區段 jQuery Mobile jQuery Mobile 是基於 jQuery 建立的框架， 支援 iOS 、 Android 、 BlackBerry 、 bada 、 Windows Phone 、 webOS 、 Symbian 和 MeeGo 的 Mobile 網頁應用程式開發。 製作者 : 陳會安

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

40