chap03 - Gotop

建立 jQuery Mobile程式與佈景

3-1 jQuery Mobile的基礎

3-2 行動網路瀏覽器與Viewport

3-3 下載、安裝與使用jQuery Mobile

3-4 建立第一個jQuery Mobile程式

3-5 jQuery Mobile頁面結構

3-6 jQuery Mobile的佈景

03

3-2

Part II 客戶端 jQuery Mobile 建立使用介面

3-1 jQuery Mobile 的基礎

jQuery Mobile是基於 jQuery函數庫建立的框架（Framework），在 2010

年 10 月推出 1.0a1 的初期版本，可以幫助我們建立跨行動裝置的網站或

Mobile Web應用程式，在本書是使用 1.2.0版。

本章範例站台是位在「 \ASP.NET_Mobile\Ch03」資料夾的站台，請使用

WebMatrix 開啟資料夾的站台，就可以測試本章範例的 jQuery Mobile 程式。

3-1-1 認識 jQuery Mobile

jQuery Mobile是由 jQuery專案小組開發，在 2011年 11月推出 1.0正式

版，它是一套建立在 jQuery 函數庫之上的使用介面系統（User Interface

System，UI），一個觸控最佳化的 Web框架，提供眾多最佳化觸控操作的使

用介面元素，可以讓我們不用撰寫一行 JavaScript程式碼，就輕鬆使用 HTML

標籤建立跨行動裝置網站或 Mobile Web應用程式的使用介面。

一般來說，跨行動裝置網站或 Mobile Web應用程式最重要的部分就是使

用介面，jQuery Mobile是一套用來建立跨行動裝置網站或 Mobile Web應用

程式的使用介面框架（Framework），因為它是使用宣告方式建立使用介面，

換句話說，我們不用撰寫任何一行 JavaScript程式碼，單純使用 HTML標籤

就可以建立一致佈景外觀的使用介面，所以，本書可以直到第四篇再來說明

JavaScript語言和 jQuery函數庫。

框架（Framework）是一組類別物件的集合，可以提供特定類型軟體的一組服務，

支援可重複使用的詳細設計和程式碼。簡單的說，它就是一個應用程式的準軟

體，提供特定類型軟體的功能，我們只需繼承和使用框架的元件，就可以快速

建立特定類型的軟體程式。

Memo

Memo

3-3

建立 jQuery Mobile 程式與佈景 Chapter 03

在實務上，雖然我們可以使用 HTML、JavaScript 和 CSS 自行建立跨行

動裝置網站或 Mobile Web應用程式的使用介面，但是，如此作會產生一些問

題，如下所示：

跨瀏覽器相容：因為不是每一個行動網路瀏覽器都一樣，雖然目前行

動裝置使用的瀏覽器大都採用 Webkit引擎為基礎，但是，它們仍然

有些微差異，所以，採用使用介面框架是一種最佳選擇，因為我們可

以將跨瀏覽器相容的問題丟給框架來處理。

撰寫大量的程式或標籤碼：如果自行建立跨行動裝置網站或 Mobile

Web應用程式的使用介面，我們需要建立 HTML 標籤的介面元素、

撰寫 JavaScript 程式碼處理 DOM 和執行 Ajax 呼叫，使用大量程式

或標籤碼才能建立出使用介面，不但耗時，而且維護也十分複雜，但

是，透過 jQuery Mobile框架，這些都是框架的內建工作，我們只需

專注於建立使用者所需的介面本身即可，因為不用撰寫一行程式碼，

就可以建立漂亮的使用介面。

一致外觀的專業佈景：漂亮的使用介面是應用程式之所以吸引人目光

的重要因素之一，但是，大部分開發者不見的擁有設計專才，透過

jQuery Mobile 框架可以讓我們輕鬆建立專業的使用介面外觀，開發

者可以將大部分心力專注於商業邏輯，而不是使用介面設計。

3-1-2 jQuery Mobile 的檔案與支援平台

jQuery Mobile程式檔案是一份 HTML5網頁文件，在網頁文件需要內嵌

一些外部檔案，換句話說，完整 jQuery Moblie程式不是只有一個檔案，而是

一組檔案的集合。

如果讀者不熟悉 JavaScript和 jQuery函數庫，因為本書在第四篇才會說

明，在第四篇之前，我們只會使用 jQuery Mobile的 data-* 屬性建立使用介

面，並不會涉及 JavaScript和 jQuery Mobile API程式設計，讀者只需了解第

2章的 HTML5標籤，就足以勝任工作，我們只需在 HTML網頁使用 <script>

標籤內嵌這些 JavaScript 程式碼檔案，就可以輕鬆建立使用介面，並不用撰

寫任何一行 JavaScript程式碼。

3-4


jQuery Mobile 所需的檔案

在 jQuery Mobile的 HTML5網頁文件需要內嵌 JavaScript函數庫和 CSS

外部樣式，其檔案內容如下所示：

jQuery函數庫的 JavaScript程式檔。

jQuery Mobile核心 JavaScript程式檔。

