Chapter 13epaper.gotop.com.tw/pdf/AEL016800.pdf · 13 Chapter 建立jQuery Mobile 程式 13-1...

13 Chapter

建立 jQuery Mobile 程式

13-1 jQuery Mobile的基礎

13-2 行動瀏覽器與 Viewport

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

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

13-5 jQuery Mobile頁面結構

13-6 巡覽 jQuery Mobile頁面

13-2

PART 5 jQuery Mobile行動網頁設計

13-1 jQuery Mobile 的基礎

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

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

程式。

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

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

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

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

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

套建立在 jQuery 函數庫之上的使用介面系統（User Interface System，UI）；一個觸

控最佳化的 Web 框架，提供眾多最佳化觸控操作的使用介面元素，可以讓我們不用

撰寫任何一列 JavaScript 程式碼，就可以輕鬆使用 HTML 標籤建立跨行動裝置網站

或 Mobile Web 應用程式的使用介面。

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

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

介面框架（Framework），因為是使用宣告方式建立使用介面，單純使用 HTML 標

籤就可以建立一致佈景外觀的使用介面。

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

網站或 Mobile Web 應用程式的使用介面，但是，如此作會產生一些問題，如下所示：

跨瀏覽器相容：因為不是每一個行動瀏覽器都一樣，雖然目前行動裝置使用

的瀏覽器大都採用 Webkit 引擎為基礎，但是，仍然有些微差異，所以，採

用使用介面框架是一種最佳選擇，因為我們可以將跨瀏覽器相容的問題丟給

框架來處理。

Memo

13-3

chapter 13 建立 jQuery Mobile程式

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

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

程式碼處理 DOM 和執行 Ajax 呼叫，使用大量程式或標籤碼才能建立使用

介面，不但耗時，在維護上也十分複雜，透過 jQuery Mobile 框架，這些都

是框架的內建工作，我們只需專注於建立使用者所需的介面本身即可，因為

不用撰寫一行程式碼，就可以建立漂亮的使用介面。

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

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

框架可以讓我們輕鬆建立專業的使用介面外觀，開發者可以將大部分心力專

注於商業邏輯，而不是使用介面設計。

13-2 行動瀏覽器與 Viewport 行動網路瀏覽器主要是用來瀏覽 Mobile 網頁，如同桌上型電腦瀏覽器的 Web

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

13-2-1 行動瀏覽器與模擬器

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

和 Chrome 等，在 Mobile 平台的行動瀏覽器也一樣有多種，除了各平台內建的行動

瀏覽器外，還有一些桌上型瀏覽器的 Mobile 版，例如：Opera 和 Firefox。

行動裝置平台有 Apple 的 iPhone iOS、Google 的 Android 和 Windows Phone 等

平台，其內建行動瀏覽器都支援最新 HTML5、CSS3 和 JavaScript。

在 WebMatrix 可以免費安裝 iPhone 行動瀏覽器的模擬器，讓我們在 Windows

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

請啟動 WebMatrix開啟或新增名為【Ch13】的 HTML站台。

13-4


在工具列執行「首頁>執行>新增...」指令開啟瀏覽器擴充組件庫。

在瀏覽器擴充組件庫右邊選第 1個【iPhone Simulator】後，按【安裝】鈕。

13-5


可以看到組件的安裝資訊，按【是】鈕確認安裝。

在閱讀使用者授權合約後，按【我接受】鈕同意授權。

稍等一下，等到安裝完成，按【關閉】鈕返回 WebMatrix。

在 WebMatrix 的 Ribbon 工具列執行「首

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

Simulator 瀏覽站台的首頁，因為 index.html

沒有內容，所以瀏覽器顯示空白頁，如右圖所

示：

請在 iPhone Simulator 上，執行滑鼠【右】

鍵快顯功能表的「File>Exit」指令結束 iPhone

Simulator。

13-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">

13-6


上述<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

表示不允許

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

參數說明

target-densityDpi 參數可以告訴行動裝置此 Mobile網頁設計的 dpi（Dots per Inch，每英吋

