首先須釐清的是, 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 筆記參考 (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)
本地端供檔的網頁範本如下 :
<!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 data-role="page">
<div data-role="header">
<h1>頁首</h1>
</div>
<div data-role="content">
<p>內容</p>
</div>
<div data-role="footer">
<h3>頁尾</h3>
</div>
</div>
目前手機瀏覽器都已支援 HTML5, 故可將上面的 div 改成 HTML5 如下的語意標籤 :
<section data-role="page">
<header data-role="header">
<h1>頁首</h1>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</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- 開頭之屬性, 如下表所示 :
(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" 等六種 |
<!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
注意, 這種多檔方式有三個限制 :
例如在第一頁的超連結中設定 href 指向第二頁頁面的 (id=page2) :
<a href="#page2">第二頁</a><br>
則按此超連結就會切換到第二頁 :
<section data-role="page" id="page2">
例如上面的三檔案範例可以整合於下面範例的單一檔案中 :
<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>
<!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 屬性
例如在第一頁的超連結中設定 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 如下 :
參考 :
<!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 如下 :
參考 :