jQuery Mobile核心 CSS外部樣式檔。

jQuery Mobile佈景的外部樣式檔（選項）。

上述佈景的外部樣式檔可有可無，因為 jQuery Mobile核心 JavaScript和

CSS已經內建預設佈景，如果有自訂佈景，才需要此外部 CSS樣式檔案，而

介面所需圖示的 PNG檔案是位在「images」目錄。

jQuery Mobile 支援的平台

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版

Kindle 3 and Fire

Samsung bada 2.0版

Meego 1.2版

Opera Mobile 11.5~12

Symbian Nokia N8、C7、N97版本（不支援 Ajax）

3-5


3-2 行動網路瀏覽器與 Viewport

行動網路瀏覽器主要是用來瀏覽 Mobile網頁（如果瀏覽 PC版的 Web網

頁，網頁內容看起來像是一頁密密麻麻的小抄），如同桌上型電腦瀏覽器的

Web網頁，我們一樣是使用 HTML來建立 Mobile網頁。

3-2-1 行動網路瀏覽器與模擬器

目前桌上型電腦的主要瀏覽器有：Internet Explorer、Firefox、Safari、

Opera和 Chrome等，在 Mobile平台的行動網路瀏覽器也一樣有很多種，除

了各平台內建的行動網路瀏覽器外，還有一些桌上型瀏覽器的 Mobile版，例

如：Opera和 Firefox。

基本上，行動裝置的行動網路瀏覽器和桌上型瀏覽器之間的最大差異在

行動裝置的螢幕尺寸比較小，目前巿面上行動裝置平台有 Apple 的 iPhone

iOS、Google的 Android和 Windows Phone等平台，其內建行動網路瀏覽器

都支援最新 HTML5、CSS3和 JavaScript。

下載與安裝 iPhone Simulator

在 WebMatrix 可以免費安裝 iPhone 行動網路瀏覽器的模擬器（VS

Express for Web不支援，請使用 Opera Mobile Emulator），讓我們在 Windows

8電腦預覽行動裝置的 Mobile網頁，其安裝步驟如下所示：

請啟動 WebMatrix 2開啟名為【Ch03】的站台。

3-6


在 Ribbon 工具列執行「執行>新增...」指令，可以開啟瀏覽器擴充

組件庫。

在右邊選【iPhone Simulator】後，按【安裝】鈕，可看到安裝資訊。

3-7


按【安裝】鈕，可以看到使用者授權合約。

按【我接受】鈕同意授權，就可以下載安裝 iPhone Simulator，稍等

一下，等到安裝完成，就會返回 WebMatrix。

在WebMatrix的 Ribbon工具

列執行「執行>iPhone」指令，可

以開啟 iPhone Simulator 瀏覽站

台的首頁，因為 Default.cshtml

並沒有內容，所以瀏覽器顯示空

白頁，如右圖所示：

請在 iPhone Simulator上，執

行【右】鍵快顯功能表的

「 File>Exit」指令結束 iPhone

Simulator。

3-8


下載與安裝 Opera Mobile Emulator

因為WebMatrix提供的 iPhone Simulator是 Lite版本，可以測試在 iPhone

手機上瀏覽網頁的顯示效果，但功能並不完整，jQuery Mobile框架的某些功

能並無法正確執行，此時，筆者就會改用 Opera Mobile Emulator來測試執行。

Opera Mobile Emulator 是一個可以在桌上型電腦執行的行動網路瀏覽

器，支援 Windows、Mac OS X與 Linux作業系統，可以讓網頁設計者在建

立 Mobile網頁時，直接在個人電腦模擬顯示 Mobile網頁的版面和找出相容

性問題。Opera Mobile Emulator可以在 Opera官方網站免費下載，其下載網

址為：http://www.opera.com/developer/tools/mobile/，如下圖所示：

按游標所在按鈕，就可以下載 Opera Mobile Emulator，本書下載的檔名

為：【Opera_Mobile_Emulator_12.1_Windows.exe】。

3-9


在下載 Opera Mobile Emulator 後，就可以在 Windows 電腦安裝 Opera

Mobile Emulator，其步驟如下所示：

按二下【Opera_Mobile_Emulator_12.1_Windows.exe】檔案，可以

看到歡迎安裝的精靈畫面。

按【Next】鈕選擇 Opera Mobile Emulator的安裝路徑。

預設安裝路徑為「C:\Program Files (x86)\Opera Mobile Emulator」，

按【Next】鈕輸入開始功能表的捷徑名稱。

預設名稱是【Opera Mobile Emulator】，不用更改，按【Next】鈕

選擇額外工作。

勾選是否建立桌面捷徑或快速啟動列圖示，不用更改，按【Next】

鈕可以看到安裝資訊，準備開始安裝。

按【Install】鈕開始安裝，稍等一下，可以看到安裝完成的精靈畫面。

按【Finish】鈕完成 Opera Mobile Emulator的安裝。

3-10


3-2-2 Meta 標籤 Viewport

基本上，使用 HTML5建立 Mobile網頁和桌上型 Web網頁並沒有什麼不

