本篇紀錄摺疊面板 (accordion) 測試. 本系列之前的文章參考 :
# jQuery Mobile 學習筆記 (三) : 工具列
# 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 錢途無量 (佳魁, 李科泉)
- 第一次開發跨平台網頁與 App 就上手 (碁峰, 蔡文龍)
摺疊面板的最基本結構是一個可收合的 div 容器, 裡面含有作為標題的 h1~h6 元素以及作為內容的 p 元素, 透過在 div 元素上添加 data-role="collapsible" 屬性使其變成可收合之摺疊面板 :
<div data-role="collapsible">
<h3>標題</h3>
<p>內容</p>
</div>
其中 p 元素所包覆之內容部分預設會被收合隱藏, 而 h1~h6 元素所包覆之標題會被繪製成一個含有加號 "+" 圖示的按鈕, 按此按鈕會將內容展開, 按鈕圖示也會改成減號 "-" 圖示. 例如 :
測試 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" id="page1">
<header data-role="header">
<h1>摺疊面板測試</h1>
</header>
<article data-role="content">
<div data-role="collapsible">
<h3>相思(王維)</h3>
<p>紅豆生南國, 春來發幾枝<br>願君多採擷, 此物最相思</p>
</div>
<div data-role="collapsible">
<h3>靜夜思(李白)</h3>
<p>床前明月光, 疑似地上霜<br>舉頭望明月, 低頭思故鄉</p>
</div>
<div data-role="collapsible">
<h3>秋浦歌(李白)</h3>
<p>白髮三千丈, 緣愁似個長<br>不知明鏡里, 何處得秋霜</p>
</div>
<div data-role="collapsible">
<h3>獨坐敬亭山(李白)</h3>
<p>眾鳥高飛盡, 孤雲獨去閒<br>相看兩不厭, 只有敬亭山</p>
</div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例用折疊面板來收納唐詩, 結果如下 :
此例網址 QR code 為 :
上面的範例中, 每一個區塊預設都是收合的, 如果要強制將某個區塊預設改為展開可添加 data-collapsed="false" 屬性 (亦即, 沒有此屬性相當於設為 collapsed="true" 收合狀態) :
測試 1-1 : 用 data-collapsed="false" 強制開啟區塊 [看原始碼]
<!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">
<div data-role="collapsible" data-collapsed="false">
<h3>相思(王維)</h3>
<p>紅豆生南國, 春來發幾枝<br>願君多採擷, 此物最相思</p>
</div>
<div data-role="collapsible" data-collapsed="false">
<h3>靜夜思(李白)</h3>
<p>床前明月光, 疑似地上霜<br>舉頭望明月, 低頭思故鄉</p>
</div>
<div data-role="collapsible">
<h3>秋浦歌(李白)</h3>
<p>白髮三千丈, 緣愁似個長<br>不知明鏡里, 何處得秋霜</p>
</div>
<div data-role="collapsible">
<h3>獨坐敬亭山(李白)</h3>
<p>眾鳥高飛盡, 孤雲獨去閒<br>相看兩不厭, 只有敬亭山</p>
</div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例將前兩個區塊用 data-collapsed="false" 強制打開, 結果如下 :
此例網址 QR code 為 :
上面兩個範例中的每一個可折疊區塊都是獨立的, 亦即展開與縮合都互不相干. 如果要製作具有手風琴 (accordion) 效果的容器就要在這些可折疊區塊外面再包覆一層 div 元素, 並且添加 data-role="collapsible-set" 屬性以便將裡面的所有可折疊區塊綁在一起, 當其中一個展開時, 其他區塊都縮合, 網頁結構如下 :
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>標題</h3>
<p>內容</p>
</div>
</div>
例如可將上面範例改成如下具有手風琴效果的折疊面板 :
測試 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">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>相思(王維)</h3>
<p>紅豆生南國, 春來發幾枝<br>願君多採擷, 此物最相思</p>
</div>
<div data-role="collapsible">
<h3>靜夜思(李白)</h3>
<p>床前明月光, 疑似地上霜<br>舉頭望明月, 低頭思故鄉</p>
</div>
<div data-role="collapsible">
<h3>秋浦歌(李白)</h3>
<p>白髮三千丈, 緣愁似個長<br>不知明鏡里, 何處得秋霜</p>
</div>
<div data-role="collapsible">
<h3>獨坐敬亭山(李白)</h3>
<p>眾鳥高飛盡, 孤雲獨去閒<br>相看兩不厭, 只有敬亭山</p>
</div>
</div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例是在上面範例的可折疊面板外面再套一層具有 data-role="collapsible-set" 屬性的 div 元素來約束每一個可折疊面板同時只有一個開啟, 其餘全部收合, 結果如下 :
此例網址 QR code 為 :
沒有留言 :
張貼留言