小狐狸事務所: jQuery Mobile 學習筆記 (一) : 環境配置與頁面結構

2020年9月22日星期二

jQuery Mobile 學習筆記 (一) : 環境配置與頁面結構

第一次學習 jQuery Mobile 是在 2013 年時, 但當時卻只開了個頭就忙別的學習科目去了. 最近因為阿正學弟的詢問, Web App 又重新進入眼簾, 但睽違了七年之後行動網頁前端技術面貌已大大改變, React/Angular/Vue 引領風騷, jQuery/jQuery Mobile 似乎已黯然失色. 雖曾求新學過一些 Vue, 但是時間有限, 我又不是做大專案, 用 jQuery 能做到的功能為何還要花時間去學新的前端技術? 所以還是回來重溫 jQuery/jQuery Mobile 較實在.

首先須釐清的是, jQuery Mobile 只是行動網頁的 UI (使用者介面) 框架, 負責生成與原生 App 類似之行動網頁介面. 如果要存取手機的照相, 訊息, 簡訊等功能則需依靠 Cordova (舊名 PhoneGap), 將 jQuery Mobile 所設計的 Web App 轉成手機原生 App. 其次, jQuery Mobile 依賴 jQuery 才能運作.

以下測試參考了這幾本書 (都很舊了 2014~2017 年的) :

jQuery Mobile 智慧型手機程式開發 (博碩, 岡本隆史)
HTML5+CSS3+jQuery Mobile 輕鬆打造 App 與行動網站 (博碩, 陳婉凌)
PhoneGap 跨平台手機程式開發實戰 (上奇, 張亞飛)
徹底研究 jQuery Mobile + PHP 手機程式及網站開發 (上奇, 張亞飛)
jQuery Mobile 跨平台開發寶典 (上奇, 陶國榮)
PHP+MySQL+jQuery Mobile 跨行動裝置網站開發 (碁峰, 陳會安)
Visual Studio 2015 X Cordova跨平台App實戰特訓班 (碁峰, 文淵閣工作室)
Javascript + jQuery Mobile + Node.js 跨平台網頁設計範例教本 (碁峰, 陳會安)
錢沾計畫啟動：jQuery Mobile 跨平台賺錢 App 錢途無量 (佳魁, 李科泉)

其中第一本岡本隆史寫的很好, 適合初學者自學.

jQuery Mobile 教學文件參考 :

# https://demos.jquerymobile.com/1.4.5/
# https://www.tutorialspoint.com/jquery_mobile/index.htm
# CHAPTER 12 - jQuery Mobile 教學 ( 基礎 )

jQuery Mobile 制定的 data-xxx 屬性說明參考 :

# https://api.jquerymobile.com/data-attribute/
# jQuery Mobile Data 属性

之前的 jQuery Mobile 筆記參考 (2013 年) :

# jQuery Mobile 測試 (一) : 環境佈置與頁面控制

以下測試程式放在 GitHub 上, 可用手機瀏覽器測試.

1. 環境配置 :

jQuery Mobile 最新版本為 v1.4.5, 而 jQuery 最新版為 v3.5.1, 但根據官網資料, jQuery Mobile v1.4.5 支援 jQuery v1.8~v1.11 與 v2.1 :

下載頁建議使用 jQuery v1.11.1 :

# https://jquerymobile.com/download/

解壓縮後將 jQuery, jQuery Mobile 之 js 程式碼與 css 樣式檔分別複製到專案資料夾的 js 與 css 子目錄下 :

jquery-1.11.1.min.js (94KB)
jquery.mobile-1.4.5.min.js (196KB)
jquery.mobile-1.4.5.min.css (203KB)

另外 images 資料夾也要複製到專案資料夾下.

本地端供檔的網頁範本如下 :

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<script>
$(function(){
});
</script>
</body>
</html>

利用 CDN 供檔即無需準備執行環境, CDN 的網頁模板如下 :

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<script>
$(function(){
});
</script>
</body>
</html>