同，只是，我們需要額外使用 Meta標籤 Viewport來告訴行動瀏覽器所看到

的網頁尺寸。

Meta 標籤 Viewport

Meta標籤 Viewport最早出現在 Apple公司 iPhone手機的 Safari瀏覽器，

可以正確告訴行動瀏覽器所看到的網頁尺寸，如果沒有此 Meta 標籤

Viewport，行動瀏覽器會認為它是在瀏覽一頁桌上型電腦看到的網頁，如下

所示：

<meta name="viewport" content="width=device-width, initial-scale=1">

上述 <meta> 標籤的 name屬性值是 viewport，可以告訴使用 WebKit瀏

覽器引擎的行動瀏覽器，和需要顯示的頁面尺寸為何？在 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

3-11


在 Android作業系統的內建行動瀏覽器支援額外參數，其說明如下表所示：

參數說明

target-densityDpi 參數可以告訴行動裝置此 Mobile網頁設計的 dpi（Dots per Inch，每英吋的像數），值 device-dpi是符合行動裝置螢幕的 dpi，值 high-dpi、medium-dpi和 low-dpi分別是高、中和低 dpi，也可以指定 70~400之間的值

現在，我們就可以建立 Ch3_2_2.html，在<head>區塊加上 Meta 標籤

Viewport來建立 Mobile網頁，如下所示：

<head>

<meta charset="utf-8"/>


<title>Ch3_2_2.html</title>

</head>

上述 content屬性的參數指定使用行動裝置的螢幕寬度，1個 viewport顯

示螢幕的像素等於 1個螢幕像素。

3-2-3 瀏覽 Mobile 網頁

現在，我們就可以使用 iPhone Simulator和 Opera Mobile Emulator來瀏

覽 Mobile網頁。

使用 iPhone Simulator 瀏覽 Mobile 網頁

在 WebMatrix 可以使用 iPhone Simulator 瀏覽 Mobile 網頁：

Ch3_2_2.html，其步驟如下所示：

3-12


請啟動 WebMatrix，在 Ribbon工具列執行

「執行>iPhone」指令，可以開啟 iPhone

Simulator瀏覽站台的首頁。

移至上方標題列，可以看到網址欄，請在

最後輸入 Ch3_2_2.html，按 Enter 鍵，

就可以顯示網頁內容，如右圖所示：

當在 WebMatrix 執行過 iPhone Simulator，它就會成為預設瀏覽器，此

後只需在站台檔案清單的欲瀏覽檔案上，執行【右】鍵快顯功能表的【在瀏

覽器中啟動】指令，就可以啟動 iPhone Simulator 瀏覽執行指定的 HTML

網頁。

3-13


使用 Opera Mobile Emulator 瀏覽 Mobile 網頁

在安裝 Opera Mobile Emulator 的最後一步如果勾選【Launch Opera

Mobile Emulator】，或直接按二下桌面【Opera Mobile Emulator】捷徑，就

可以啟動 Opera Mobile Emulator（第 1次啟動需選擇語言，請選 English且

取消勾選下方核取方塊，不再顯示此對話方塊），看到「Opera Mobile

Emulator」對話方塊。

在「Profile」框可以選擇手機或平板電腦的機型，或在右上方【Resolution】

欄位選擇解析度，本書使用的解析度是 480X640，請注意！因為是模擬器，

我們只能預覽大致內容，它和實際在行動裝置上的顯示結果，並不保證百分

之一百相同。

請選【VGA Portrait (480X640)】解析度，按

右下角【Launch】鈕，可以啟動此螢幕尺寸的 Opera

Mobile Emulator，然後按左下角【接受】鈕進入瀏

覽器，如右圖所示：

3-14


請在上方網址欄使用虛擬鍵盤或電腦實際

鍵盤輸入 URL 網址 http://localhost:41980/Ch3

_2_2.html（此網址就是前述使用 WebMatrix執

行網頁時的網址），按 Enter 鍵預覽 Mobile

網頁內容，如右圖所示：

請注意！如果需要修改 URL網址時，只能使用 Backspace 鍵刪除之前

輸入的字元；並不能使用 Delete 鍵刪除之後的字元。在 URL欄位上長按，

可以複製或貼上剪貼簿的內容，如下圖所示：

3-3 下載、安裝與使用 jQuery Mobile

在安裝 iPhone Simulator 和 Opera Mobile Emulator 後，我們就可以在

WebMatrix建立 jQuery Mobile的執行環境。

3-3-1 下載 jQuery 與 jQuery Mobile

jQuery Mobile可以免費下載和使用，我們只需下載 jQuery Mobile框架

的檔案和 jQuery函數庫，在解壓縮後就可以使用 jQuery Mobile。

3-15


下載 jQuery Mobile

jQuery Mobile 可以在官方網站免費下載，在本書使用的是 1.2.0 版，其

下載網址如下所示：

jQuery Mobile：http://jquerymobile.com/download/

請捲動視窗找到 ZIP File，點選【Zip File: jquery.mobile-1.2.0.zip】超連

