Chapterepaper.gotop.com.tw/PDFSample/AEL016500.pdf · 網頁主要是使用HTML...

jQuery Mobile行動版網頁

10-1 認識 jQuery Mobile

10-2 撰寫 jQuery Mobile行動版網頁

10-3 佈景主題

10-4 超連結

10-5 按鈕

10-6 工具列

10-7 導覽列

10-8 可摺疊區塊

10-9 可摺疊區塊群組

10-10 清單檢視

10-11 表單

Chapter

10-2 l PHP & MySQL

10-1 認識 jQuery Mobile

隨著無線網路與行動通訊的蓬勃發展，以及智慧型手機、平板電腦等行動裝置的

快速普及，使用者隨時隨地可以上網 PO 文、打卡、瀏覽網頁。雖然行動裝置的

瀏覽器大多能夠順利讀取並顯示傳統的 PC 版網頁，但受限於較小的螢幕，使用

者往往得透過頻繁的拉近、拉遠、捲動來閱讀網頁的資訊，相當不方便。

為此，開始有愈來愈多網站推出所謂的「行動版」，也就是行動版網站 (mobile

website)，舉例來說，左下圖是 Yahoo!奇摩的 PC 版網站 (http://tw.yahoo.com/)，

而右下圖是 Yahoo!奇摩的行動版網站 (http://tw.yahoo.com/mobile/)，加以瀏覽

後，我們發現，對於 Yahoo!奇摩這種資訊瀏覽類型的網站來說，其行動版除了

著重執行效能之外，資訊的分類與動線的設計更不能忽視，才能帶給行動裝置

的使用者直覺流暢的操作經驗。

事實上，網站推出行動版已經成為時勢所趨，但問題來了，市面上有數種不同的

行動平台，例如 Android、iOS、Windows 8、BlackBerry OS等，即便同樣是 Android

平台，也有許多不同品牌、不同尺寸的智慧型手機、平板電腦等裝置，總不能針

對各個裝置推出專屬的行動版網站吧？！顯然網頁設計人員需要一個能夠跨平台、

跨裝置的架構，讓他們設計的行動版網站可以在不同的行動裝置顯示相同的結果，

而本章所要介紹的 jQuery Mobile就是一個能夠達成此目標的架構。

jQuery Mobile 行動版網頁 l 10-3

根據 jQuery Mobile 官方網站 (http://jquerymobile.com/) 的說明指出，「jQuery

Mobile是一個奠基於 jQuery與 jQuery UI，以 HTML為基礎的統一使用者介面系

統，橫跨所有受歡迎的行動裝置平台，其輕量級的程式碼具有彈性且容易更換佈

景主題設計。」。

上文提及的 jQuery是一個快速、輕巧、功能強大且跨瀏覽器的 JavaScript函式庫，

屬於開放原始碼，網頁設計人員可以利用這個函式庫所提供的 API簡化 HTML與

JavaScript 之間的操作，例如選擇 HTML 元素、操作 HTML 文件、處理事件、建

立動畫效果、導入 Ajax技術等。至於 jQuery UI則是一個奠基於 jQuery的 JavaScript

函式庫，用來建立互動式使用者介面，例如按鈕、對話方塊、清單檢視、工具列、

導覽列、表單、撥動式切換開關等控制項，拖曳、拖放或放大縮小等操作，設定

CSS樣式、色彩動畫、淡入、淡出等動畫效果。

使用 jQuery Mobile開發的行動版網頁具有下列特點：

能夠在不同的行動裝置顯示相同的結果，達到跨平台、跨裝置、跨瀏覽器

的目的。

為觸控裝置提供最佳化的使用者介面。

程式碼輕薄短小。

可更換或自訂佈景主題。

網頁主要是使用 HTML 5語法來撰寫，除非是一些進階的功能，否則就算

不懂 JavaScript，也能使用 jQuery Mobile。

行動版網頁和 PC版網頁一樣是副檔名為 .html或 .htm的純文字檔，任何能夠用

來輸入純文字的編輯工具，都可以用來撰寫行動版網頁，例如 Notepad++。要注

意的是 PC 版瀏覽器不太適合用來測試行動版網頁，最好是實際在行動裝置做測

試，或在 PC上安裝行動版瀏覽器的模擬器做測試，例如 Opera Mobile Emulator，

您可以連線到 http://www.opera.com/zh-tw/developer/mobile-emulator 下載並安裝

Windows、Mac或 Linux平台的模擬器。

10-4 l PHP & MySQL

10-2 撰寫 jQuery Mobile行動版網頁

使用 jQuery Mobile開發行動版網頁需要一些相關檔案，包括：

jQuery Mobile核心 CSS檔案 (例如 jquery.mobile-XX.min.css，XX為版本)

jQuery核心 JavaScript檔案 (例如 jquery-XX.min.js)

jQuery Mobile核心 JavaScript檔案 (例如 jquery.mobile-XX.min.js)

對於這些檔案，我們可以透過下列兩種方式來取得：

下載 jQuery 與 jQuery Mobile 套件：到 http://jquery.com/download/ 和

http://jquerymobile.com/download/ 下載 jQuery與 jQuery Mobile套件，例如

jquery-1.9.1.min.js 和 jquery.mobile-1.3.1.ZIP，然後將解壓縮得到的檔案和資

料夾複製到網站專案的根目錄。

使用CDN (Content Delivery Networks)：在網頁中參考 jQuery與 jQuery Mobile

官方網站提供的檔案，而不是將相關檔案複製到網站專案的根目錄。我們

可以在 http://jquerymobile.com/download/ 找到類似如下的程式碼，將它複

製到網頁的 <head> 區塊即可：

jquery.mobile-1.3.1.min.css、 jquery-1.9.1.min.js、 jquery.mobile-1.4.2.min.js 為

jQuery Mobile核心 CSS檔案、jQuery核心 JavaScript檔案、jQuery Mobile核

心 JavaScript檔案，檔名中的 1.3.1或 1.9.1為版本，而 .min為最小化的檔案，

也就是不含空白、換行、註解並經過壓縮，推薦給正式版使用。

除了這些檔案，我們可能還會參考到 jquery.mobile.structure-1.3.1.min.css、

jquery.mobile.theme-1.3.1.css等檔案，以使用佈景主題。jQuery與 jQuery Mobile

屬於開放原始碼，能夠免費使用，注意不要刪除檔案開頭的版權資訊即可。

現在，我們就以實際的例子示範如何開發 jQuery Mobile行動版網頁。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>


\ch10\jQM1.html

01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title>我的 jQuery Mobile程式</title> 06: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 07: <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 08: <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 09: <meta name="viewport" content="width=device-width, initial-scale=1"> 10: </head> 11: <body> 12: </body>

13:</html>

目前這份文件還只是一個空白網頁，左下圖是在智慧型手機上的瀏覽結果，而右

下圖是在 Opera Mobile Emulator上的模擬畫面。

雖然 jQuery Mobile 文件不一定要上傳到 Web 伺服器，例如此文件的位置為

C:\jQM1.html，那麼只要在模擬器的網址列輸入 file:///C:/jQM1.html 即可進行瀏

覽，但我們的建議是將文件上傳到支援 PHP 的 Web 伺服器，然後在行動版瀏覽

器或模擬器的網址列輸入以 http:// 開頭的網址，例如 http://www.arts.idv.

tw/~jean/jQM1.html，這樣才能執行使用 PHP技術的行動版網頁。

10-6 l PHP & MySQL

這份文件的重點如下：

06：使用 CDN參考 jQuery Mobile核心 CSS檔案。

07：使用 CDN參考 jQuery核心 JavaScript檔案。

08：使用 CDN參考 jQuery Mobile核心 JavaScript檔案。

09：定義一個 metadata，名稱為 "viewport"，內容為 "width=device-width,

initial-scale=1"，表示將網頁寬度指定為行動裝置的螢幕寬度、縮放比為 1:1。

在加入網頁內容之前，我們先解釋一個觀念，一份 jQuery Mobile文件可以包含一

個或多個「頁面」(page)，而一個頁面又可以包含一個或多個「角色」(role)，「頁

面」就像「角色」的容器。舉例來說，我們在 <jQM1.html> 的 <body> 區塊加

入第 12 ~ 24行的程式碼，分別使用四個 <div> 元素和 data-role屬性定義頁面、

頁首、內容和頁尾等角色，一個典型的頁面通常包含頁首、內容和頁尾，其中內

容是一定要存在的。至於這些角色如何區分，則取決於 data-role 屬性的值，下表

為一些常見的角色。

角色說明角色說明

page 頁面 listview 項目檢視

header 頁首 dialog 對話方塊

content 內容 fieldcontain 表單欄位容器

footer 頁尾 controlgroup 控制群組

navbar 導覽列 collapsible 可摺疊面板

button 視覺化按鈕 slider 撥動式切換開關

\ch10\jQM1.html (下頁續 1/2)

01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title>我的 jQuery Mobile程式</title>

06: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />


\ch10\jQM1.html (接上頁 2/2)

07: <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 08: <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 09: <meta name="viewport" content="width=device-width, initial-scale=1"> 10: </head> 11: <body> 12: <div data-role="page"> 13: <div data-role="header"> 14: <h1>航海王</h1> 15: </div> 16: <div data-role="content"> 17: <p>海賊王黃金．羅傑遺留下一個被稱為 ONEPIECE的神秘寶藏， 18: 而主角「魯夫」找了海盜剋星「索隆」、女賊「娜美」、 19: 可愛馴鹿「喬巴」等幾位夥伴要一起尋找傳說中的寶藏。</p> 20: </div> 21: <div data-role="footer"> 22: <h4>©快樂影視</h4> 23: </div> 24: </div> 25: </body>

26:</html>

目前這份文件包含一個頁面，左下圖是在智慧型手機上的瀏覽結果，而右下圖是

在 Opera Mobile Emulator上的模擬畫面。

頁首

頁尾

內容頁面

頁首

內容

頁尾

10-8 l PHP & MySQL

10-3 佈景主題

為了讓行動版網頁顯得更美觀，jQuery Mobile提供了 data-theme="a-z" 屬性用來指

定使用者介面元件的佈景主題 (theme)，這是一組關於文件版面配置、樣式與色

彩的定義，而且 jQuery Mobile內建如下的五種佈景主題。

佈景主題色彩

data-theme="a" 黑色

data-theme="b" 藍色

data-theme="c" 銀色

data-theme="d" 灰色

data-theme="e" 黃色

頁面預設採用佈景主題 c，但我們可以針對頁首、頁尾、按鈕、清單檢視、工具

列等使用者介面元件指定佈景主題，若某個元素沒有指定佈景主題，就會沿用其

父元素的佈景主題。下面是一個例子，頁首和頁尾分別指定套用佈景主題 b、e，

而內容沒有指定佈景主題，故會沿用其父元素 (頁面) 的佈景主題 c。

頁首指定套用佈景主題 b (藍色)

內容沿用其父元素 (頁面) 的佈景主題c (灰色)

頁尾指定套用佈景主題 e (黃色)


\ch10\jQM1b.html

<!doctype html> <html> <head> <meta charset="utf-8"> <title>我的 jQuery Mobile程式</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div data-role="page"> <div data-role="header" data-theme="b"> <h1>航海王</h1> </div> <div data-role="content"> <p>海賊王黃金．羅傑遺留下一個被稱為 ONEPIECE的神秘寶藏，而主角「魯夫」找了海盜剋星「索隆」、女賊「娜美」、可愛馴鹿「喬巴」等幾位夥伴要一起尋找傳說中的寶藏。</p> </div> <div data-role="footer" data-position="fixed" data-theme="e"> <h4>©快樂影視</h4> </div> </div> </body>

</html>

data-theme屬性的合法值為 "a-z"，也就是 "a"、"b"、"c"、...、"z"，除了 "a-e" 等

jQuery Mobile內建的佈景主題之外，您也可以連線到 jQuery Mobile官方網站提供

的 ThemeRoller (http://jquerymobile.com/themeroller/)，自訂專屬的佈景主題，進一

步的說明可以到 ThemeRoller網站查看。

頁首指定套用佈景主題 b (藍色)

內容沿用其父元素 (頁面) 的佈景主題 c (灰色)

頁尾指定套用佈景主題 e (黃色)

加上此屬性將頁尾固定顯示在頁面下方

行動商品型錄

15-1 設計行動版網站介面

15-2 完整程式碼列表

Chapter

15-2 l PHP & MySQL

15-1 設計行動版網站介面

在本章中，我們將使用 HTML 5、JavaScript、jQuery、jQuery Mobile、PHP、MySQL

等技術開發一個行動版商品型錄網站，這個網站的瀏覽結果如以下各圖。

圖(一) 圖(二) 圖(三)

圖(四) 圖(五) 圖(六)

行動商品型錄 l 15-3

首頁包含頁首、內容和頁尾，內容的部分有一張圖片和「快樂出版社簡介」

與「書籍介紹」二個按鈕，如圖(一)。

當點取「快樂出版社簡介」時，會以對話方塊的形式顯示出版社簡介，如

圖(二)，若要返回首頁，可以點取左上角的關閉按鈕。

當點取「書籍介紹」時，會以另一個內部頁面顯示書籍介紹，如圖(三)。

若要顯示上一本書籍，可以點取導覽列的「上一個」按鈕；若要顯示下一

本書籍，可以點取導覽列的「下一個」按鈕，如圖(四) ~ 圖(六)；若要返

回首頁，可以點取「回首頁」按鈕。

這個網站是由下列幾個檔案所組成。

檔案名稱說明

ACL037300.jpg

ACL039600.jpg

AEB002800.jpg

AEB003100.jpg

AEN003400.jpg

這些 JPEG圖檔是書籍產品的照片，如圖 (三) ~ 圖(六)。

mobile_store.jpg 這個 JPEG圖檔是首頁的標題圖片，如圖(一)。

index.htm 行動商品型錄的首頁。

get_book_info.php 這個程式負責讀取書籍介紹的內容。

mobile_store資料庫這個資料庫包含 product資料表。

我們使用了一個名稱為 mobile_store的資料庫，裡面包含一個 product資料表，以

儲存產品資料，其欄位結構如下。

欄位名稱資料型態長度主索引鍵說明

book_id INT - 流水號欄位

image_name VARCHAR 32 圖檔名稱欄位

description TEXT - 說明欄位

您可以自己建立資料庫或匯入本書為您準備的資料庫備份檔 (位於隨書光碟的

\samples\database\mobile_store.sql)。

15-4 l PHP & MySQL

15-2 完整程式碼列表

index.htm

<index.htm> 的頁面結構包含「首頁」、「快樂出版社簡介」、「書籍介紹」等三

個頁面，id分別為 "home"、"intro"、"book"。

\ch15\index.htm (下頁續 1/2)

01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title>行動商品型錄</title> 06: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" /> 07: <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 08: <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script> 09: <meta name="viewport" content="width=device-width, initial-scale=1"> 10: <script> 11: var book_id = 0; 12: 13: function get_book_info(mode) 14: { 15: $.get("get_book_info.php", {book_id: book_id, mode: mode}, function(data){ 16: book_id = data.book_id; 17: $("#bookimg").attr("src", data.image_name); 18: $("#bookmsg").html(data.description); 19: }, "json"); 20: } 21: </script> 22: </head> 23: <body onload="javascript:get_book_info('next')"> 24: <div data-role="page" id="home"> 25: <div data-role="header" data-position="fixed"> 26: <h1>行動商品型錄</h1> 27: </div>


\ch15\index.htm (接上頁 2/2)

28: <div data-role="content"> 29: <img src="mobile_store.jpg" width="100%"> 30: <a href="#intro" data-rel="dialog" data-role="button" data-icon="arrow-r">快樂出版社簡介</a> 31: <a href="#book" data-role="button" data-icon="arrow-r">書籍介紹</a> 32: </div> 33: <div data-role="footer" data-position="fixed"><h4>©快樂出版社</h4></div> 34: </div> 35: <div data-role="page" id="intro"> 36: <div data-role="header"><h1>快樂出版社簡介</h1></div> 37: <div data-role="content"> 38: <p>快樂出版社專門發行各類電腦書籍，包括 Office、程式設計、 39: 繪圖...等系列圖書，若您有任何問題，請來電與我們聯絡。</p> 40: </div> 41: </div> 42: <div data-role="page" id="book"> 43: <div data-role="header"><h1>書籍介紹</h1></div> 44: <div data-role="content"> 45: <img id="bookimg" width="100%"> 46: <p id="bookmsg" /> 47: </div> 48: <div data-role="footer" data-position="fixed"> 49: <div data-role="navbar"> 50: <ul> 51: <li><a href="#home" class="ui-btn-active ui-state-persist">回首頁</a></li> 52: <li><a href="javascript:get_book_info('prev')">上一個</a></li> 53: <li><a href="javascript:get_book_info('next')">下一個</a></li> 54: </ul> 55: </div> 56: </div> 57: </div> 58: </body> 59:</html>

15-6 l PHP & MySQL

06：使用 CDN參考 jQuery Mobile核心 CSS檔案。

07：使用 CDN參考 jQuery核心 JavaScript檔案。

08：使用 CDN參考 jQuery Mobile核心 JavaScript檔案。

10 ~ 21：這段 JavaScript是本範例的精華所在，第 11行宣告變數 book_id的

初始值為 0，代表書籍介紹目前的書籍流水號為 0；第 13 ~ 20 行的

get_book_info() 函式用來取得前一本或後一本書的介紹資訊，由 mode 來

決定；第 15 ~ 19行為 jQuery Ajax的寫法，其功能是以非同步的方式呼叫伺

服器端的 get_book_info.php，並使用 POST的方式傳遞 book_id與 mode參

數給 get_book_info.php，當後端程式 get_book_info.php 執行成功時，會以

json格式傳回執行結果，傳回的 json物件會包含 image_name與 description

屬性，第 17 ~ 18行用來將書籍圖片與介紹設定為 json物件之 image_name

與 description屬性，這樣就能達成在使用者點按圖(三) ~ 圖(六) 的「上一

個」與「下一個」超連結時，變換書籍資訊的目的。

23：在 body的 onload事件中呼叫 JavaScript的 get_book_info() 函式，並傳

入參數 next，由於 book_id初始值為 0，因此，此行的效果就等於要取得第

0本書的下一本書資訊。

24 ~ 34：這是「首頁」頁面，第 30行指定以對話方塊的形式顯示 "intro" 頁

面的快樂出版社簡介，第 31 行指定以另一個內部頁面顯示 "book" 頁面的

書籍介紹。

35 ~ 41：這是「快樂出版社簡介」頁面。

42 ~ 57：這是「書籍介紹」頁面，第 45 ~ 46分別放置一個空的 img標籤與

p標籤，其 id為 bookimg與 bookmsg，以供 get_book_info() 函式存取，用

來放置書籍圖片與介紹；第 48 ~ 56行在頁尾放入一個導覽列，裡面有「回

首頁」、「上一個」、「下一個」三個項目，「上一個」項目指定點取超

連結時就呼叫 get_book_info() 函式，參數值為 prev，表示要取得上一本書

的資訊，同樣的，「下一個」項目指定點取超連結時就呼叫 get_book_info()

函式，參數值為 next，表示要取得下一本書的資訊。


get_book_info.php

這個程式負責讀取書籍介紹的內容。

\ch15\get_book_info.php (下頁續 1/2)

01:<?php 02: require_once("dbtools.inc.php"); 03: 04: $book_id = $_GET["book_id"]; 05: $mode = $_GET["mode"]; 06: $link = create_connection(); 07: 08: if ($mode == "prev") 09: { 10: $sql = "select * from product where book_id < $book_id order by book_id desc limit 1"; 11: $result = execute_sql($link, "mobile_store", $sql); 12: $total_records = mysqli_num_rows($result); 13: 14: if ($total_records == 1) 15: { 16: $row = mysqli_fetch_assoc($result); 17: 18: echo json_encode(array("book_id" => $row["book_id"], "image_name" =>

$row["image_name"], "description" => $row["description"])); 19: } 20: else 21: { 22: $sql = "select * from product where book_id = (select max(book_id) from product)"; 23: $result = execute_sql($link, "mobile_store", $sql); 24: $row = mysqli_fetch_assoc($result); 25: 26: echo json_encode(array("book_id" => $row["book_id"], "image_name" =>

$row["image_name"], "description" => $row["description"])); 27: } 28: } 29: else if ($mode == "next") 30: {

15-8 l PHP & MySQL

\ch15\get_book_info.php (接上頁 2/2)

31: $sql = "select * from product where book_id > $book_id order by book_id limit 1"; 32: $result = execute_sql($link, "mobile_store", $sql); 33: $total_records = mysqli_num_rows($result); 34: 35: if ($total_records == 1) 36: { 37: $row = mysqli_fetch_assoc($result); 38: 39: echo json_encode(array("book_id" => $row["book_id"], "image_name" =>

$row["image_name"], "description" => $row["description"])); 40: } 41: else 42: { 43: $sql = "select * from product where book_id = (select min(book_id) from product)"; 44: $result = execute_sql($link, "mobile_store", $sql); 45: $row = mysqli_fetch_assoc($result); 46: 47: echo json_encode(array("book_id" => $row["book_id"], "image_name" =>

$row["image_name"], "description" => $row["description"])); 48: } 49: } 50: 51: mysqli_free_result($result); 52: mysqli_close($link); 53:?>

08 ~ 28：用來取得上一本書籍介紹，若已經是位於第 1本書籍，則取得最

後一本書籍。

29 ~ 49：用來取得下一本書籍介紹，若已經是位於最後一本書籍，則取得

第一本書籍。

18、26、39、47：使用 json_encode() 函式，將取得的書籍資訊轉為 json格

式，取得的三個欄位分別成為 json物件的三個屬性，並使用 echo直接把 json

輸出至瀏覽器端，這樣瀏覽器端的 get_book_info() 函式執行成功時，即可

讀取回傳的書籍資訊。

Chapterepaper.gotop.com.tw/PDFSample/AEL016500.pdf · 網頁主要是使用HTML...

Documents

Transcript of Chapterepaper.gotop.com.tw/PDFSample/AEL016500.pdf · 網頁主要是使用HTML...