注意, 如果是 HTTPS 網站, 則 CDN 的 URL 也要改成 https 開頭.

2. 網頁架構:

jQuery Mobile 的 Web App 網頁是以兩層 div 元素搭配 data-role 屬性建立行動網頁之頁面結構, 行動網頁內容可分散在不同 HTML 檔, 也可以整合在一個 HTML 檔案內, 透過超連結 a 元素之 href 屬性切換不同之瀏覽頁面, 幾乎不用寫一行程式碼即可建立漂亮的行動網頁使用者介面.

jQuery Mobile 依據 HTML5 制定了 data-role 屬性, 其值如下表所示 :

data-role 屬性	說明
page	建立一個瀏覽頁面 (page view)
header	建立瀏覽頁面的標題列
content	建立瀏覽頁面的內容列
footer	建立瀏覽頁面的註解
dialog	建立一個對話框
navbar	建立一個導覽工具列
button	建立一個按鈕
controlgroup	建立一個控制群組
listview	建立列表 (list view)
slider	建立一個滑桿
fieldcontain	建立一個表單欄位容器
collapsible	建立一個可折疊容器
collapsible-set	建立一個折疊選單

關於 jQueryMobile 的 data-xxx 屬性參考 :

# https://api.jquerymobile.com/data-attribute/

基本的頁面結構分成 header (頁首或標題), content (內容), 以及 footer (頁尾或註腳) 三個部分 :

</div>

</div>

</div>

目前手機瀏覽器都已支援 HTML5, 故可將上面的 div 改成 HTML5 如下的語意標籤 :

</header>

</article>

</footer>

</section>

其中 content 是必要的部分, header 與 footer 則是可有可無. header 用來放置頁面標題, 通常用 h1~h6 元素來包覆標題文字, 如果文字太長, 則後面無法顯示的部分會以 "..." 縮略. content 用來呈現文字, 圖片, 視訊等主體資訊, footer 部分通常用來放置作者, 公司, 或版權資訊.

(1). 多檔案架構 :

如果網頁內容太多, 可分割放在多個 HTML 檔案頁中, 以 a 元素的 href 屬性切換 :

<a href="page2.htm" data-ajax="false">第二頁</a>

注意, 因為 jQuery Mobile 預設是以 Ajax 方式載入網頁, 而 Ajax 不支援載入本地檔案, 因此這裡超連結必須加入 data-ajax 屬性並將其設為 false (預設為 true), 否則會出現 "error loading page" 錯誤訊息, 參考 :

# 使用 JQueryMobile 點選超連結提示“error loading page” 錯誤

超連結 a 元素在 jQuery Mobile 中扮演了關鍵的頁面切換角色, jQuery Mobile 為其定義了一些 data- 開頭之屬性, 如下表所示 :

a 的 data-xxx 屬性	說明
data-ajax	是否要以 Ajax 方式載入網頁, 值="true" (預設), "false"
data-rel	超連結的行為, 值="back" (上一頁), "dialog" (對話框), "external" (外部) 等
data-icon	超連結按鈕上的小圖示, 值="home" (首頁), "back" (上一頁) 等
data-transition	頁面轉換特效, 值="fade" (預設), "pop", "slide", "flip" 等六種

例如下面測試 1 有三個網頁檔 :

測試 1 : 多檔案換頁 [看原始碼 1_1, 看原始碼 1_2, 看原始碼 1_3]

第一頁 : jqueryuimobile_test_1_1.htm

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<section data-role="page">
<header data-role="header">
<h1>第一頁</h1>
</header>
<article data-role="content">
<a href="jqueryuimobile_test_1_2.htm" data-ajax="false">第二頁</a><br>
<a href="jqueryuimobile_test_1_3.htm" data-ajax="false">第三頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
$(function(){
});
</script>
</body>
</html>