結下載完整 JavaScript 、 CSS 和 image 檔案，其下載檔名為：

jquery.mobile-1.2.0.zip。

jQuery Mobile 的檔案結構

在 jQuery Mobile下載檔案包含所需的 .js和 .css檔案，其檔案結構如下

圖所示：

3-16


上述「demos」目錄是範例程式。基本上，建立 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 程式

檔案。

上述檔案名稱的字尾 min，表示是壓縮過的檔案（刪除空白字元和換行

後的最小尺寸），通常是使用在實際執行的網頁應用程式，如果需要在 jQuery

Mobile中進行除錯，請使用沒有字尾的版本。

為了方便升級 jQuery Mobile，筆者已經將 jQuery Mobile的版號刪除，

CSS 和 JavaScript 檔案請分別更名為 jquery.mobile.min.css 和

jquery.mobile.min.js。

下載 jQuery 函數庫

jQuery函數庫可以在官方網站免費下載，jQuery Mobile建議使用的版本

為 1.6.4或 1.8.2，在本書是使用 1.8.2版，其下載網址如下所示：

jQuery函數庫：http://jquery.com/download/

3-17


請捲動視窗至「ADVANCED/EXPERIMENTAL OPTIONS」區段，可以

下載之前版本的 jQuery函數庫，請選 1.8.2版之後的【Minified】超連結（右

鍵【另存目標】指令），可以下載壓縮版本的 jQuery函數庫，其下載檔名為：

jquery-1.8.2.min.js。為了方便升級 jQuery，筆者已經將 jQuery版號刪除，請

更名為 jquery.min.js。

3-3-2 安裝 jQuery Mobile 至 WebMatrix 站台

請將 jQuery.mobile.min.css、jquery.mobile.min.js

檔案、「image」目錄和 jQuery 函數庫 jquery.min.js

（已經更改檔案名稱），都加入 WebMatrix站台 Ch03

的根目錄，就完成 jQuery Mobile的安裝，如右圖所示：

3-3-3 在 HTML 網頁使用 jQuery Mobile

在 HTML網頁使用 jQuery Mobile有兩種方式，一是下載至同一個目錄，

或直接使用 CDN（Content Delivery Network）。

使用下載的 jQuery Mobile 程式碼檔案

當我們將 jQuery Mobile相關檔案和目錄置於 HTML網頁的同一個資料

夾後，就可以在 HTML 網頁 <head> 標籤的 <script> 子標籤含括外部

JavaScript程式碼檔案的 jQuery函數庫和 jQuery Mobile，如下所示：

<link rel="stylesheet" href="jquery.mobile.min.css">

<script src="jquery.min.js"></script>

<script src="jquery.mobile.min.js"></script>

<script>

……

</script>

3-18


上述標籤碼的 <link> 是連接外部 CSS 樣式檔案（已更名），第 2 個

<script> 標籤含括 jQuery的 JavaScript函數庫，第 3個是 jQuery Mobile的

JavaScript檔案（已更名），我們可以在最後 1個 <script> 標籤撰寫 jQuery

或 JavaScript程式碼來建立 jQuery Mobile網頁應用程式。

關於 <script> 標籤的進一步說明請參閱第 12章，在此之前讀者就當是一

個含括 JavaScript函數庫的 HTML標籤即可。

使用 CDN

CDN 是將資料存放在網路系統的多個電腦節點，以加速資料存取，以

Internet來說，資料是儲存在全球多個不同位置的伺服器，當存取資料時，就

會從最近的伺服器來取得資料，以加速資料存取。

換句話說，我們並不用下載 jQuery和 jQuery Mobile程式碼檔案，可以

直接使用儲存在 CDN的程式碼檔案，如下所示：

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

上述標籤碼可以在 JavaScript程式的 <head> 標籤含括 CDN的 jQuery函

數庫和 jQuery Mobile相關檔案。

3-4 建立第一個 jQuery Mobile 程式在這一節我們準備建立第一個 jQuery Mobile程式的行動網頁，並且使用

WebMatrix、IIS Express 和 iPhone Simulator 在 Windows 8 作業系統預覽

jQuery Mobile程式的執行結果。

jQuery Mobile 程式：Ch3_4.html

在 jQuery Mobile程式建立一頁 ASP.NET的 Mobile Web開發的簡介網

頁，其建立步驟如下所示：

3-19


步驟一：HTML5 的 DOCTYPE

jQuery Mobile程式是一個 HTML5網頁，所以在第 1行需要加上 HTML5

的 DOCTYPE，如下所示：

<!DOCTYPE html>

步驟二：<meta>標籤指定編碼和縮放比例

在 HTML的 <head> 區塊需要加上 <meta> 標籤指定編碼和行動裝置的尺

寸與縮放比例，如下所示：

<meta charset="utf-8">


上述第 1個 <meta> 標籤指定編碼為 utf-8，可以正確顯示中文內容，第 2

個 <meta> 標籤指定行動裝置的寬度和縮放比例，在第 3-2-2節有 meta標籤

Viewport的進一步說明。

