2020年12月5日 星期六

jQuery Mobile 學習筆記 (十二) : 側邊欄面板

側邊欄面板是頁面中平時隱藏不顯示, 用超連結按鈕連結時才會出現的 div 或 section 區塊容器, 顯現的方式有 overlay (覆蓋), reveal, 以及 push (推開) 三種方式, 基本結構如下 : 

    <div data-role="page" id="page1">
      <div id="overlay" data-role="panel" data-position="left" data-display="overlay">
        <a href="#" data-role="button" data-rel="close">關閉</a>
      </div>
      <div data-role="header">
      ....
      </div>
      <div data-role="content">
        <a href="#overlay" data-role="button" data-rel="close">Overlay</a>
      </div>
      <div data-role="footer">
      ....
      </div>
   </div>

也可以放在頁面結構最後面, 除了最前與最後之其他地方不會動作 : 

    <div data-role="page" id="page1">
      <div data-role="header">
      ....
      </div>
      <div data-role="content">
        <a href="#overlay" data-role="button" data-rel="close">Overlay</a>
      </div>
      <div data-role="footer">
      ....
      </div>
      <div id="overlay" data-role="panel" data-position="left" data-display="overlay">
        <a href="#" data-role="button" data-rel="close">關閉</a>
      </div>
   </div>

參考 :


關於側邊欄結構摘要如下 :
  • 必須有 data-role="panel" 屬性
  • 必須放在該頁面所有內容的最前面或最後面
  • 可以使用 data-position="left(預設)/right" 指定側邊欄出現之位置
  • 可以使用 data-display="overlay/reveal(預設)/push" 指定側邊欄面板出現的方式 
此系列之前的測試文章參考 :

下面測試是從 "學好跨平台網頁設計第二版 (碁峰, 文淵閣工作室)" 這本書第 16.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>
    <!-- 第一頁頁面 -->
    <div data-role="page" id="page1">
      <!-- 左方覆蓋主版之側邊欄 (overlay) -->
      <div id="overlay" data-role="panel" data-position="left" data-display="overlay">
        <h1>Overlay</h1>
        <a href="#" data-role="button" data-rel="close">關閉</a>
      </div>
      <!-- 右方展開主版之側邊欄 (reveal) -->
      <div id="reveal" data-role="panel" data-position="right" data-display="reveal">
        <h1>Reveal<h1>
        <a href="#" data-role="button" data-rel="close">關閉</a>
      </div>
      <!-- 左方推開主版之側邊欄 (push) -->
      <div id="push" data-role="panel" data-position="left" data-display="push">
        <h1>Push</h1>
        <a href="#" data-role="button" data-rel="close">關閉</a>
      </div>
      <div data-role="header">
        <h1>側邊欄面板測試</h1>
      </div>
      <div data-role="content">
        <a href="#overlay" data-role="button" data-rel="close">Overlay</a>
        <a href="#reveal" data-role="button" data-rel="close">Reveal</a>
        <a href="#push" data-role="button" data-rel="close">Push</a>        
      </div>
      <div data-role="footer">
        <h3>頁尾</h3>
      </div>
    </div>
  </body>
</html>

分別按頁面中的三個按鈕會讓原本隱藏的側邊欄以三種不同方式出現, 結果如下 : 



Overlay

Reveal

Push


此範例網址 QR code 如下 :




下面範例則是將側邊欄放在頁面最底下, 效果完全一樣 :



此範例網址 QR code 如下 :




於

沒有留言:

張貼留言