jQuery Mobile Web Page
Download
Report
Transcript jQuery Mobile Web Page
第5章 建立jQuery Mobile網頁應用程式
5-1 jQuery Mobile的基礎
5-2 行動網路瀏覽器與Mobile網頁
5-3 建立jQuery Mobile開發環境
5-4 第一個jQuery Mobile程式
5-5 jQuery Mobile頁面的基本結構
5-1 jQuery Mobile的基礎
5-1-1 jQuery Mobile簡介
5-1-2 jQuery Mobile的檔案與支援平台
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網頁應用程式的使用介面。
5-1-1 jQuery Mobile簡介-使用介面系統
一般來說，Mobile網頁應用程式最重要的部分就是使用介
面，jQuery Mobile是一套用來建立Mobile網頁應用程式的
使用介面框架（Framework），因為它是使用宣告方式建
立使用介面，換句話說，我們不用撰寫任何JavaScript程式
碼，只需單純使用HTML標籤就可以建立一致佈景外觀的
使用介面。
在實務上，雖然我們可以使用HTML、JavaScript和CSS自行
建立Mobile網頁應用程式的使用介面，但是，如此作會產
生一些問題，而使用jQuery Moblie仍然是一種最佳的選擇
，如下所示：
• 跨瀏覽器相容。
• 撰寫大量的程式或標籤碼。
• 一致外觀的專業佈景。
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）來建立一致的使用介面外觀，可
以讓我們很容易建立客製化的使用介面外觀。
5-1-2 jQuery Mobile的檔案與支援平台所需檔案
jQuery Mobile的HTML5網頁文件需要內嵌
JavaScript函數庫和CSS外部樣式，其檔案內容如下
所示：
• jQuery函數庫的JavaScript程式檔。
• jQuery Mobile核心JavaScript程式檔。
• jQuery Mobile核心CSS外部樣式檔。
• jQuery Mobile佈景的外部樣式檔（選項）。
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版
5-2 行動網路瀏覽器與Mobile網頁
5-2-1 行動網路瀏覽器的基礎
5-2-2 使用HTML建立Mobile網頁
5-2-1 行動網路瀏覽器的基礎
行動裝置的行動網路瀏覽器和桌上型瀏覽器之間的最大差
異在螢幕比較小，而且各家行動網路瀏覽器都各自提供專
屬特點，所以，在建立Mobile Web應用程式或Mobile Web
網站時，我們需要避開這些專屬功能，只使用各家行動網
路瀏覽器都支援的功能與技術，以達到最大的相容性。
我們可以不用觸及各行動裝置作業系統的原生API，就可
以使用HTML、CSS和JavaScript建立跨平台的Mobile Web應
用程式，一個在行動網路瀏覽器執行的Web應用程式。
目前巿面上行動裝置的Mobile平台主要是Apple的iPhone
iOS和Google的Andorid兩大平台，其內建行動網路瀏覽器
都是使用WebKit瀏覽器引擎，支援最新HTML5、CSS3和
JavaScript。
5-2-2 使用HTML建立Mobile網頁建立Mobile網頁(PC版)
首先讓我們來看一頁沒有提供額外資訊的網頁，簡單的說
，它就是PC版的HTML網頁，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Ch5_2_2.htm</title>
</head>
<body>
<h1>我的Mobile網頁</h1>
<p>基本上，使用HTML建立Mobile網頁
和桌上型Web網頁並沒有什麼不同，
…</p>
</body>
</html>
網頁的文字非常小，好像小抄
5-2-2 使用HTML建立Mobile網頁Meta標籤viewport(說明)
Meta標籤viewport可以正確告訴行動瀏覽器所看
到的網頁尺寸，如果沒有此Meta標籤viewport，
行動瀏覽器會認為它是在瀏覽一頁桌上型電腦看
到的網頁，如下所示：
<meta name="viewport" content="width=devicewidth, initial-scale=1">
<meta>標籤的name屬性值是viewport，可以告訴
使用WebKit瀏覽器引擎的行動瀏覽器，和需要顯
示的頁面尺寸為何？
5-2-2 使用HTML建立Mobile網頁Meta標籤viewport(Mobile版1)
在<head>區塊加上Meta標籤viewport，如下所示：
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Ch5_2_2m.htm</title>
</head>
content屬性的參數指定使用行動裝置的螢幕寬度，1個
viewport顯示螢幕的像素等於1個螢幕像素。
為了隱藏行動瀏覽器上方的URL網址欄，所以在<body>標
籤需要加上onload事件處理，如下所示：
<body onload="window.scrollTo(0,1);">
5-2-2 使用HTML建立Mobile網頁Meta標籤viewport(Mobile版2)
顯示正確大小
的文字內容
（在網頁下方
可以顯示縮放
鈕來縮放網頁
內容），和隱
藏URL網址欄
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
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
應用程式。
5-3-1 Opera Mobile Emulator-下載
Opera Mobile Emulator可以在Opera官方網站免費
下載，其下載網址為：
http://www.opera.com/developer/tools/mobile/，
如下圖所示：
5-3-1 Opera Mobile Emulator-安裝
在下載Opera Mobile Emulator後，就可以在
Windows電腦安裝Opera Mobile Emulator，如下圖
所示：
5-3-1 Opera Mobile Emulator-啟動
按桌面的【Opera Mobile Emulator】捷徑，就可以
啟動Opera Mobile Emulator，看到「Opera Mobile
Emulator」交談窗。
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伺服端網頁技術。
5-3-2 Server2Go的Web伺服器-安裝
Server2Go不需要安裝，所以沒有安裝程式，安裝
步驟只需將資料夾下所有檔案複製到硬碟即可，
例如：「D:\PhoneGap\Server2Go」資料夾，如下
圖所示：
5-3-2 Server2Go的Web伺服器-啟動1
請按二下【Server2Go.exe】執行Server2Go，如果看到「使
用者帳戶控制」交談窗，請按【是】鈕，就可以看到版權
頁，稍等一下，就會啟動Windows 7內建Internet Explorer
瀏覽器顯示首頁index.php的執行結果，預設網址是
http://127.0.0.1:4001/。
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程式，如右圖所
示：
5-3-2 Server2Go的Web伺服器-結束
結束Server2Go非常的簡單，只需關閉前述執行首
頁index.php的Internet Explorer瀏覽器視窗，可以
看到結束Server2Go的進度，稍等一下，就會自動
結束Server2Go。
5-3-3 下載jQuery Mobile-下載
jQuery Mobile可以在官方網站免費下載，在本章
使用的是1.1.0版，其下載網址如下所示：
• jQuery Mobile：http://jquerymobile.com/download/
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程式檔案。
5-3-4 在JavaScript程式使用jQuery Mobile使用下載的jQuery Mobile程式碼檔案
在將jQuery Mobile相關檔案和目錄置於HTML網頁
的同一個資料夾後，就可以在HTML網頁<head>標
籤的<script>子標籤含括外部JavaScript程式碼檔案
的jQuery函數庫和jQuery Mobile，如下所示：
<link rel="stylesheet" href="jquery.mobile.min.css">
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<script>
……
</script>
5-3-4 在JavaScript程式使用jQuery Mobile使用CDN
CDN是將資料存放在網路系統的多個電腦節點，以加速資
料存取，以Internet來說，資料是儲存在全球多個不同位
置的伺服器，當存取資料時，就會從最近的伺服器來取得
資料，以便加速資料存取。
我們並不用下載jQuery和jQuery Mobile程式碼檔案，可以
直接使用儲存在CDN的程式碼檔案，如下所示：
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile1.1.0.min.css" />
<script src="http://code.jquery.com/jquery1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile1.1.0.min.js"></script>
5-4 第一個jQuery Mobile程式-步驟一
步驟一：HTML5的DOCTYPE
jQuery Mobile程式是一個HTML5網頁，所以在第1
行需要加上HTML5的DOCTYPE，如下所示：
<!DOCTYPE html>
5-4 第一個jQuery Mobile程式-步驟二
步驟二：<meta>標籤指定編碼和縮放比例
在HTML的<head>區塊需要加上<meta>標籤指定編
碼和行動裝置的尺寸與縮放比例，如下所示：
<meta charset="utf-8">
<meta name="viewport" content="width=devicewidth, initial-scale=1">
第1個<meta>標籤指定編碼為utf-8，以便可以正確
顯示中文內容，第2個<meta>標籤指定瀏覽器的寬
度和縮放比例。
5-4 第一個jQuery Mobile程式-步驟三
步驟三：含括jQuery和jQuery Mobile程式碼檔案和樣
式表
在將相關.js和.css檔案都複製至Ch5_4.htm的同一
個資料夾後，我們就可以在<head>區塊使用<link>
和<script>標籤含括jQuery和jQuery Mobile程式碼
檔案和樣式表，如下所示：
<link rel="stylesheet" href="jquery.mobile.min.css">
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile.min.js"></script>
5-4 第一個jQuery Mobile程式-步驟四
步驟四：建立頁面
jQuery Mobile是使用標記驅動（Markup-driven）來設定與配置頁面，
我們是使用HTML5的data-role屬性定義div元素是什麼，如下所示：
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<p>jQuery Mobile是基於jQuery建立的框架，
支援iOS、Android、BlackBerry、bada、
Windows Phone、webOS、Symbian和
MeeGo的Ｍobile網頁應用程式開發。</p>
</div>
<div data-role="footer">
<h1>製作者: 陳會安</h1>
</div>
</div>
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顯示行動網頁
的內容，如右圖所示：
5-5 jQuery Mobile頁面的基本結構
5-5-1 jQuery Mobile框架架構
5-5-2 角色
5-5-3 單一頁面結構
5-5-1 jQuery Mobile框架架構
jQuery Mobile框架是使用簡單和
功能強大的方式來定義網頁內容
，即頁面（Pages），並且提供
Ajax技術的巡覽系統，可以建立
動畫效果的頁面轉換，事實上，
框架架構的基本單位就是頁面，
jQuery Mobile是使用卡片觀念來
建立頁面結構，如同一盒卡片，
盒子是HTML網頁文件，每一張卡
片就是一個扮演page角色的<div>
標籤，如右圖所示：
5-5-2 角色-HTML5的data-*屬性
jQuery Mobile是使用標準的HTML網頁文件，它是使用屬性
來指定<div>標籤扮演的角色（Roles），使用的是HTML5
的data-*屬性，例如：<div data-role="page">使用data-role
屬性值page指定此標籤扮演頁面角色。
HTML5允許使用者自訂元素屬性，在HTML元素中，任何
以小寫「data-」字首開頭的屬性都視為合法屬性，這些屬
性並不會影響HTML元素的顯示和文件驗證，它只是附加
一些額外資料，如下所示：
<div id="number" data-step="2">
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
</div>
div元素新增名為data-step的自訂屬性。
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瀏覽器隱藏元素
5-5-3 單一頁面結構-說明
jQuery Mobile的HTML5網頁是以頁面（Pages）為單位來建
構使用介面，我們可以在同一個jQuery Mobile程式檔案建
立一個頁面，或多頁面。
對於Android、iOS和WebOS等行動作業系統平台來說，
jQuery Mobile在顯示頁面時會試圖捲動頁面來隱藏上方
URL位址欄位，其目的是為了建立更像原生應用程式的使
用介面。
因為jQuery Mobile是使用標記驅動（Markup-driven）來設
定與配置頁面，我們是使用HTML5的data-role屬性定義div
元素是什麼，例如：頁面屬性值是page，單一頁面的<div>
標籤包含3個子<div>標籤的區段，其屬性值分別為header
、content和footer。
5-5-3 單一頁面結構-區段
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<p>jQuery Mobile是基於jQuery建立的框架，
支援iOS、Android、BlackBerry、bada、
Windows Phone、webOS、Symbian和
MeeGo的Mobile網頁應用程式開發。</p>
</div>
<div data-role="footer">
<h1>製作者: 陳會安</h1>
</div>
</div>
5-5-3 單一頁面結構-區段說明
各<div>標籤區段的說明，如下表所示：
<div>標籤的區段
說明
<div data-role="header">
頁面的標題列，我們可以在此元素建立巡
覽列
<div data-role="content">
頁面實際的內容
<div data-role="footer">
頁面的註腳列，我們也可以在此元素建立
巡覽列，如果加上data-position="fixed"屬
性，可以讓註腳列永遠顯示在底部