步驟三：含括 jQuery 和 jQuery Mobile 程式碼檔案和樣式表

當我們將相關.js 和.css 檔案和「image」目錄都複製至 Ch3_4.html 的同

一個資料夾後，就可以在 <head> 區塊使用 <link> 和 <script> 標籤含括

jQuery和 jQuery Mobile程式碼檔案和樣式表，如下所示：

<link rel="stylesheet" href="jquery.mobile.min.css">



步驟四：建立頁面

因為 jQuery Mobile 框架是使用標記驅動（Markup-driven）來設定與配

置頁面，換句話說，我們是使用 HTML5的 data-role屬性定義 div元素是什

麼，如下所示：

<div data-role="page">

<div data-role="header">

<h1>Mobile Web 開發</h1>

3-20


</div>

<div data-role="content">

<p>ASP.NET 支援 Mobile Web 的跨行動裝置網站開發，

並且全面擁抱 Open Source 的當紅網頁技術，例如：

jQuery 函數庫和 jQuery Mobile 框架，

可以幫助我們建立跨平台行動裝置的網站。</p>

</div>

<div data-role="footer">

<h1>製作者: 陳會安</h1>

</div>

</div>

上述最外層 div元素的 data-role屬性值是 page，表示它是一個頁面，在

之中的內容分成三個區段，分別是 <div data-role="header"> 標籤的標題列、

<div data-role="content"> 標籤的本文內容和 <div data-role="footer"> 標籤的

註腳列。

步驟五：預覽網頁內容

請在 WebMatrix的標籤頁編輯 Ch3_4.html，完整 jQuery Mobile程式碼

如下所示：

01: <!DOCTYPE html>

02: <html>

03: <head>

04: <meta charset="utf-8"/>

05: <meta name="viewport"

content="width=device-width, initial-scale=1">

06: <title>Ch3_4.html</title>

07: <link rel="stylesheet" href="jquery.mobile.min.css">

08: <script src="jquery.min.js"></script>

09: <script src="jquery.mobile.min.js"></script>

10: </head>

11: <body>

12: <div data-role="page">

13: <div data-role="header">

14: <h1>Mobile Web 開發</h1>

15: </div>

16: <div data-role="content">

17: <p>ASP.NET 支援 Mobile Web 的跨行動裝置網站開發，

18: 並且全面擁抱 Open Source 的當紅網頁技術，例如：

19: jQuery 函數庫和 jQuery Mobile 框架，

20: 可以幫助我們建立跨平台行動裝置的網站。</p>

3-21


21: </div>

22: <div data-role="footer">

23: <h1>製作者: 陳會安</h1>

24: </div>

25: </div>

26: </body>

27: </html>

上述程式碼可以看到我們沒有使用一行 JavaScript

程式碼，就可以輕鬆建立行動網頁的使用介面。現

在，請參閱第 3-2-3節使用 iPhone Simulator預覽手

機行動網頁的內容，如右圖所示：

請移至 iPhone Simulator 的上方標題，可以顯

示預設網址，請在 Opera Mobile Emulator 輸入此

網址，或複製或貼上網址，就可以在 Opera Mobile

Emulator顯示行動網頁的內容，如右圖所示：

3-22


此時，在瀏覽器上方並沒有顯示 URL網址欄，

請按住網頁往下拖拉，就可以顯示網址欄，再按二

下欄位，即可輸入其他 URL網址，如右圖所示：

3-5 jQuery Mobile 頁面結構

在建立第 1個 jQuery Mobile程式後，接著，就來看一看 jQuery Mobile

頁面的基本結構和角色。

3-5-1 jQuery Mobile 框架架構

jQuery Mobile框架的設計理念非常簡單，它是基於 jQuery和 jQuery UI

建立的一個跨行動裝置平台的使用介面系統，提供輕量化程式碼和樣式來建

立漂亮的 Mobile網頁使用介面。

在 jQuery Mobile框架是使用簡單和功能強大的方式來定義網頁內容，即

頁面（Pages），並且提供 Ajax 技術的巡覽系統，可以建立動畫效果的頁面

轉換，事實上，框架架構的基本單位就是頁面，jQuery Mobile是使用卡片觀

念來建立頁面結構，如同一盒卡片，盒子是 HTML網頁文件，每一張卡片就

是一個扮演 page角色的 <div> 標籤，如下圖所示：

3-23


上述 HTML網頁可以在同一個檔案建立一個或多個頁面，或是多檔案多

頁面，每一個頁面是一張卡片，其主要目的是為了減少延遲和下載時間，事

實上，卡片觀念在 Mobile技術並不是一件新鮮事，因為 WML語言（Wireless

Markup Language）就可以在同一個檔案建立多個虛擬頁面，每一個頁面稱為

卡片（Cards），WML 文件稱為一幅紙牌（Deck），它是使用 <card> 標籤

定義虛擬頁面。

在 jQuery Mobile頁面之間可以使用 <a> 超連結來連接，我們不只可以

連接同一個檔案的其他頁面，還可以連接其他 HTML 網頁的 jQuery Mobile