的像數），值 device-dpi 是符合行動裝置螢幕的 dpi，值 high-dpi、

medium-dpi和 low-dpi分別是高、中和低 dpi，也可以指定 70~400之間

的值

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

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

<head>

<meta charset="utf-8"/>


<title>Ch13_2_2.html</title>

</head>

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

的像素等於 1 個螢幕像素。現在，我們就可以使用 iPhone Simulator 來瀏覽 Mobile

網頁：Ch13_2_2.html，其步驟如下所示：

13-7


請在 WebMatrix的工具列執行「首頁>執行

>iPhone」指令，可以開啟 iPhone Simulator

瀏覽站台的首頁。

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

後輸入 Ch13_2_2.html，按 Enter 鍵，就可

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

當在 WebMatrix 執行過 iPhone Simulator，它就

會成為預設瀏覽器，此後只需在站台檔案清單的欲瀏

覽檔案上，執行滑鼠【右】鍵快顯功能表的【在瀏覽

器中啟動】指令，就可以啟動 iPhone Simulator 瀏覽

執行指定的 HTML 網頁。

13-8


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

在安裝 iPhone Simulator 後，我們就可以在 WebMatrix 建立 jQuery Mobile 執行

環境。

13-3-1 下載 jQuery Mobile

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

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

下載 jQuery Mobile

jQuery Mobile 可以在官方網站免費下載，其下載網址如下所示：

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

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

完整 JavaScript、CSS 和 image 檔案，其下載檔名為：jquery.mobile-1.4.3.zip。

jQuery Mobile的檔案結構

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

13-9


上述「demos」目錄是說明與範例程式。在網站建立 jQuery Mobile 程式所需的

檔案和目錄，如下所示：

「images」目錄：jQuery Mobile 使用的圖示檔。

jquery.mobile-1.4.3.min.css：jQuery Mobile 的 CSS 樣式檔案。

jquery.mobile-1.4.3.min.js：jQuery Mobile 的外部 JavaScript 程式檔案。

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

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

除錯，請使用沒有字尾的版本。

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

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

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

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

案、「images」目錄和 jQuery 函數庫 jquery.min.js（已經

更改檔案名稱，使用的是 1.11.1 版），都加入 WebMatrix

站台 Ch13 的根目錄，就完成 jQuery Mobile 的安裝，如

右圖所示：

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

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

使用 CDN（Content Delivery Network）。

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

當我們將 jQuery Mobile 相關檔案和目錄置於 HTML 網頁的同一目錄後，就可

以在 HTML 網頁<head>標籤的<script>子標籤含括外部 JavaScript 程式碼檔案的

jQuery 函數庫和 jQuery Mobile，如下所示：

13-10


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

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

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

<script>

……

</script>

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

含括 jQuery 函數庫（已更名），第 3 個是 jQuery Mobile 的 JavaScript 檔案（已更

名），我們可以在最後 1 個<script>標籤撰寫 jQuery或 JavaScript程式碼來建立 jQuery

Mobile 網頁應用程式。

使用 CDN

如同 jQuery 函數庫，我們並不用下載 jQuery Mobile 程式碼檔案，可以直接使

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

<link rel="stylesheet"

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

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

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

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

jQuery Mobile 相關檔案。

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

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

WebMatrix 和 iPhone Simulator 在 Windows 作業系統預覽 jQuery Mobile 程式的執

行結果。

jQuery Mobile程式：Ch13_4.html

在 jQuery Mobile 程式建立一頁 Mobile Web 開發的說明網頁，其建立步驟如下

所示：

13-11


步驟一：HTML5的 DOCTYPE

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

DOCTYPE，如下所示：

<!DOCTYPE html>

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

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

放比例，如下所示：

<meta charset="utf-8">


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

標籤指定行動裝置的寬度和縮放比例，請參閱第 13-2-2 節 meta 標籤 Viewport 的進

一步說明。

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

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