第二頁 : jqueryuimobile_test_1_2.htm

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<section data-role="page">
<header data-role="header">
<h1>第二頁</h1>
</header>
<article data-role="content">
<a href="jqueryuimobile_test_1_1.htm" data-ajax="false">第一頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
$(function(){
});
</script>
</body>
</html>

第三頁 : jqueryuimobile_test_1_3.htm

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<section data-role="page">
<header data-role="header">
<h1>第三頁</h1>
</header>
<article data-role="content">
<a href="jqueryuimobile_test_1_1.htm" data-ajax="false">第一頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
$(function(){
});
</script>
</body>
</html>

瀏覽首頁 jqueryuimobile_test_1_1.htm 按內容區的 "第二頁", "第三頁" 超連結會分別載入 jqueryuimobile_test_1_2.htm 與 jqueryuimobile_test_1_3.htm, 結果如下 :

此範例網址可用 Quick Mark 線上轉換為 QR code, 方便用手機直接掃描測試 :

# http://www.quickmark.com.tw/cht/qrcode-datamatrix-generator/default.asp?qrLink

注意, 這種多檔方式有三個限制 :

不可連結至其它網域之檔案
連結之檔案只能有單一頁面
a 元素不可以有 target 屬性

也可將多頁內容整合於單一檔案中方便管理, 每一個頁面的 div 都需指定 id 屬性值, jQuery Mobile 就是以頁面的 id 屬性作為錨點, 利用 a 元素的 href 切換不同之錨點 id 達到頁面切換之效果.

例如在第一頁的超連結中設定 href 指向第二頁頁面的 (id=page2) :

<a href="#page2">第二頁</a><br>

則按此超連結就會切換到第二頁 :

<section data-role="page" id="page2">

例如上面的三檔案範例可以整合於下面範例的單一檔案中 :

測試 2 : 單檔案換頁 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>

<section data-role="page" id="page1">
<header data-role="header">
<h1>第一頁</h1>
</header>
<article data-role="content">
<a href="#page2">第二頁</a><br>
<a href="#page3">第三頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>

<section data-role="page" id="page2">
<header data-role="header">
<h1>第二頁</h1>
</header>
<article data-role="content">
<a href="#page1">第一頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>

<section data-role="page" id="page3">
<header data-role="header">
<h1>第三頁</h1>
</header>
<article data-role="content">
<a href="#page1">第一頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
$(function(){
});
</script>
</body>
</html>

此例中三個頁面的 div 都必須指定 id 屬性, 以便 a 元素利用此 id 屬性值當作錨點以 href 屬性進行換頁, 結果與上面測試一完全相同. 此範例測試網址 QR code 如下 :

3. 回上一頁按鈕 :

在上面的範例中, 用超連結來操作回上一頁不甚方便, 若超連結文字太短可能不好按. 其實 jQuery Mobile 提供了兩個 data-xxx 屬性, 可用來在標題列左上角添加 Back 按鈕 :

data-add-back-btn : 設定是否要添加回上一頁按鈕, 值="true", "false" (預設)
data-back-btn-text : 設定回上一頁按鈕上的文字, 值預設為 "Back"

不過要注意的是, 在 jQuery Mobile 1.4 以前, 此屬性是加在頁面 div 元素中, 而在 1.4 版後則必須要放在 header 中才會有效, 而且放在首頁無效, 只有在非首頁頁面才會出現, 參考 :

# https://forum.jquery.com/topic/back-button-not-appearing

其次, 這兩個屬性只能放在 header 標題列, 放在 footer 註腳列無效.

例如 :

測試 3 : 標題列 header 上的 Back 按鈕 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>

<section data-role="page" id="page1">
<header data-role="header">
<h1>第一頁</h1>
</header>
<article data-role="content">
<a href="#page2">第二頁</a><br>
<a href="#page3">第三頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>