頁面，在第 4章有進一步的說明。

3-5-2 單一頁面結構與角色

jQuery Mobile 的 HTML5 網頁是以頁面（Pages）為單位來建構使用介

面，我們可以在同一個 jQuery Mobile程式檔案建立一個頁面，或多頁面，也

可以是多檔案和多頁面。

換句話說，使用 jQuery Mobile建立跨行動裝置網站時，我們可以在同一

檔案建立多頁面，或是多個檔案各擁有一或多個頁面，以本書準備在第 4~5

章建立的範例網站來說，使用的是多檔案，而且每一個檔案擁有一個頁面，

以方便解說各頁面的內容。

3-24


jQuery Mobile之所以可以不撰寫任何一行程式碼就建立使用介面，因為

它是使用屬性來指定 <div> 標籤扮演的角色（Roles），使用的是 HTML5的

data-*屬性，例如：<div data-role="page"> 使用 data-role屬性值 page指定此

標籤扮演頁面角色。

單一頁面結構

對於 Android、iOS、Windows Phone 和 webOS 等行動作業系統平台來

說，jQuery Mobile在顯示頁面時會試圖捲動頁面來隱藏上方 URL位址欄位，

其目的是為了建立更像原生應用程式的使用介面。

因為 jQuery Mobile 是使用標記驅動（Markup-driven）來設定與配置頁

面，使用 HTML5的 data-role屬性定義 div元素是什麼，例如：頁面屬性值

是 page，單一頁面的 <div> 標籤包含 3個子 <div> 標籤的區段，其屬性值分

別為 header、content和 footer，如下所示：

<div data-role="page">

<div data-role="header">

<h1>Mobile Web 開發</h1>

</div>

<div data-role="content">

<p>ASP.NET 支援 Mobile Web 的跨行動裝置網站開發，

並且全面擁抱 Open Source 的當紅網頁技術，例如：

jQuery 函數庫和 jQuery Mobile 框架，

可以幫助我們建立跨平台行動裝置的網站。</p>

</div>

<div data-role="footer">

<h1>製作者: 陳會安</h1>

</div>

</div>

上述最外層 div元素的 data-role屬性值是 page，表示它是一個頁面，標

準 jQuery Mobile頁面的內容可以分成三個區段，如下表所示：

<div>標籤的區段說明

<div data-role="header"> 頁面的標題列，我們可以在此元素建立巡覽列，

如果標題文字太長，就會在最後顯示縮寫符號

「...」

3-25


<div>標籤的區段說明

<div data-role="content"> 頁面實際的內容

<div data-role="footer"> 頁面的註腳列，我們也可以在此元素建立巡覽

列，如果加上 data-position="fixed" 屬性，可以讓註腳列永遠顯示在底部

上表的三個區段中，只有 content是頁面的必須元素，header和 footer都

是選項元素，可有可無，我們可以使用 header和 footer建立工具列的介面元

件，其進一步說明請參閱第 5章。

jQuery Mobile 的角色屬性

jQuery Mobile是指定 data-role角色屬性的值來建立不同的頁面元素，其

說明如下表所示：

data-role 屬性值說明

page 定義頁面，這是 jQuery Mobile顯示使用介面的基本單位

header 定義頁面的標題列

content 定義頁面的內容

footer 定義頁面的註腳列

dialog 定義對話方塊的頁面

navbar 定義巡覽工具列

button 產生按鈕介面元件

controlgroup 群組介面元素成水平或垂直排列

listview 建立 ListView元件

collapsible 建立可摺疊內容

collapsible-set 建立手風琴選單

fieldcontain 表單欄位的容器

slider 建立滑動軸

nojs 在支援 jQuery Mobile瀏覽器隱藏元素

3-26


3-6 jQuery Mobile 的佈景

jQuery Mobile框架除了預設佈景外，我們也可以自行使用佈景或 CSS樣

式來格式化整個使用介面，簡單的說，就是建立自訂佈景。

3-6-1 jQuery Mobile 佈景的基礎

jQuery Mobile允許我們建立自訂佈景（Themes）來套用在頁面或頁面元

件，佈景是一組指定版面配置、樣式和色彩的 CSS樣式，一般來說，每一個

自訂佈景可以包含 26種色彩搭配，包含：前景色彩、背景色彩和漸層，以字

母 a~z來標示。

認識 jQuery Mobile 的佈景

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

可以定義至少 5種（a~e）；至多 26種（a~z）不同的色彩搭配。

基本上，每一個 jQuery Mobile佈景除了使用英文字母 a~z代表不同色彩

搭配外，佈景還擁有一些全域定義（Global Definitions），可以使用在每一

種色彩搭配的共同樣式，如下所示：

文字和方框特效，例如：陰影和圓角。

jQuery Mobile框架按鈕等元件取得焦點顯示的樣式。

全域定義的主要目的是維護使用介面一致的使用經驗，不論是套用哪一

種色彩搭配都套用相同的樣式，例如：jQuery Mobile預設佈景是使用藍色表