後，就可以在<head>區塊使用<link>和<script>標籤含括 jQuery 和 jQuery Mobile 程

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

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

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

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

步驟四：建立頁面

jQuery Mobile 框架是使用標記驅動（Markup-driven）來設定與配置頁面，我們

是使用 HTML5 的 data-role 屬性定義 div 元素是什麼，如下所示：

<div data-role="page">

<div data-role="header">

<h1>Mobile Web 開發</h1>

</div>

<div data-role="content">

<p>使用 HTML5 建立 Mobile

13-12


網頁和桌上型 Web 網頁並沒有什麼不同，主要差異在於 Mobile 網頁的螢幕尺寸比

較小，另一個需要注意的是效能，我們

需要最佳化 Mobile 網頁的執行，減少頻

寬浪費，以便行動網路瀏覽器能夠以最

佳效能來瀏覽 Mobile 網頁。</p>

</div>

<div data-role="footer">

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

</div>

</div>

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

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

<div>標籤的區段說明

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

太長，就會在最後顯示縮寫符號「...」

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

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

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

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

項元素，可有可無，我們可以使用 header 和 footer 建立工具列的介面元件，其進一

步說明請參閱第 14 章。

步驟五：預覽網頁內容

請在 WebMatrix 的標籤頁編輯 Ch13_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>Ch13_4.html</title>

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

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

13-13


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>使用 HTML5 建立 Mobile

18: 網頁和桌上型 Web 網頁並沒有什麼不同，

19: 主要差異在於 Mobile 網頁的螢幕尺寸比

20: 較小，另一個需要注意的是效能，我們

21: 需要最佳化 Mobile 網頁的執行，減少頻

22: 寬浪費，以便行動網路瀏覽器能夠以最

23: 佳效能來瀏覽 Mobile 網頁。</p>

24: </div>

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

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

27: </div>

28: </div>

29: </body>

30: </html>

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

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

請參閱第 13-2-2 節使用 iPhone Simulator 預覽手機行

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

13-14


13-5 jQuery Mobile 頁面結構

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

框架架構和頁面結構。

13-5-1 jQuery Mobile框架架構

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

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

Mobile 網頁使用介面。

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

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

Mobile 框架架構的基本單位是頁面，使用卡片觀念來建立頁面結構，如同一盒卡片，

盒子是 HTML 網頁文件，每一張卡片就是一個扮演 page 角色的<div>標籤，如下圖

所示：

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

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

在 Mobile 技術並不是一件新鮮事，因為 WML 語言（Wireless Markup Language）

就可以在同一檔案建立多個虛擬頁面，每一個頁面稱為卡片（Cards），WML 文件

稱為一幅紙牌（Deck），它是使用<card>標籤定義虛擬頁面。

13-15


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

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

13-5-2 頁面結構與角色

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

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

擁有一或多個頁面，詳見第 13-5-3 節的說明。

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

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

例如：<div data-role="page">使用 data-role 屬性值 page 指定此標籤扮演頁面角色，

其 id 屬性值就是頁面名稱。

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瀏覽器隱藏元素

13-16


13-5-3 多頁面結構

jQuery Mobile 可以在同一 HTML 網頁建立多頁面和對話方塊，並且讓我們建立

超連結或巡覽工具列來切換顯示不同頁面或對話方塊。

多頁面結構

在第 13-5-2 節已經說明過 jQuery Mobile 頁面結構，我們是使用 id 屬性替頁面

命名，同一 jQuery Mobile 程式就可以建立多頁面，例如：id 屬性值為 home 和 register

的 2 個頁面，如下所示：

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

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

<div data-role="content">

…

<a href="#register">報名研討會</a><br/>

</div>

<div data-role="footer"></div>

</div>

<div data-role="page" id="register">

<div data-role="header"></div>

<div data-role="content"></div>

</div>

上述<div>標籤有 2 個頁面，在 home 頁面的 content 內容擁有 a 元素的超連結，

可以開啟 register 頁面，如下所示：

<a href="#register">報名研討會</a>

