工具列是按鈕的延伸應用, 主要的功能是導覽, 換頁, 對話, 或提交表單等. jQuery Mobile 的工具列主要是指放在頁面的標題列 (頁首) 與註腳列 (頁尾) 的按鈕, 群組按鈕或表單元素 (如下拉式選單等) :
- 標題列 :
只能在標題文字的左邊與右邊各放一個按鈕, 且按鈕會與標題文字同一列, 但群組按鈕則會與標題文字分列放置. - 註腳列 :
按鈕會依 in-line 方式逐一排列, 不限制放在註腳文字左右兩邊, 如果文字用區塊元素如 p 或 div 包覆則註腳文字會單獨一列放置. - 內容區 :
內容區的按鈕可以利用網格排版.
參考 :
# https://demos.jquerymobile.com/1.4.5/toolbar/
一. 標題列上的按鈕 :
在上一篇的按鈕範例 1 中已測試過在標題列放置按鈕的作法, 不管是一般的換頁按鈕還是 Back 按鈕, 其位置都只能放在標題文字的左與右兩個而已, 且按鈕會與標題文字同一列. 按鈕的左右位置可用樣式類別 class="ui-btn-left" 與 class="ui-btn-right" 指定, 若不指定會自動以先左後右順序排列, 例如 :
測試 1-1 : 標題列的超連結按按鈕 (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">
<a href="#" data-icon="gear">設定</a>
<h1>標題列的按鈕</h1>
<a href="#" data-icon="info">關於</a>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在標題文字前後各放置一個按鈕, 未指定樣式類別 class="ui-btn-left" 與 class="ui-btn-right", 則 jQuery Mobile 會按照出現順序擺放, 前者在左, 後者在右, 結果如下 :
可見標題列的按鈕會與標題文字自動放在同一列. 此例網址 QR code 如下 :
即使將標題文字放在前面, jQuery Mobile 還是會自動將其置中, 如下範例所示 :
測試 1-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>標題列的按鈕</h1>
<a href="#" data-icon="gear">設定</a>
<a href="#" data-icon="info">關於</a>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
可見排在第一的標題文字仍然自動被放在兩個按鈕中間, 放在後面的 "設定" 按鈕在左, "關於" 按鈕則在右, 結果與上面一樣. 此例網址 QR code 如下 :
如果有使用樣式類別 class="ui-btn-left" 與 class="ui-btn-right" 指定按鈕擺放位置, 則超連結的前後順序就無關緊要了, 亦即有 class="ui-btn-right" 樣式的超連結可放在前, 有 class="ui-btn-left" 樣式的超連結可放在後, 前後順序不會影響左右位置, 完全由樣式類別決定, 例如 :
測試 1-3 : 標題列的超連結按鈕 (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>
<a href="#" data-icon="info" class="ui-btn-right">關於</a>
<a href="#" data-icon="gear" class="ui-btn-left">設定</a>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例指定了按鈕位置的樣式類別, 雖然 "關於" 按鈕在前, 但因其要式類別被指定為 class="ui-btn-right" 而被放在右邊; "設定" 按鈕在後, 但因其要式類別被指定為 class="ui-btn-left" 而被放在左邊, 結果與上面兩個範例一樣, 此例網址 QR code 如下 :
注意, 標題列中的超連結按鈕必須是 "裸" 的, 亦即不可再包覆 div 等元素, 否則 jQuery Mobile 不會自動將其繪製為按鈕, 而是以超連結原型繪製, 例如 :
測試 1-4 : 標題列的超連結按鈕 (4) [看原始碼]
<!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>
<div>
<a href="#" data-icon="info">關於</a>
<a href="#" data-role="button" data-icon="gear">設定</a>
</div>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在標題列超連結按鈕外再用 div 包覆, 這樣閉必須加上 data-role="button" 才會以按鈕繪製 (例如 "設定" 鈕), 否則以超連結原型繪製 (例如 "關於" 按鈕), 結果如下 :
可見包覆 div 的結果, 不僅超連結無法自動轉成按鈕, 必須添加 data-role="button" 屬性才行; 而且標題文字與工具列按鈕會分兩列排列. 此例網址 QR code 如下 :
會以 div 包覆超連結, 通常是要將超連結打包成控制群組按鈕 (用 data-role="controlgroup" 屬性), 若捨棄標題文字即可將標題列完全作為工具列使用, 例如 :
測試 1-5 : 標題列的超連結按鈕 (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">
<header data-role="header">
<div data-role="controlgroup">
<a href="#" data-role="button" data-icon="home">首頁</a>
<a href="#" data-role="button" data-icon="star">收藏</a>
<a href="#" data-role="button" data-icon="info">關於</a>
<a href="#" data-role="button" data-icon="gear">設定</a>
<a href="#" data-role="button" data-icon="search">搜尋</a>
</div>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例以具有 data-role="control-group" 的 div 將五個超連結按鈕打包成一個按鈕群組, 注意每個超連結都必須有 data-role="button" 屬性才會以按鈕繪製, 結果如下 :
可見標題列整個變成由按鈕群組組成的工具列了. 此例網址 QR code 如下 :
不過以手機瀏覽來說, 需注意群組內最好不要放超過 5 個按鈕, 因為超過的會跳下一列顯示, 畫面會顯得不協調, 例如 :
測試 1-6 : 標題列的超連結按鈕 (6) [看原始碼]
<!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">
<div data-role="controlgroup">
<a href="#" data-role="button" data-icon="home">首頁</a>
<a href="#" data-role="button" data-icon="star">收藏</a>
<a href="#" data-role="button" data-icon="info">關於</a>
<a href="#" data-role="button" data-icon="gear">設定</a>
<a href="#" data-role="button" data-icon="search">搜尋</a>
<a href="#" data-role="button" data-icon="alert">提醒</a>
</div>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例標題列的按鈕群組含有 6 個超連結按鈕, 第六個會被放在第二列, 結果如下 :
第六個按鈕被放在新增的一列看來很突兀, 只有在按鈕數目為 5 的倍數時才不會有違和感. 此例網址 QR code 如下 :
上面兩個範例中以控制群組製作的工具列, 因為 margin 的關係看起來仍然是各別的按鈕, 如果用導覽列 () 來做的話效果會更好, 接近頁籤的視覺效果. 導覽列的網頁結構是一個具有 data-role="navbar" 屬性的 div 元素所包覆的無序清單, 清單項目則是超連結按鈕, 例如 :
<div data-role="navbar">
<ul>
<li><a href="#" data-role="button" data-icon="home">首頁</a></li>
<li><a href="#" data-role="button" data-icon="star">收藏</a></li>
<li><a href="#" data-role="button" data-icon="info">關於</a></li>
<li><a href="#" data-role="button" data-icon="gear">設定</a></li>
<li><a href="#" data-role="button" data-icon="search">搜尋</a></li>
</ul>
</div>
例如 :
測試 1-7 : 標題列的超連結按鈕 (7) [看原始碼]
<!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">
<div data-role="navbar">
<ul>
<li><a href="#" data-role="button" data-icon="home">首頁</a></li>
<li><a href="#" data-role="button" data-icon="star">收藏</a></li>
<li><a href="#" data-role="button" data-icon="info">關於</a></li>
<li><a href="#" data-role="button" data-icon="gear">設定</a></li>
<li><a href="#" data-role="button" data-icon="search">搜尋</a></li>
</ul>
</div>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例將超連結按鈕先用無序清單 ul-li 元素包覆後, 再用具有 data-role="navbar" 之 div 元素包覆, 結果如下 :
可見導覽列的按鈕沒有 margin, 更接近頁籤而非按鈕外觀. 注意, navbar 的按鈕圖示位置預設是靠上 (data-iconpos="top"), 因此按鈕長度比較大, 最好是設為靠左 (left) 或靠右 (right) 以節省版面空間. 此例網址 QR code 如下 :
與控制群組相同, 按鈕數目最好不要超過 5 個, 超過的話 navbar 會以兩欄多列方式排列, 例如 :
測試 1-8 : 標題列的超連結按鈕 (8) [看原始碼]
<!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">
<div data-role="navbar">
<ul>
<li><a href="#" data-role="button" data-icon="home">首頁</a></li>
<li><a href="#" data-role="button" data-icon="star">收藏</a></li>
<li><a href="#" data-role="button" data-icon="info">關於</a></li>
<li><a href="#" data-role="button" data-icon="gear">設定</a></li>
<li><a href="#" data-role="button" data-icon="search">搜尋</a></li>
<li><a href="#" data-role="button" data-icon="alert">提醒</a></li>
</ul>
</div>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例添加了第六個按鈕, 結果如下 :
可見超過五個按鈕後, 導覽列 navbar 會以 2 列 n 行的網格來放置按鈕, 對於手機螢幕有限的空間而言, 這樣不太經濟. 此例網址 QR code 如下 :
從以上測試可知, 頁首標題列完全做按鈕工具列使用時, 不論是採用控制群組或導覽列, 按鈕數目最好不要超過五個, 才不會破壞整體視覺上的美觀.
在一檔多頁 (SPA) 結構下除了導覽列外, 標題文字列因為可以設定返回按鈕, 所以在 header 中使用標題文字列+導覽列是很方便操作的介面模式, 例如 :
測試 1-9 : 標題列的超連結按鈕 (9) [看原始碼]
<!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>
<a href="#page2" class="ui-btn-right">第二頁</a>
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-role="button" data-icon="home">首頁</a></li>
<li><a href="#" data-role="button" data-icon="star">收藏</a></li>
<li><a href="#" data-role="button" data-icon="info">關於</a></li>
<li><a href="#" data-role="button" data-icon="gear">設定</a></li>
<li><a href="#" data-role="button" data-icon="search">搜尋</a></li>
</ul>
</div>
</header>
<article data-role="content">
<p>第一頁內容</p>
</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>
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-role="button" data-icon="home">首頁</a></li>
<li><a href="#" data-role="button" data-icon="star">收藏</a></li>
<li><a href="#" data-role="button" data-icon="info">關於</a></li>
<li><a href="#" data-role="button" data-icon="gear">設定</a></li>
<li><a href="#" data-role="button" data-icon="search">搜尋</a></li>
</ul>
</div>
</header>
<article data-role="content">
<p>第二頁內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例有兩個頁面, 在 header 裡面有標題文字列與 navbar 導覽列, 首頁的標題文字列右方有個按鈕用來載入第二頁頁面. 而在第二頁則於 header 的 div 元素中以 data-add-back-btn="true" 開啟標題文字列左方的 Back (返回) 按鈕, 注意, 在 jQuery Mobile v1.4 以前這個屬性放在 data-role="page" 的 div 或 section 元素, 但 1.4 版後要放在 data-role="header" 的元素中才會有效.
其次, 原本放在 a 元素中用來指定圖示位置的 data-iconpos 屬性也可以放在 data-role="navbar" 的 div 元素中, 這樣即可避免逐一設定超連結 a 元素 (注意, controlgroup 無此功能), 結果如下 :
此例網址 QR code 如下 :
二. 註腳列的超連結按鈕 :
頁尾註腳列除標題文字外也可以放置按鈕工具列, 超連結按鈕會按排列順序流水式放置, 但一列最多可放五個, 超過會被排到下一列, 而且不需要特別加上 data-role="button" 屬性也會自動被繪製成按鈕外觀, 但與標題列上的按鈕不同之處是, 註腳文字會單獨佔一列, 按鈕不能透過 class="ui-btn-right" 與 "ui-btn-left" 屬性把自己放在註腳文字的左右兩邊, 但仍可使用此屬性來控制按鈕是靠左放還是靠右放, 例如 :
測試 2-1 : 註腳列的超連結按鈕 (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">
<p>內容</p>
</article>
<footer data-role="footer">
<a href="#" data-icon="home">首頁</a>
<a href="#" data-icon="star">收藏</a>
<a href="#" data-icon="info">關於</a>
<a href="#" data-icon="gear">設定</a>
<a href="#" data-icon="search">搜尋</a>
<a href="#" data-icon="search" class="ui-btn-right">搜尋</a>
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在註腳文字前放置了五個按鈕, 注意它們都不需要使用 data-role="button" 屬性, 因為 jQuery Mobile 會將標題列與註腳列中的裸 a 元素自動繪製成按鈕. 最後一個按鈕 "搜尋" 被加上了 class="ui-btn-right" 屬性, 結果如下 :
可見最後一個按鈕是在按鈕工具列中靠右放置 (但高度似乎較低一些), 而不是放在註腳文字列右邊, 註腳文字會單獨佔據一列, 左右不能放按鈕, 這是與標題列不同之處. 此例網址 QR code 如下 :
按鈕也可以用有 data-role="controlgroup" 屬性的 div 元素打包為控制群組按鈕, 但由於不是 footer 底下的子元素而是孫元素, jQuery Mobile 不會自動將其繪製為按鈕, 必須加上特別加上 data-role="button" 屬性才行, 例如 :
測試 2-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>註腳列的按鈕</h1>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<div data-role="controlgroup">
<a href="#" data-icon="home">首頁</a>
<a href="#" data-icon="star">收藏</a>
<a href="#" data-icon="info">關於</a>
<a href="#" data-icon="gear">設定</a>
<a href="#" data-role="button" data-icon="search">搜尋</a>
</div>
</footer>
</section>
</body>
</html>
此例的五個按鈕被包覆在控制群組 div 元素裡面, 只有第五個按鈕 "搜尋" 有加上 data-role="button" 才能被繪製成按鈕, 其餘四個還是超連結, 結果如下 :
此例網址 QR code 如下 :
從上面的測試 1-9 範例可知圖示位置指定屬性 data-iconpos 可以統一放在 data-role="navbar" 的 div 元素中, 不需要在超連結 a 元素中逐一設定, 但這種功能在 controlgroup 中卻無效, 如下面範例所示 :
測試 2-3 : 註腳列的超連結按鈕 (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">
<p>內容</p>
</article>
<footer data-role="footer">
<div data-role="controlgroup" data-iconpos="right">
<a href="#" data-role="button" data-icon="home">首頁</a>
<a href="#" data-role="button" data-icon="star">收藏</a>
<a href="#" data-role="button" data-icon="info">關於</a>
<a href="#" data-role="button" data-icon="gear">設定</a>
<a href="#" data-role="button" data-icon="search">搜尋</a>
</div>
</footer>
</section>
</body>
</html>
此例在 controlgroup 中添加 data-iconpos 屬性但無效, 結果如下 :
此例網址 QR code 如下 :
改用 navbar 按鈕外觀就接近原生 App 的效果, 且可在 navbar 上統一設定 data-iconpos 屬性 :
測試 2-4 : 註腳列的超連結按鈕 (4) [看原始碼]
<!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">
<p>內容</p>
</article>
<footer data-role="footer">
<div data-role="navbar" data-iconpos="right">
<ul>
<li><a href="#" data-role="button" data-icon="home">首頁</a></li>
<li><a href="#" data-role="button" data-icon="star">收藏</a></li>
<li><a href="#" data-role="button" data-icon="info">關於</a></li>
<li><a href="#" data-role="button" data-icon="gear">設定</a></li>
<li><a href="#" data-role="button" data-icon="search">搜尋</a></li>
</ul>
</div>
</footer>
</section>
</body>
</html>
此例在 data-role="navbar" 的 div 元素上添加 data-iconpos 屬性, 而非加在每個超連結 a 元素上, 結果如下 :
可見 data-iconpos 統一設定在 navbar 是有效的, 此例網址 QR code 如下 :
與標題列上的 navbar 一樣, 按鈕數目不要超過 5 個, 否則會以多列 2 欄網格來放置按鈕, 例如 :
測試 2-5 : 註腳列的超連結按鈕 (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">
<header data-role="header">
<h1>註腳列的按鈕</h1>
</header>
<article data-role="content">
<p>內容</p>
</article>
<footer data-role="footer">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-role="button" data-icon="home">首頁</a></li>
<li><a href="#" data-role="button" data-icon="star">收藏</a></li>
<li><a href="#" data-role="button" data-icon="info">關於</a></li>
<li><a href="#" data-role="button" data-icon="gear">設定</a></li>
<li><a href="#" data-role="button" data-icon="search">搜尋</a></li>
<li><a href="#" data-role="button" data-icon="alert">提醒</a></li>
</ul>
</div>
</footer>
</section>
</body>
</html>
此例多加了一個 alert 按鈕總共 6 個, navbar 會以 3 列 2 行網格對按鈕排版, 結果如下 :
可見 3*2 網格佔據了螢幕頗大版面, 而且這是添加 data-iconpos="left" 的結果, 如果沒有強制將圖示靠左或靠右, 預設是靠上 (top) 占用面積更大. 此例網址 QR code 如下 :
將上面測試 1-9 加上頁尾工具列的整合範例如下 :
測試 2-6 : 註腳列的超連結按鈕 (6) [看原始碼]
<!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>
<a href="#page2" class="ui-btn-right">第二頁</a>
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-role="button" data-icon="home">首頁</a></li>
<li><a href="#" data-role="button" data-icon="star">收藏</a></li>
<li><a href="#" data-role="button" data-icon="info">關於</a></li>
<li><a href="#" data-role="button" data-icon="gear">設定</a></li>
<li><a href="#" data-role="button" data-icon="search">搜尋</a></li>
</ul>
</div>
</header>
<article data-role="content">
<p>第一頁內容</p>
</article>
<footer data-role="footer">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-role="button" data-icon="alert">提醒</a></li>
<li><a href="#" data-role="button" data-icon="check">選取</a></li>
<li><a href="#" data-role="button" data-icon="delete">刪除</a></li>
<li><a href="#" data-role="button" data-icon="forward">前進</a></li>
<li><a href="#" data-role="button" data-icon="grid">網格</a></li>
</ul>
</div>
<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>
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-role="button" data-icon="home">首頁</a></li>
<li><a href="#" data-role="button" data-icon="star">收藏</a></li>
<li><a href="#" data-role="button" data-icon="info">關於</a></li>
<li><a href="#" data-role="button" data-icon="gear">設定</a></li>
<li><a href="#" data-role="button" data-icon="search">搜尋</a></li>
</ul>
</div>
</header>
<article data-role="content">
<p>第二頁內容</p>
</article>
<footer data-role="footer">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-role="button" data-icon="alert">提醒</a></li>
<li><a href="#" data-role="button" data-icon="check">選取</a></li>
<li><a href="#" data-role="button" data-icon="delete">刪除</a></li>
<li><a href="#" data-role="button" data-icon="forward">前進</a></li>
<li><a href="#" data-role="button" data-icon="grid">網格</a></li>
</ul>
</div>
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
注意 navbar 的按鈕圖示預設為 top, 為了節省螢幕版面最好設為 left 或 right, 結果如下 :
此例網址 QR code 如下 :
沒有留言 :
張貼留言