示按鈕取得焦點，不論使用哪一種色彩搭配都一樣。

對於每一個色彩搭配來說，我們可以定義 jQuery Mobile介面的工具列、

本文內容和按鈕的樣式，包含色彩、陰影和框線。 jQuery Mobile 提供

ThemeRoller線上編輯工具來幫助我們建立自訂佈景。

3-27


jQuery Mobile 的預設佈景

jQuery Mobile預設佈景只提供 5種色彩搭配，即字母 a~e，如下表所示：

字母預設佈景的色彩說明

a 黑色工具列的預設樣式，最高等級的佈景

b 藍色次高等級的佈景

c 銀色大部分情況使用的佈景

d 灰色替代的次高等級佈景

e 黃色強調的佈景色彩

我們可以使用 data-theme 屬性指定使用哪一種色彩搭配的佈景，如下所

示：

<div data-role="header" data-theme="b">…</div>

上述 header區段的 data-theme屬性值是 b，就是使用預設佈景 b的色彩

搭配來顯示標題列。

jQuery Mobile 程式：Ch3_6_1.html

在 jQuery Mobile 程式顯示 jQuery Mobile

預設佈景 a~e，首先是使用 iPhone Simulator來

測試執行，如右圖所示：

3-28


Opera Mobile Emulator的執行結果，如右圖

所示：

上述巡覽工具列按鈕的標題文字因為寬度太小和解析度問題，所以最後

1個沒有完整顯示標題文字，此時剪裁部分會自動顯示省略符號。

程式內容

01: <!DOCTYPE html>

02: <html>

03: <head>



content="width=device-width, initial-scale=1">

06: <title>Ch3_6_1.html</title>

07: <link rel="stylesheet" href="jquery.mobile.min.css">



10: </head>

11: <body>

12: <div data-role="page" id="home">

13: <div data-role="header" data-theme="b">

14: <h1>Ch3_6_1.html</h1>

15: </div>

16: <div data-role="content">

17: <p>jQuery Mobile 預設佈景</p>

18: <div data-role="navbar">

19: <ul>

20: <li><a href="#" data-theme="a">佈景 a</a></li>

21: <li><a href="#" data-theme="b">佈景 b</a></li>

22: <li><a href="#" data-theme="c">佈景 c</a></li>

23: <li><a href="#" data-theme="d">佈景 d</a></li>

3-29


24: <li><a href="#" data-theme="e">佈景 e</a></li>

25: </ul>

26: </div>

27: </div>

28: </div>

29: </body>

30: </html>

程式說明

第 18~26列：使用 data-role屬性值 navbar的巡覽工具列來測試各種

jQuery Mobile預設佈景，在第 20~24列使用 data-theme屬性值來指

定預設佈景 a~e，關於巡覽工具列的進一步說明，請參閱第 5-1節。

3-6-2 ThemeRoller 線上工具的基礎

ThemeRoller線上工具是源於 jQuery UI的佈景編輯工具，可以讓我們直

接拖拉色彩來更改元件的顯示樣式，幫助我們快速建立自訂佈景，其網址如

下所示：

ThemeRoller：http://jquerymobile.com/themeroller

當瀏覽器載入上述網址，可以看到一個歡迎使用 ThemeRoller 的視窗，

如下圖所示：

3-30


請點選【Get Rolling】進入 ThemeRoller編輯網頁，如下圖所示：

上述 ThemeRoller 使用介面可以分成左右兩大部分，在左上方標籤可以

切換編輯全域定義 Global，或預設 3個空佈景的色彩搭配 A、B和 C，如果

需要更多，請按最後的【+】標籤來新增色彩搭配，最多可以有 26 個，在下

方展開區段可以編輯各種元件的佈景樣式或全域樣式，包含字型、色彩、圓

角、圖示和陰影等樣式。

當我們在左邊區段更改樣式，可以馬上在右邊顯示各種元件的預覽結

果，標題文字 A是對應色彩搭配 A的元件預覽結果；B就是 B；C就是 C，

以此類推，捲動視窗就可以在下方看到標題文字 C的預覽結果。

3-6-3 使用 ThemeRoller 建立自訂佈景

現在，我們就可以使用 ThemeRoller建立 jQuery Mobile的自訂佈景，並

且在完成後下載自訂佈景的樣式檔案。

選擇色彩

在 ThemeRoller 建立自訂佈景的最重要工作是選擇色彩，ThemeRoller

可以使用三種方式來選擇色彩，如下所示：

3-31


方法一：使用右上方調色盤選擇色彩，然後就可以在下方調整亮度與

飽和度，我們只需拖拉色塊至左邊色彩樣式的欄位上，就可以更改色

彩，如下圖所示：

方法二：長按左邊色彩樣式欄

位，就可以顯示圓形的色彩選

擇器來選擇色彩，如右圖所

示：

方法三：請打開左

上方【 Inspector】

開闢，就可以直接

拖拉上方色塊至下

方預覽元件來更改

指定元件的色彩，

如右圖所示：

3-32


編輯全域定義的樣式

在左上方選【Global】標籤，可以編輯全域

