最近在複習 jQuery Mobile 時發現有一個基本 (但並非很重要) 的功能一直沒測試, 那就是換頁特效, 這是利用 jQuery 操控 CSS 的應用, 而 jQuery Mobile 將其包裝成 data-transition 屬性, 當然更方便好用 (雖然我覺得那是花拳繡腿). 本系列測試文章索引參考 :
單檔多頁的 jQuery Mobile 行動網頁透過超連結按鈕在多個頁面中切換, 預設會以 Ajax 方式從頁面池 (page stack) 中取出新頁面, 並將前一頁面丟回頁面池中暫存, 這種頁面切換預設會以 fade 方式進行, 但可利用在超連結按鈕上添加 data-transition 屬性加以改變, 可用之屬性值如下 :
| data-transition 屬性值 | 說明 |
| fade | 淡入效果 (預設) |
| flip | 翻轉 |
| flow | 原頁面縮小移出, 新頁面縮小移入後放大 |
| none | 無特效 |
| pop | 新頁面跳出展開 |
| slide | 原頁面由右至左滑出, 新頁面由右至左滑入 |
| slidedown | 原頁面由上至下滑出, 新頁面由上至下滑入 |
| slidefade | 原頁面由右至左淡出, 新頁面由右至左淡入 |
| slideup | 原頁面由下至上滑出, 新頁面由下至上滑入 |
| turn | 以頁面中心為軸轉換 |
下面測試將上面 10 種換頁特效放在列表清單超連結按鈕中 (id=page1), 按其中項目會以指定效果轉換至第二頁 (id=page2) :
<!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">
<li><a href="#page2" data-transition="fade">Fade</a></li>
<li><a href="#page2" data-transition="flip">Flip</a></li>
<li><a href="#page2" data-transition="flow">Flow</a></li>
<li><a href="#page2" data-transition="pop">Pop</a></li>
<li><a href="#page2" data-transition="slide">Slide</a></li>
<li><a href="#page2" data-transition="slidedown">Slidedown</a></li>
<li><a href="#page2" data-transition="slidefade">Slidefade</a></li>
<li><a href="#page2" data-transition="slideup">Slideup</a></li>
<li><a href="#page2" data-transition="turn">Turn</a></li>
<li><a href="#page2" data-transition="none">None</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><a href="#page1" data-role="button">返回</a></p>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
結果如下 :
此例測試網頁 QR code 如下 :
沒有留言 :
張貼留言