<section data-role="page" id="page2">
<header data-role="header" data-add-back-btn="true">
<h1>第二頁</h1>
</header>
<article data-role="content">
<a href="#page1">第一頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>

<section data-role="page" id="page3">
<header data-role="header" data-add-back-btn="true">
<h1>第三頁</h1>
</header>
<article data-role="content">
<a href="#page1">第一頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
$(function(){
});
</script>
</body>
</html>

此例中在第二頁與第三頁的 header 部分加入 data-add-back-btn="true" 後, 結果這兩個頁面標題列左邊就會出現一個 "Back" 按鈕, 結果如下 :

可見第二頁與第三頁標題列左邊都出現一個 Back 按鈕, 可回到上一頁. 此例之 QR code 如下 :

可見標題列的回上一頁按鈕預設顯示 "Back", 但可以用 data-back-btn-text 屬性設定, 例如 :

測試 4 : 自訂標題列 header 上的 Back 按鈕文字 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>

<section data-role="page" id="page1">
<header data-role="header">
<h1>第一頁</h1>
</header>
<article data-role="content">
<a href="#page2">第二頁</a><br>
<a href="#page3">第三頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>

<section data-role="page" id="page2">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>第二頁</h1>
</header>
<article data-role="content">
<a href="#page1">第一頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>

<section data-role="page" id="page3">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>第三頁</h1>
</header>
<article data-role="content">
<a href="#page1">第一頁</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
$(function(){
});
</script>
</body>
</html>

結果如下 :

可見標題列按鈕已經從預設的 "Back" 改成 "返回" 了. 此例網址 QR code 如下 :

4. 固定標題列與註腳列 :

由上面範例可知, 頁尾標題列預設是緊隨在內容區後面, 當內容很長必須用卷軸捲動時, 標題列與註腳列可能會從頁面中消失, 如果頁首與頁尾上有放置導覽按鈕 (例如上面範例中的返回按鈕), 操作起來就不太方便, 這可用 data-position="fixed" 屬性設定解決, 只要為標題列與註腳列天加此屬性, 就可將標題列固定在最上方, 註腳列固定在最下方, 例如 :

測試 5 : 固定標題列與註腳列 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>

<section data-role="page" id="page1">
<header data-role="header" data-position="fixed">
<h1>第一頁</h1>
</header>
<article data-role="content">
<a href="#page2">第二頁</a><br>
<a href="#page3">第三頁</a>
</article>
<footer data-role="footer" data-position="fixed">
<h3>頁尾</h3>
</footer>
</section>

<section data-role="page" id="page2">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回" data-position="fixed">
<h1>第二頁</h1>
</header>
<article data-role="content">
<a href="#page1">第一頁</a>
</article>
<footer data-role="footer" data-position="fixed">
<h3>頁尾</h3>
</footer>
</section>

<section data-role="page" id="page3">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回" data-position="fixed">
<h1>第三頁</h1>
</header>
<article data-role="content">
<a href="#page1">第一頁</a>
</article>
<footer data-role="footer" data-position="fixed">
<h3>頁尾</h3>
</footer>
</section>
<script>
$(function(){
});
</script>
</body>
</html>

此例每個頁面的標題列與註腳列都加上 data-position="fixed" 屬性, 結果如下 :

此例網址 QR code 如下 :

5. 預設 Ajax 換頁 :

jQuery Mobile 網頁在載入時是同時載入全部頁面, 但只顯示第一頁, 其他頁面是放在頁面池中暫存, 按超連結按鈕進行換頁時預設是使用 Ajax 模式從頁面池中取得目標頁面, 原頁面則放入頁面池中暫存, 此種作法可增進頁面載入速度, 這對靜態頁面沒有問題, 但對動態須更新資料的頁面就會產生資料不即時問題, 這時可用 data-ajax="false" 關閉預設之 Ajax 功能來解決, 例如 :

測試 6 : 消超連結的 Ajax 載入功能 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</header>

</article>

</footer>

</section>