本篇繼續測試 jQuery Mobile 的列表清單 (Listview). 本系列之前的文章參考 :
# jQuery Mobile 學習筆記 (三) : 工具列
# jQuery Mobile 學習筆記 (四) : 對話框
參考書籍 :
- 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 錢途無量 (佳魁, 李科泉)
# https://demos.jquerymobile.com/1.4.5/listview/
Listview 的網頁結構基本上有兩種, 一是使用具有 data-role="listview" 屬性的無序清單, 此方式項目的前面不會有序號 :
<ul data-role="listview">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
二是使用有序清單, 這種方式的項目前面會有序號 :
<ol data-role="listview">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
例如 :
測試 1 : 放在 content 內的靜態 listview (有 data-inset 屬性) [看原始碼]
<!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">
<ul data-role="listview" data-inset="true">
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>jQuery</li>
<li>jQuery Moile</li>
</ul>
<ol data-role="listview" data-inset="true">
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>jQuery</li>
<li>jQuery Moile</li>
</ol>
<a href="#" data-role="button">確定</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在內容區放了兩個 Listview (無序與有序) 以及一個按鈕, 注意, 每一個清單 ul/ol 元素都添加了 data-inset="true" 屬性, 這樣會讓 Listview 內縮且邊框具有圓角, 結果如下 :
上面的是用 ul-li 做的無序列表選單, 下面有序號的則是用 ol-li 做的有序列表選單, 可見 jQuery Mobile 會將 ul-li 或 ol-li 繪製成類似控制群組一樣的列表. 此例網址的 QR code 如下 :
注意, ul/ol 中的 data-inset="true" 是必要的, 如果拿掉的話會讓版面亂掉, 例如 :
<!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">
<ul data-role="listview">
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>jQuery</li>
<li>jQuery Moile</li>
</ul>
<ol data-role="listview">
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>jQuery</li>
<li>jQuery Moile</li>
</ol>
<a href="#" data-role="button">確定</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例 ul/ol 仍在 content 內容區, 但去除了 data-inset="true" 屬性, 結果如下 :
與上面有 data-inset="true" 時比較, 列表清單佔據了整個螢幕寬度 (沒有間隙), 且版面有點亂掉, 第二個列表清單與底下的按鈕的位置都稍微往上挪導致部分重疊, 據說這是 jQuery Mobile 的 Bug. 此例網址 QR code 如下 :
有些書籍 (例如上面參考書 No.1 與 No.9) 建議 ul 與 ol 不需要用 div 或 article 元素包覆, 直接取代 content 的位置, 此作法列表清單將如上面測試 2 一樣佔據整個螢幕寬度, 沒有邊框與間隙, 但不會有版面亂掉的問題, 例如 :
測試 3 : 沒有放在 content 內的靜態 listview [看原始碼]
<!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>
<ul data-role="listview">
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>jQuery</li>
<li>jQuery Moile</li>
</ul>
<ol data-role="listview">
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>jQuery</li>
<li>jQuery Moile</li>
</ol>
<a href="#" data-role="button">確定</a>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例 ul 與 ol 直接放在 header 與 footer 中間, 外面沒有用 div 或 article 元素包覆, 結果如下 :
可見沒有 content 包覆的話後間隙不見了, 但是卻沒有版面亂掉的問題. 因此如果列表清單需要佔據整個螢幕寬度可採用此方法, 此例網址的 QR code 如下 :
| 項目內容 | 用途 |
| a | 互動清單 |
| h1~h6 | 粗體標題文字 |
| p | 細體子標題文字 |
| span | 計數氣泡 |
| img | 圖示或縮圖 |
項目內容如果是超連結 a 元素, jQuery Mobile 會將其繪製為超連結按鈕, 使得列表清單具有互動性, 可用做內容區的導覽列, 用來載入其他頁面或連結到其他網頁, 而上面兩個範例只能靜態地顯示資訊 (read only) 而已. 互動式 Listview 預設會在右邊出現一個 > 符號, 例如 :
測試 4 : 項目內容是超連結的動態 listview (連結外部網頁) [看原始碼]
<!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">
<ul data-role="listview" data-inset="true">
<li><a href="https://shopping.pchome.com.tw/">PChome 購物</a></li>
<li><a href="https://tw.buy.yahoo.com/">Yahoo 購物</a></li>
<li><a href="https://www.momoshop.com.tw/">momo 購物</a></li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例 Listview 中每一個項目內容都是連結到外部網站的超連結 a 元素, 結果如下 :
可見互動的列表清單每個項目右邊會有一個圖示 (預設是大於), 點按各項目會連結到超連結 href 屬性所指的購物網站. 此例網址 QR code 如下 :
互動的 Listview 也可以用來載入其它頁面, 例如 :
測試 5 : 項目內容是超連結的動態 listview (載入頁面) [看原始碼]
<!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">
<ul data-role="listview">
<li><a href="#page2">第二頁</a></li>
<li><a href="#page3">第三頁</a></li>
</ul>
</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">
<p>第二頁內容</p>
</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">
<p>第三頁內容</p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例有三個頁面, 透過互動的 Listview 可進行換頁, 結果如下 :
此例網址 QR code 如下 :
接續上面測試 4, 互動 Listview 預設項目圖示為大於, 可以透過在 li 元素上添加 data-icon 屬性個別指定圖示, 關於圖示名稱參考 :
例如 :
測試 6 : 項目內容是超連結的動態 listview (指定項目圖示) [看原始碼]
<!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">
<ul data-role="listview" data-inset="true">
<li data-icon="star"><a href="https://shopping.pchome.com.tw/">PChome 購物</a></li>
<li data-icon="alert"><a href="https://tw.buy.yahoo.com/">Yahoo 購物</a></li>
<li data-icon="plus"><a href="https://www.momoshop.com.tw/">momo 購物</a></li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在測試 4 範例的每個 li 中添加 data-icon 屬性指定圖示, 結果如下 :
可見列表清單項目右方的圖示都改成指定之圖示了, 此例網址 QR code 如下 :
<li data-role="list-divider">分類標籤名稱</li>
例如 :
測試 7 : 用 data-role="list-divider" 製做項目分類標籤 [看原始碼]
<!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">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">購物</li>
<li><a href="https://shopping.pchome.com.tw/">PChome 購物</a></li>
<li><a href="https://tw.buy.yahoo.com/">Yahoo 購物</a></li>
<li><a href="https://www.momoshop.com.tw/">momo 購物</a></li>
<li data-role="list-divider">拍賣</li>
<li><a href="https://www.ruten.com.tw/">露天拍賣</a></li>
<li><a href="https://tw.bid.yahoo.com/">Yahoo 拍賣</a></li>
<li><a href="https://shopee.tw/">蝦皮拍賣</a></li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在購物與拍賣兩類網站項目最前面插入具有 data-role="list-divider" 的 li 項目做為分類標籤 (只是作為單純的分類標籤, 因此不需套上超連結), 結果如下 :
可見使用 data-role="list-divider" 可使項目之分類更清楚, 此例網址 QR code 如下 :
項目的內容可以用 h1~h6 來作為標題 (粗體), 使用 p 作為描述 (細體), 架構如下 :
<ul data-role="listview">
<li>
<h1>標題1</h1>
<p>敘述1</p>
</li>
<li>
<h1>標題2</h1>
<p>敘述2</p>
</li>
</ul>
例如 :
測試 8 : 區分項目內容的重要性 : 用 h1~h6 包覆標題與用 p 包覆描述 [看原始碼]
<!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">
<ul data-role="listview" data-inset="true">
<li>
<h1>jQuery</h1>
<p>可方便操作 DOM 的 Javascript 函式庫</p>
</li>
<li>
<h1>jQuery Mobile</h1>
<p>用來製作行動網頁 UI 的 Javascript 函式庫</p>
</li>
<li>
<h1>Cordova</h1>
<p>用來將行動網頁轉成原生 App 的 Javascript 函式庫</p>
</li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例分別以 h1 與 p 來包覆標題與敘述文字, 注意, 使用 h1~h6 任一種均可, jQuery Mobile 繪製的標題大小不管用哪一個都一樣, 結果如下 :
這樣就能強調主題與敘述的重要性分別了, 此例網址 QR code 如下 :
除了用 h1~h6 與 p 元素來區分標題與敘述外, 還可以使用具有 class="ui-li-aside" 屬性的 span 元素放在標題的後面做為輔助說明, 由於 span 元素是 in-line (非區塊) 元素, 因此這個 span 所包覆的內容會顯示在清單項目標題後面且向右對齊, 結構如下 :
<ul data-role="listview">
<li>
<h1>標題1</h1>
<span class="ui-li-aside">輔助說明1</span>
<p>敘述1</p>
</li>
<li>
<h1>標題2</h1>
<span class="ui-li-aside">輔助說明2</span>
<p>敘述2</p>
</li>
</ul>
例如 :
測試 9 : 區分項目內容的重要性 : 用 span 包覆輔助說明 (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">
<ul data-role="listview" data-inset="true">
<li>
<h1>jQuery</h1>
<span class="ui-li-aside">最新 v3.5.1</span>
<p>可方便操作 DOM 的 Javascript 函式庫</p>
</li>
<li>
<h1>jQuery Mobile</h1>
<span class="ui-li-aside">最新 v1.4.5</span>
<p>用來製作行動網頁 UI 的 Javascript 函式庫</p>
</li>
<li>
<h1>Cordova</h1>
<span class="ui-li-aside">最新 v9.0.0</span>
<p>用來將行動網頁轉成原生 App 的 Javascript 函式庫</p>
</li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在 h1 後面添加具有 class="ui-li-aside" 屬性之 span 元素作為標題的輔助說明 (此處為函式庫最新版本訊息), 結果如下 :
此例網址 QR code 如下 :
如果將上面測試 9 的項目內容都用超連結 a 元素包覆就變成互動式 Listview, 點按各清單選項可載入官方網頁, 例如 :
測試 10 : 區分項目內容的重要性 : 用 span 包覆輔助說明 (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">
<ul data-role="listview" data-inset="true">
<li>
<a href="https://jquery.com/">
<h1>jQuery</h1>
<span class="ui-li-aside">最新 v3.5.1</span>
<p>可方便操作 DOM 的 Javascript 函式庫</p>
</a>
</li>
<li>
<a href="https://jquerymobile.com/">
<h1>jQuery Mobile</h1>
<span class="ui-li-aside">最新 v1.4.5</span>
<p>用來製作行動網頁 UI 的 Javascript 函式庫</p>
</a>
</li>
<li>
<a href="https://cordova.apache.org/">
<h1>Cordova</h1>
<span class="ui-li-aside">最新 v9.0.0</span>
<p>用來將行動網頁轉成原生 App 的 Javascript 函式庫</p>
</a>
</li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例只是將上面測試 9 的項目內容用超連結 a 元素包覆使列表清單變成互動式, 並連結官方網頁而已, 結果如下 :
此例網址 QR code 如下 :
項目內容也可以是圖片, 但需將圖片尺寸調整為 80*80 px 解析度, 例如上面範例可在最前面添加每個函式庫的 logo :
測試 11 : 項目內容添加圖片 (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">
<ul data-role="listview" data-inset="true">
<li>
<a href="https://jquery.com/">
<img src="jquery-logo.jpg">
<h1>jQuery</h1>
<span class="ui-li-aside">最新 v3.5.1</span>
<p>可方便操作 DOM 的 Javascript 函式庫</p>
</a>
</li>
<li>
<a href="https://jquerymobile.com/">
<img src="jquery-mobile-logo.jpg">
<h1>jQuery Mobile</h1>
<span class="ui-li-aside">最新 v1.4.5</span>
<p>用來製作行動網頁 UI 的 Javascript 函式庫</p>
</a>
</li>
<li>
<a href="https://cordova.apache.org/">
<img src="cordova-logo.jpg">
<h1>Cordova</h1>
<span class="ui-li-aside">最新 v9.0.0</span>
<p>用來將行動網頁轉成原生 App 的 Javascript 函式庫</p>
</a>
</li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在項目內容最前面加上一個 img 元素, 圖片來源為 80*80 之 jpg 檔, 結果如下 :
此例網址 QR code 如下 :
圖片 img 元素也可以套上 class="ui-li-icon" 屬性, 它會將圖片縮成 16*16 的小圖示, 例如 :
測試 12 : 項目內容添加圖片 (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">
<ul data-role="listview" data-inset="true">
<li>
<a href="https://jquery.com/">
<img src="jquery-logo.jpg" class="ui-li-icon">
<h1>jQuery</h1>
<span class="ui-li-aside">最新 v3.5.1</span>
<p>可方便操作 DOM 的 Javascript 函式庫</p>
</a>
</li>
<li>
<a href="https://jquerymobile.com/">
<img src="jquery-mobile-logo.jpg" class="ui-li-icon">
<h1>jQuery Mobile</h1>
<span class="ui-li-aside">最新 v1.4.5</span>
<p>用來製作行動網頁 UI 的 Javascript 函式庫</p>
</a>
</li>
<li>
<a href="https://cordova.apache.org/">
<img src="cordova-logo.jpg" class="ui-li-icon">
<h1>Cordova</h1>
<span class="ui-li-aside">最新 v9.0.0</span>
<p>用來將行動網頁轉成原生 App 的 Javascript 函式庫</p>
</a>
</li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例只是將上面測試 11 的 img 元素套上 class="ui-li-icon" 屬性, 結果如下 :
可見原本 80*80 的圖檔被套上 class="ui-li-icon" 樣式後變成 16*16 的小圖示了 (感覺太小了). 此例網址 QR code 如下 :
span 元素除了可套用 class="ui-li-aside" 做為標題的補充說明外, 也可以套用 class="ui-li-count" 作為計數氣泡用, 通常用來顯示文章點閱數, 商品已購買人數, 收件夾信件數目等等, 例如 :
測試 13 : 用 span 包覆數字製作計數泡泡 (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">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">電子郵件信箱</li>
<li>
<a href="#">收件夾</a>
<span class="ui-li-count">124</span>
</li>
<li><a href="#">草稿</a></li>
<li><a href="#">計件備份</a></li>
<li>
<a href="#">垃圾郵件</a>
<span class="ui-li-count">1247</span>
</li>
<li>
<a href="#">刪除的郵件</a>
<span class="ui-li-count">581</span>
</li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例為一個 email 郵件信箱, 部分項目內容為一個互動用的超連結 a 元素與一個具有 class="ui-li-count" 屬性的 span 元素, 它會被 jQuery Mobile 描繪成一個計數泡泡覆蓋在大於的互動圖示上, 結果如下 :
此例網址 QR code 如下 :
不過上面這個範例項目內容中的 a 與 span 元素獨立的結構有個缺點, 即計數泡泡會蓋住表示互動項目之大於圖示, 比較好的網頁結構應該是用 a 元素包覆所有項目內容, 例如 :
測試 14 : 用 span 包覆數字製作計數泡泡 (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">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">電子郵件信箱</li>
<li>
<a href="#">
<h1>收件夾</h1>
<span class="ui-li-count">124</span>
</a>
</li>
<li>
<a href="#">
<h1>草稿</h1>
</a>
</li>
<li>
<a href="#">
<h1>計件備份</h1>
</a>
</li>
<li>
<a href="#">
<h1>垃圾郵件</h1>
<span class="ui-li-count">1247</span>
</a>
</li>
<li>
<a href="#">
<h1>刪除的郵件</h1>
<span class="ui-li-count">581</span>
</a>
</li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例中以 a 元素包覆全部項目內容, 這樣計數泡泡就會被繪製在右邊表示互動的大於圖示前面, 而不是重疊在上面, 結果如下 :
此例網址 QR code 如下 :
接著測試 Listview 的篩選框, 如果在 ul/ol 元素中添加 data-filter="true" 屬性, 則 jQuery Mobile 在繪製列表清單前面添加一個搜尋輸入框, 可對清單內容進行篩選, 且可加上 data-filter-placeholder 屬性指定提示訊息, 例如 :
測試 15 : 在 ul/ol 用 data-filter="true" 添加列表清單搜尋框 [看原始碼]
<!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">
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="搜尋">
<li data-role="list-divider">程式語言</li>
<li>Python</li>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Javascript</li>
<li>PHP</li>
<li>R</li>
<li>C#</li>
<li>Julia</li>
<li>Swift</li>
<li>Kotlin</li>
<li>Go</li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例在 ul 元素中添加了 data-filter="true" 與 data-filter-placeholder 屬性, 列表清單上方會出現一個搜尋框可用來篩選清單內容, 結果如下 :
輸入 C 之後會搜尋清單內容含有 C 的項目, 且只顯示篩選出來的項目, 此例網址 QR code 如下 :
以上的互動式清單範例都是每個項目只有一個操作 (例如載入頁面或連結外部網頁), 所以通常使用超連結 a 元素包覆該項目的全部內容. 如果需要在單一列中執行兩個不同的操作就需要分割清單列, 做法其實就是在項目內容中加入另一個超連結 a 元素 (注意, Litview 的每一個項目最多就只能放兩個 a 元素, 超過會破壞版面) :
<ul data-role="listview" data-inset="true">
<li>
<a href="a.htm">操作A</a>
<a href="b.htm">操作B</a>
</li>
</ul>
其中第一個超連結 "操作 A" 是主體, 會佔據螢幕大部分寬度; 而第二個超連結 "操作 B" 則是客體, 連結文字不會顯示, 而是在該項目列最後面以預設右箭頭 (大於) 圖示來表示 :
點這項目的前段 "操作A" 與後段右箭頭 ("操作B") 會載入不同連結或頁面 (即不同之操作). 如果要指定操作 B 的圖示可在 a 元素中添加 data-icon 屬性指定, 例如 :
<ul data-role="listview" data-inset="true">
<li>
<a href="a.htm">操作A</a>
<a href="b.htm" data-icon="edit">操作B</a>
</li>
</ul>
結果如下 :
如果每一個項目都是使用同樣的圖示, 則可以在 ul/ol 元素中添加 data-split-icon 屬性來處理, 不需要在每個項目中使用 data-icon 屬性, 例如 :
<ul data-role="listview" data-inset="true" data-split-icon="edit">
<li>
<a href="#">操作A1</a>
<a href="#">操作B1</a>
</li>
<li>
<a href="#">操作A2</a>
<a href="#">操作B2</a>
</li>
</ul>
結果如下 :
也可以添加 data-split-theme 指定分裂欄位之主題佈景, 例如 :
<ul data-role="listview" data-inset="true" data-split-icon="edit" data-split-icon="b">
<li>
<a href="#">操作A1</a>
<a href="#">操作B1</a>
</li>
<li>
<a href="#">操作A2</a>
<a href="#">操作B2</a>
</li>
</ul>
下面範例是將測試 10 添加第二個超連結 a 元素指向各函式庫的 GitHub 網頁, 為了讓使用者一看就知道那是連結到 GitHub, 必須自訂一個 GitHub 圖示, 先下載 GitHub 的 Logo 以圖片編輯軟體如 PicPick 將其縮小為 32*32 的 jpg 檔 (或 png) GitHub-logo.jpg 放在專案目錄下, 然後在網頁的 head 中以 :after 偽類別元素添加自訂圖示樣式 .ui-icon-github :
<style>
.ui-icon-github:after {background-image: url('GitHub-logo.jpg');}
</style>
類別名稱 ui-icon-githu 結尾的 github 就是此圖示之名稱, 參考 :
這樣就可以在 data-split-icon 屬性中使用自訂名稱為 github 的圖示了, 例如 :
測試 16 : 將列表清單之項目列分割為兩欄以進行兩個操作 [看原始碼]
<!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">
<style>
.ui-icon-github:after {background-image: url('GitHub-logo.jpg');}
</style>
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page">
<header data-role="header">
<h1>列表清單</h1>
</header>
<article data-role="content">
<ul data-role="listview" data-inset="true" data-split-icon="github">
<li>
<a href="https://jquery.com/">
<h1>jQuery</h1>
<span class="ui-li-aside">最新 v3.5.1</span>
<p>可方便操作 DOM 的 Javascript 函式庫</p>
</a>
<a href="https://github.com/jquery/jquery">GitHub</a>
</li>
<li>
<a href="https://jquerymobile.com/">
<h1>jQuery Mobile</h1>
<span class="ui-li-aside">最新 v1.4.5</span>
<p>用來製作行動網頁 UI 的 Javascript 函式庫</p>
</a>
<a href="https://github.com/jquery/jquery-mobile">GitHub</a>
</li>
<li>
<a href="https://cordova.apache.org/">
<h1>Cordova</h1>
<span class="ui-li-aside">最新 v9.0.0</span>
<p>用來將行動網頁轉成原生 App 的 Javascript 函式庫</p>
</a>
<a href="https://github.com/apache/cordova">GitHub</a>
</li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例為每個項目內容添加第二個超連結 a 元素以指向各函式庫的 GitHub 網頁 (使用自訂的 github 圖示), 第一個超連結則仍然指向官網首頁, 結果如下 :
可見每一個項目 (列) 都被分割成兩欄, 分別對應到兩個超連結, 點左邊主欄會連結到官網首頁, 點右邊欄的圖示則會連結到函式庫的 GitHub 網頁. 此例網址 QR code 如下 :
以上範例全部都只用到 data-role 與 class 屬性, 並未使用 Javascript 程式碼, 下面範例使用 jQuery 程式碼來動態變更 Listview 的項目 :
測試 17 : 動態改變列表清單之項目 [看原始碼]
<!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">
<ul data-role="listview" data-inset="true" id="mylistview">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<a href="#" data-role="button" id="add_btn">新增項目</a>
<a href="#" data-role="button" id="remove_btn">刪除項目</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
<script>
$(document).on("pageinit", "#page1", function(e) {
var i=1;
$("#add_btn").on("click", function(e) {
var mylistview=$("#mylistview");
mylistview.append("<li>新項目" + i + "</li>");
mylistview.listview("refresh");
++i;
});
$("#remove_btn").on("click", function(e) {
$("li").last().remove();
if(i>1) {--i};
});
});
</script>
</section>
</body>
</html>
此例在 Listview 底下放置了兩個按鈕, 按 "新增項目" 鈕會呼叫 append() 方法添加新項目 (利用全域變數 i 增量); 按 "刪除項目" 鈕會呼叫 li 物件集合的 last() 方法取得最後一個項目物件後再呼叫remove() 方法刪除最後一個項目 (利用全域變數 i 減量), 結果如下 :
此例網址 QR code 如下 :
Listview 應該是 jQuery Mobile 最常用的控制項了, 所以花了比較長時間測試.
沒有留言 :
張貼留言