上述<a>標籤的 href 屬性是使用「#」符號加上 id 屬性值來切換至另一頁面。當

在瀏覽器載入多頁面的 jQuery Mobile 程式， jQuery Mobile 預設隱藏所有<div

data-role="page">標籤，只顯示第 1 個頁面，即顯示 home 頁面。

多頁面的標題文字

對於多頁面 jQuery Mobile 程式來說，預設所有頁面都是使用同一<title>標籤的

標題文字，即顯示在瀏覽器視窗的標題列或標籤頁的標題文字（如果有顯示的話），

我們可以使用 data-title 屬性指定其他頁面顯示的標題文字（不含第一個頁面），如

下所示：

13-17


<div data-role="page" id="register"

data-title ="Register">

<div data-role="header">

<h1>報名研討會</h1>

</div>

<div data-role="content"></div>

</div>

上述標籤的 data-title 屬性可以指定第二個頁面的標題文字。

jQuery Mobile程式：Ch13_5_3.html

在 jQuery Mobile 程式的同一程式檔案建立 5 個頁面，依序為 home、register、

speakers、schedule 和 information，在 home 頁面新增超連結開啟其他 4 個頁面，點

選【報名研討會】超連結，可以顯示 register 頁面，如下圖所示：

點選其他超連結可以瀏覽其他 jQuery Mobile 頁面。因為 register 頁面有使用

data-title 屬性指定標題文字，所以在 Google Chrome 瀏覽器顯示的標籤頁名稱就是

屬性值 Register，如下圖所示：

13-18


程式內容

01: <!DOCTYPE html>

02: <html>

03: <head>




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




10: </head>

11: <body>

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


14: <h1>Mobile 研討會</h1>

15: </div>


17: <p>歡迎參加目前最佳的 Mobile 開發研討會!</p>

18: <p>Mobile 開發是目前巿場的當紅潮流，

19: 各種伺服端和客戶端網頁技術都逐漸向 Mobile 靠攏，

20: Mobile 開發研討會告訴你最新的各種 Mobile 技術。</p>

21: <a href="#register">報名研討會</a><br/>

22: <a href="#speakers">講師陣容</a><br/>

23: <a href="#schedule">課程內容</a><br/>

24: <a href="#information">聯絡資訊</a><br/>

25: </div>

26: <div data-role="footer" data-position="fixed">

27: <h1>舉辦者: 陳會安</h1>

28: </div>

29: </div>

30: <div data-role="page" id="register"

31: data-title ="Register">


13-19


33: <h1>報名研討會</h1>

34: </div>


36: <p>請輸入個人資料報名 Mobile 開發研討會!</p>

37: </div>

38: </div>

39: <div data-role="page" id="speakers"

40: data-title ="Speakers">


42: <h1>講師陣容</h1>

43: </div>

44: <div data-role="content"></div>

45: </div>

46: <div data-role="page" id="schedule">


48: <h1>課程內容</h1>

49: </div>


51: </div>

52: <div data-role="page" id="information">


54: <h1>聯絡資訊</h1>

55: </div>


57: </div>

58: </body>

59: </html>

程式說明

第 12~29列：第 1頁 home頁面，在第 21~24列是連接其他頁面的超連結，第 26~28

列使用 data-position="fixed"屬性，可以固定在頁尾顯示註腳列。

第 30~57列：分別是 register、speakers、schedule和 contact頁面，在第 31和 40

列使用 data-title屬性指定標題文字。

13-20


13-6 巡覽 jQuery Mobile 頁面

在 jQuery Mobile 程式的不同頁面可以使用 a 元素的超連結來進行巡覽，即連接

其他 jQuery Mobile 頁面，或其他網站的網頁。

13-6-1 頁面標題列的返回鈕

在 jQuery Mobile 頁面的標題列擁有返回上一個頁面的返回鈕，因為預設隱藏，

所以不會看到此按鈕。對於哪些準備建立成原生應用程式的 Mobile 網頁應用程式來

