# jQuery Mobile 學習筆記 (三) : 工具列
jQuery Mobile 可以使用 data-role="popup" 與 datat-role="dialog" 兩種方式製作對話框, 兩者之差別是在網頁結構上, popup 是位於同一頁面內的 div 區塊, 亦即是隨同該頁面載入; 而 dialog 則是獨立的頁面, 載入時原頁面會被丟入頁面堆疊中.
一. 使用 popup 彈出式訊息窗 :
彈出式訊息窗 (popup) 需用一個具有 data-rel="popup" 屬性之按鈕開啟 :
<a href="#popup-1" data-role="button" data-rel="popup">開啟</a>
彈出式訊息窗 (popup) 網頁結構為放在 page 頁面內一個具有 data-role="popup" 之 div 元素 :
<div data-role="popup" id="popup-1" class="ui-content">
<p>訊息內容</p>
</div>
可以在訊息內容前添加一個無文字 delete 按鈕, 例如 :
<div data-role="popup" id="popup-1" class="ui-content">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<p>訊息內容</p>
</div>
也可以加上標題 (具有 data-role="header" 屬性之 div 元素), 例如 :
<div data-role="popup" id="popup-1" class="ui-content">
<div data-role="header">標題</div
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<p>訊息內容</p>
</div>
參考 :
# https://demos.jquerymobile.com/1.4.5/popup/
例如下面範例演示了有/無標題與有/無關閉圖示按鈕之 popup 訊息窗做法 :
測試 1 : 使用 popup 訊息對話框 (1) [看原始碼]
<!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>彈出式視窗(popup)測試</h1>
</header>
<article data-role="content">
<a href="#no_close" data-role="button" data-rel="popup">1.無關閉鈕</a>
<a href="#right_close" data-role="button" data-rel="popup">2.右方關閉</a>
<a href="#left_close" data-role="button" data-rel="popup">3.左方關閉</a>
<a href="#right_close_only" data-role="button" data-rel="popup">4.右方關閉(only)</a>
<a href="#left_close_only" data-role="button" data-rel="popup">5.左方關閉(only)</a>
<a href="#right_close_header" data-role="button" data-rel="popup">6.右方關閉(有標題)</a>
<a href="#left_close_header" data-role="button" data-rel="popup">7.左方關閉(有標題)</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
<!-- 無關閉鈕 -->
<div data-role="popup" id="no_close" class="ui-content">
<p>點頁面其他地方關閉視窗</p>
</div>
<!-- 右方關閉鈕 -->
<div data-role="popup" id="right_close" style="max-width: 200px;">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<p>點右方叉叉或頁面其他地方關閉視窗</p>
</div>
<!-- 左方關閉鈕 -->
<div data-role="popup" id="left_close" style="max-width: 200px;">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-left"></a>
<p>點右方叉叉或頁面其他地方關閉視窗</p>
</div>
<!-- 右方關閉鈕(only) -->
<div data-role="popup" id="right_close_only" style="max-width: 200px;" data-dismissible="false">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<p>只能點右方叉叉關閉視窗</p>
</div>
<!-- 左方關閉鈕(only) -->
<div data-role="popup" id="left_close_only" style="max-width: 200px;" data-dismissible="false">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-left"></a>
<p>只能點右方叉叉關閉視窗</p>
</div>
<!-- 左方關閉鈕(有標題) -->
<div data-role="popup" id="left_close_header" style="max-width: 200px;">
<div data-role="header" style="text-align: center;">左方關閉鈕(有標題)</div>
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-left"></a>
<p>點右方叉叉或頁面其他地方關閉視窗</p>
</div>
<!-- 右方關閉鈕(有標題) -->
<div data-role="popup" id="right_close_header" style="max-width: 200px;">
<div data-role="header" style="text-align: center;">右方關閉鈕(有標題)</div>
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<p>只能點右方叉叉關閉視窗</p>
</div>
</section>
</body>
</html>
此例在 data-role="page" 的頁面裡放置了 7 個超連結按鈕, 其 data-rel 屬性均為 "popup", 表示按此按鈕將要開啟 id 所指的跳出式訊息窗. 所有的 popup 訊息窗彈出後都可以按一下頁面其他空白處來關閉它們, 除非 div 元素中設定 data-dismissible="false" (有設這個就一定要用圖示超連結按鈕關閉了). 注意, 這些 popup 的 div 元素必須在 page 頁面之內才有效, 結果如下 :
依序按此 7 個按鈕結果如下 :
此例網址 QR code 如下 :
popup 訊息窗最常被用來製作相簿, 所有的相片先以縮圖呈現, 每一個縮圖就是一個按鈕, 當點按縮圖時就彈出 popup 訊息窗顯示原圖. 縮圖部分之網頁結構為以 a 元素包覆 img 元素, 例如兩欄式縮圖可用 49% 寬度 :
<a href="#popup1" data-position-to="window" data-rel="popup">
<img src="p1.jpg" style="width: 49%">
</a>
<a href="#popup2" data-position-to="window" data-rel="popup">
<img src="p2.jpg" style="width: 49%">
</a>
而跳出式訊息窗部分則是顯示原圖但用 max-height 屬性限制高度 :
<div data-role="popup" id="popup1">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<img src="p1.jpg" style="max-height: 512px;">
</div>
<div data-role="popup" id="popup2">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<img src="p2.jpg" style="max-height: 512px;">
</div>
例如 :
測試 2 : 使用訊息對話框 (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">
<header data-role="header">
<h1>彈出式視窗(popup)測試</h1>
</header>
<article data-role="content">
<a href="#popup1" data-position-to="window" data-rel="popup">
<img src="jquerymobile_popup_test_2_1.jpg" style="width: 49%">
</a>
<a href="#popup2" data-position-to="window" data-rel="popup">
<img src="jquerymobile_popup_test_2_2.jpg" style="width: 49%">
</a>
<a href="#popup3" data-position-to="window" data-rel="popup">
<img src="jquerymobile_popup_test_2_3.jpg" style="width: 49%">
</a>
<a href="#popup4" data-position-to="window" data-rel="popup">
<img src="jquerymobile_popup_test_2_4.jpg" style="width: 49%">
</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
<!-- photo 1 -->
<div data-role="popup" id="popup1">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<img src="jquerymobile_popup_test_2_1.jpg" style="max-height: 512px;">
</div>
<!-- photo 2 -->
<div data-role="popup" id="popup2">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<img src="jquerymobile_popup_test_2_2.jpg" style="max-height: 512px;">
</div>
<!-- photo 3 -->
<div data-role="popup" id="popup3">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<img src="jquerymobile_popup_test_2_3.jpg" style="max-height: 512px;">
</div>
<!-- photo 4 -->
<div data-role="popup" id="popup4">
<a href="#" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<img src="jquerymobile_popup_test_2_4.jpg" style="max-height: 512px;">
</div>
</section>
</body>
</html>
此例在頁面中放置了四個圖片的縮圖超連結, 點按之後會以 popup 方式彈出原圖 (但限制高度), 點頁面其他空白處或右上角的 delete 小圖示即可關閉此訊息窗, 結果如下 :
此例網址 QR code 如下 :
二. 使用 dialog 對話框 :
jQuery Mobile 的第二種訊息窗是以 data-role="dialog" 頁面構成的對話框, 有別於上面的 popup 為頁面內結構, dialog 為一獨立之頁面, 預設不會顯示, 必須用有 data-rel="dialog" 屬性之按鈕載入才會顯示.
jQuery Mobile 的訊息對話框網頁結構與一般頁面一樣, 有 header, content, 以及 footer 分別做為對話框的標題, 內容, 以及註腳, 內容區還可以放上一個具有 data-rel="back" 的按鈕用來關閉對話框 :
<section data-role="page" id="msgbox">
<header data-role="header">
<h1>標題</h1>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
注意頁面必須給予 id 屬性, 以便可用超連結按鈕來載入對話框頁面 :
<a href="#msgbox" data-role="button" data-rel="dialog">超連結按鈕</a>
注意此超連結按鈕必須用具有 data-rel="dialog" 屬性, 這樣載入的頁面才會以跳出對話框的形式呈現, 而不是一般的頁面, 例如 :
測試 3 : 使用訊息對話框 (1) [看原始碼]
<!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="#msgbox" data-role="button" data-rel="dialog">超連結按鈕</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 對話框頁面 -->
<section data-role="page" id="msgbox">
<header data-role="header">
<h1>對話框</h1>
</header>
<article data-role="content">
<p>你按了按鈕</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在首頁頁面中有一個含有 data-rel="dialog" 屬性的超連結按鈕, 按此按鈕會開啟 href 屬性所指 id="#msgbox" 的對話框頁面, 結果如下 :
可見被具有 data-rel="dialog" 屬性的超連結按鈕載入之頁面會被 jQuery Mobile 轉成跳出式的對話框, 左上角預設有一個 "X" 圖示按鈕, 按此鈕即可關閉對話框, 此例網址之 QR code 如下 :
也可以在內容區加上一個具有 data-rel="back" 的超連結按鈕來關閉對話框 :
<section data-role="page" id="msgbox">
<header data-role="header">
<h1>標題</h1>
</header>
<article data-role="content">
<p>內容</p>
<a href="#" data-role="button" data-rel="back">關閉</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
例如 :
測試 4 : 使用訊息對話框 (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">
<header data-role="header">
<h1>按鈕測試</h1>
</header>
<article data-role="content">
<a href="#msgbox" data-role="button" data-rel="dialog">超連結按鈕</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 對話框頁面 -->
<section data-role="page" id="msgbox">
<header data-role="header">
<h1>對話框</h1>
</header>
<article data-role="content">
<p>你按了按鈕</p>
<a href="#" data-role="button" data-rel="back">關閉</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在對話框頁面的內容區添加了一個具有 data-rel="back" 的超連結按鈕, 結果如下 :
可見內容區多了一個關閉對話框的按鈕, 其功能與左上角的 "X" 按鈕一樣. 此例網頁的 URL 網址 QR code 如下 :
另外還可以在頁面 section 或 div 元素上添加 data-overlay-theme 屬性, 讓對話框開啟時原頁面變成這個 overlay 布景來凸顯對話框 :
<section data-role="page" id="msgbox" data-overlay-theme="b">
<header data-role="header">
<h1>標題</h1>
</header>
<article data-role="content">
<p>內容</p>
<a href="#" data-role="button" data-rel="back">關閉</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
例如 :
測試 5 : 使用訊息對話框 (3) [看原始碼]
<!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="#msgbox" data-role="button" data-rel="dialog">超連結按鈕</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 對話框頁面 -->
<section data-role="page" id="msgbox" data-overlay-theme="b">
<header data-role="header">
<h1>對話框</h1>
</header>
<article data-role="content">
<p>你按了按鈕</p>
<a href="#" data-role="button" data-rel="back">關閉</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在對話框頁面的 section 元素中添加 data-overlay-theme="b" 屬性, 使得對話框被載入顯現時, 原來的頁面 (即背景) 會變更為主題佈景 b, 結果如下 :
可見當對話框顯現時後面的背景變成主題佈景 b 了, 本例網址之 QR code 如下:
不論是使用 popup 還是 dialog 來製作訊息窗或對話框, 都比用 Javascript 的 alert() 函數有豐富的視覺效果.
2021-02-27 補充 :
今天在讀碁峰的 "學好跨平台網頁設計第二版" 這本書時, 發現對話框其實有兩種結構寫法, 上面的範例是在超連結按鈕上添加 data-rel="dialog" 表示要開啟一個作為對話框用的頁面, 此對話框的 data-role 只要設為一般的 page 即可; 第二種寫法則反過來, 即超連結按鈕不添加 data-rel="dialog", 是一般的按鈕, 但將對話框頁面的 data-role 設為 dialog, 兩種做法效果相同, 如下面範例所示 :
<!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="#dialog1" data-role="button" data-rel="dialog">用 data-rel="dialog" 開啟</a>
<a href="#dialog2" data-role="button">用 data-role="dialog" 開啟</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 對話框頁面 1 -->
<section data-role="page" id="dialog1">
<header data-role="header">
<h1>對話框 1</h1>
</header>
<article data-role="content">
<p>用 data-rel="dialog" 開啟</p>
</article>
</section>
<!-- 對話框頁面 2 -->
<section data-role="dialog" id="dialog2">
<header data-role="header">
<h1>對話框 2</h1>
</header>
<article data-role="content">
<p>用 data-role="dialog" 開啟</p>
</article>
</section>
</body>
</html>
結果如下 :
此例測試網頁 QR code 如下 :
另外, 超連結按鈕開啟 dialog 對話框時還可用 data-transition 屬性指定對話框出現時的特效, 可用特效名稱如下表所示 :
| data-transition 屬性值 | 說明 |
| fade | 淡入效果 (預設) |
| flip | 翻轉 |
| flow | 原頁面縮小移出, 新頁面縮小移入後放大 |
| none | 無特效 |
| pop | 新頁面跳出展開 |
| slide | 原頁面由右至左滑出, 新頁面由右至左滑入 |
| slidedown | 原頁面由上至下滑出, 新頁面由上至下滑入 |
| slidefade | 原頁面由右至左淡出, 新頁面由右至左淡入 |
| slideup | 原頁面由下至上滑出, 新頁面由下至上滑入 |
| turn | 以頁面中心為軸轉換 |
參考 :
茲將上面範例 6 之超連結按鈕加上種 data-transition 特效如下 :
<!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="#dialog1" data-role="button" data-rel="dialog" data-transition="slideup">用 data-rel="dialog" 開啟 (slidup)</a>
<a href="#dialog2" data-role="button" data-transition="turn">用 data-role="dialog" 開啟 (turn)</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 對話框頁面 1 -->
<section data-role="page" id="dialog1">
<header data-role="header">
<h1>對話框 1</h1>
</header>
<article data-role="content">
<p>用 data-rel="dialog" 開啟</p>
</article>
</section>
<!-- 對話框頁面 2 -->
<section data-role="dialog" id="dialog2">
<header data-role="header">
<h1>對話框 2</h1>
</header>
<article data-role="content">
<p>用 data-role="dialog" 開啟</p>
</article>
</section>
</body>
</html>
結果對話框以預期效果出現 (須實際測試才知), 此範例測試網頁 QR code 如下 :
沒有留言 :
張貼留言