定義樣式，這是套用在所有不同色彩搭配的共

同樣式，如右圖所示：

在下方展開【Font Family】可以編輯字型；【Active State】更改作用中

狀態的文字色彩、背景色彩、框線和陰影；【Corner Radii】調整圓角的弧度；

【Icon】調整圖示色彩；【Box Shadow】調整方框陰影。

編輯指定色彩搭配的樣式

在【Global】標籤之後是預設至少 3種；最

多 26 種色彩搭配的 a~z，只需選擇上方大寫英

文字母標籤，就可以切換編輯指定字母的色彩搭

配，如右圖所示：

3-33


按最後【+】標籤可以新增色彩搭配，在選擇後，請展開下方各區段來編

輯工具列、內文、按鈕等元件的樣式。

下載自訂佈景

在完成自訂佈景的樣式編輯後，我們可以下載自訂佈景的壓縮檔案，如

下圖所示：

點選上方【Download】鈕，可以看到「Download Theme」對話方塊。

3-34


在右上角【Theme Name】欄輸入自訂佈景名稱，以此例為 my-custom-

theme，按【Download Zip】鈕下載 ZIP格式的自訂佈景檔。

自訂佈景檔案的內容

在成功下載 ZIP 格式的自訂佈景檔後，以此例是名為【jquery-mobile-

theme-022657-0.zip】的檔案，在解壓檔案至本章目錄後，可以看到「themes」

子資料夾和 index.html範例檔案，請開啟「themes」子資料夾，如下圖所示：

上述 my-custom-theme.min.css是我們建立自訂佈景的 CSS樣式檔案，名

稱是在下載時輸入的佈景名稱，「images」資料夾是圖示檔。

3-6-4 在 jQuery Mobile 程式使用自訂佈景

在 jQuery Mobile程式使用自訂佈景，除了自訂佈景的外部 CSS檔案外，

還需要 jquery.mobile.structure-x.x.min.css，其中 x.x 是版本（在 jQuery

Mobile下載檔案中），在 jQuery Mobie程式需要使用它來取代預設佈景的外

部 CSS檔案，如下所示：

<link rel="stylesheet" href="my-custom-theme.min.css">

<link rel="stylesheet" href="jquery.mobile.structure.min.css">



3-35


上述 HTML標籤碼的第 1個 <link> 標籤是連接自訂佈景的外部 CSS樣

式檔案，第 2個是已更名的 jquery.mobile.structure.min.css，如下圖所示：

jQuery Mobile 程式：Ch3_6_4.html

jQuery Mobile程式是修改 Ch3_4.html，改用上一節建立的自訂佈景，其

自訂樣式的顯示結果，首先是 iPhone Simulator，如下圖所示：

3-36


Opera Mobile Emulator的顯示結果，如下

圖所示：

程式內容

01: <!DOCTYPE html>

02: <html>

03: <head>



content="width=device-width,

initial-scale=1">

06: <title>Ch3_6_4.html</title>

07: <link rel="stylesheet" href="my-custom-theme.min.css">

08: <link rel="stylesheet" href="jquery.mobile.structure.min.css">



11: </head>

12: <body>

13: <div data-role="page">

14: <div data-role="header" data-theme="a">

15: <h1>Mobile Web 開發</h1>

16: </div>

17: <div data-role="content" data-theme="b">

18: <p>ASP.NET 支援 Mobile Web 的跨行動裝置網站開發，

19: 並且全面擁抱 Open Source 的當紅網頁技術，例如：

20: jQuery 函數庫和 jQuery Mobile 框架，

21: 可以幫助我們建立跨平台行動裝置的網站。</p>

22: </div>

23: <div data-role="footer" data-theme="c">

24: <h1>製作者: 陳會安</h1>

25: </div>

26: </div>

27: </body>

28: </html>

程式說明

第 14、17和 23列：使用 data-theme屬性值 a、b和 c來分別套用佈

景色彩搭配 a、b和 c。

3-37


Chapter 03

學習評量

1. 請簡單說明什麼是 jQuery Mobile 框架？

2. 請問什麼是 iPhone Simulator 和 Opera Mobile Emulator？

3. 請問 jQuery Mobile 程式需要含括哪些 JavaScript 程式檔和 CSS 檔？

4. 請使用圖例說明 jQuery Mobile 框架架構？

5. 請簡單說明在 jQuery Mobile 的 <div data-role="page"> 標籤頁面中，

可以包含哪三種區段？

6. 請問 jQuery Mobile 的角色屬性是什麼？如何使用角色屬性？

7. 請建立一頁 jQuery Mobile 頁面，可以顯示本書書名的文字內容。

8. 請問什麼是 jQuery Mobile 佈景？請自行試著使用 ThemeRoller 線上工

具建立一個擁有 4 個色彩搭配的自訂佈景，然後套用到學習評量 7 題的

jQuery Mobile 頁面。

3-37

Date post:	01-Jan-2022
Category:	Documents
Upload:	others
View:	12 times
Download:	0 times

chap03 - Gotop

Documents