說，我們可能就需要顯示返回鈕來幫助使用者進行頁面之間的切換（因為瀏覽器本

身擁有回到上一頁的按鈕，所以 jQuery Mobile 的 Mobile 網頁並不一定需要使用此

按鈕）。

在標題列顯示返回鈕

jQuery Mobile 框架自動會替頁面標題列新增返回鈕，我們可以使用

data-add-back-btn 屬性來切換顯示返回鈕，如下所示：

<div data-role="header" data-add-back-btn="true">

…

</div>

上述標題列的<div>標籤指定 data-add-back-btn 屬性值為 true，即顯示返回鈕，

預設值 false 為不顯示，可以看到位在標題列前的返回鈕，預設的標題文字是【Back】。

指定返回鈕的標題文字

因為返回鈕的預設標題文字是【 Back 】，如果需要，我們可以使用

data-back-btn-text 屬性更改顯示的標題文字，如下所示：

<div data-role="header"

data-add-back-btn="true" data-back-btn-text="上一頁">

…

</div>

上述標籤碼指定返回鈕顯示的標題文字為【上一頁】。

13-21


jQuery Mobile程式：Ch13_6_1.html

在 jQuery Mobile 程式建立 3 個頁面 home、

register 和 speakers，在 home 頁面擁有超連結開

啟 register 和 speakers 頁面，在 register 頁面顯示

返回鈕， speakers 頁面將標題文字更改成上一

頁。請點選【報名研討會】顯示 register 頁面，如

右圖所示：

上述頁面的標題列顯示回到上一頁的【Back】鈕，按一下，可以回到上一個頁

面（請注意！iPhone Simulator 按此按鈕有問題，並沒有作用，請按下方工具列的第

1 個按鈕回到上一頁）。

如果點選【講師陣容】顯示 speakers 頁面，

可以看到標題文字改為【上一頁】鈕，如右圖所示：

程式內容

01: <!DOCTYPE html>

02: <html>

03: <head>




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




10: </head>

11: <body>

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


14: <h1>Mobile 研討會</h1>

15: </div>


17: <p>歡迎參加目前最佳的 Mobile 開發研討會!</p>

18: <p>Mobile 開發是目前巿場的當紅潮流，

19: 各種伺服端和客戶端網頁技術都逐漸向 Mobile 靠攏，

Chapter 13

13-29

學習評量

（）1. 請問 jQuery Mobile 頁面一定需要使用下列哪一個 Meta 標籤的屬性

來建立 Mobile 網頁？

A. chartset B. viewport

C. initial-scale D. user-scalable

（）2. jQuery Mobile 頁面是使用 div 元素建立，請問我們需要指定

data-role 屬性值為下列哪一個？

A. page B. header C. footer D. content

（）3. jQuery Mobile 頁面顯示的內容也是 div 元素，請問 data-role 屬

性值是下列哪一個？

A. page B. header C. footer D. content

（）4. 在同一 jQuery Mobile 程式可以建立多頁面，我們需要在頁面

<div>標籤指定下列哪一個屬性值來識別是不同的頁面？

A. name B. page C. id D. page_id

（）5. 請問下列哪一個 jQuery Mobile 頁面轉換特效會從 1 個點逐漸擴

展成整個頁面來顯示？

A. slideup B. fade C. pop D. flip

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

7. 請舉例說明 jQuery Mobile 的頁面結構？如何連接其他 jQuery

Mobile 頁面？

8. 請建立 2 頁 jQuery Mobile 頁面，一為 home；一為 ch13，在 home

頁面顯示本書書名的文字內容；ch13 頁面使用<ol>標籤顯示本章章

節的清單，然後在 home 頁面建立名為【第 13 章】超連結來連接

ch13 頁面。

Chapter 13epaper.gotop.com.tw/pdf/AEL016800.pdf · 13 Chapter 建立jQuery Mobile 程式 13-1...

Documents

Transcript of Chapter 13epaper.gotop.com.tw/pdf/AEL016800.pdf · 13 Chapter 建立jQuery Mobile 程式 13-1...