2020年10月23日 星期五

jQuery Mobile 學習筆記 (九) : 網格排版

 本篇紀錄網格排版測試, 本系列之前的文章參考 :

jQuery Mobile 學習筆記 (三) : 工具列
jQuery Mobile 學習筆記 (四) : 對話框


jQuery Mobile 提供四種網格樣式類別以支援 CSS3 多欄版面配置 : 
  • ui-grid-a : 兩欄版面
  • ui-grid-b : 三欄版面
  • ui-grid-c : 四欄版面
  • ui-grid-d : 五欄版面
因為最多支援五欄版面, 因此 jQuery Mobile 提供了 ui-block-a/b/c/d/e 五個樣式類別給每一個欄位的容器使用, 結構如下圖所示 : 




兩欄網格之網頁結構 (1*2) :

<div class="ui-grid-a">
  <div class="ui-block-a">第1列第1欄</div>
  <div class="ui-block-b">第1列第2欄</div>
</div>

三欄網格之網頁結構 (1*3) : 

<div class="ui-grid-b">
  <div class="ui-block-a">第1列第1欄</div>
  <div class="ui-block-b">第1列第2欄</div>
  <div class="ui-block-c">第1列第3欄</div>
</div>

四欄網格之網頁結構 (1*4) : 

<div class="ui-grid-c">
  <div class="ui-block-a">第1列第1欄</div>
  <div class="ui-block-b">第1列第2欄</div>
  <div class="ui-block-c">第1列第3欄</div>  
  <div class="ui-block-d">第1列第4欄</div>
</div>

五欄網格之網頁結構 (1*5) : 

<div class="ui-grid-c">
  <div class="ui-block-a">第1列第1欄</div>
  <div class="ui-block-b">第1列第2欄</div>
  <div class="ui-block-c">第1列第3欄</div>  
  <div class="ui-block-d">第1列第4欄</div>
  <div class="ui-block-e">第1列第5欄</div>
</div>

以上結構都是 1*n (1 列 n 欄), 多列排版只要重複 ui-block 樣式即可, 例如 2 列 2 欄為 : 

<div class="ui-grid-a">
  <div class="ui-block-a">第1列第1欄</div>
  <div class="ui-block-b">第1列第2欄</div>
  <div class="ui-block-a">第2列第1欄</div>
  <div class="ui-block-b">第2列第2欄</div>
</div>

第二次出現的 ui-block-a/b 為第二列, 第三次為第三列, 其餘依此類推. 

例如 : 



<!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 class="ui-grid-a">
          <div class="ui-block-a">
            <a href="#" data-role="button" data-icon="action">動作</a>
            <a href="#" data-role="button" data-icon="alert">注意</a>
            <a href="#" data-role="button" data-icon="arrow-l">左箭頭</a>
            <a href="#" data-role="button" data-icon="arrow-u">上箭頭</a>
          </div>
          <div class="ui-block-b">
            <a href="#" data-role="button" data-icon="arrow-d">下箭頭</a>        
            <a href="#" data-role="button" data-icon="arrow-d-l">下左箭頭</a>
            <a href="#" data-role="button" data-icon="arrow-d-r">下右箭頭</a>
            <a href="#" data-role="button" data-icon="arrow-r">右箭頭</a>
          </div>
        </div>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

此例在兩個欄位中各放置 4 個按鈕, 結果如下 : 




此例網址 QR code 如下 :



下面是三欄的網格版面範例 : 



<!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 class="ui-grid-b">
          <div class="ui-block-a">
            <a href="#" data-role="button" data-icon="action">動作</a>
            <a href="#" data-role="button" data-icon="alert">注意</a>
            <a href="#" data-role="button" data-icon="arrow-l">左箭頭</a>
            <a href="#" data-role="button" data-icon="arrow-u">上箭頭</a>
          </div>
          <div class="ui-block-b">
            <a href="#" data-role="button" data-icon="arrow-d">下箭頭</a>        
            <a href="#" data-role="button" data-icon="arrow-d-l">下左箭頭</a>
            <a href="#" data-role="button" data-icon="arrow-d-r">下右箭頭</a>
            <a href="#" data-role="button" data-icon="arrow-r">右箭頭</a>
          </div>
          <div class="ui-block-c">
            <a href="#" data-role="button" data-icon="arrow-u-l">上左箭頭</a>
            <a href="#" data-role="button" data-icon="arrow-u-r">上右箭頭</a>
            <a href="#" data-role="button" data-icon="audio">音訊</a>
            <a href="#" data-role="button" data-icon="back">返回</a>
          </div>
        </div>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

結果如下 : 




此例網址 QR code 如下 :


注意, 上例雖然看起來似乎是 4*3 版面, 其實是 1*3, 每欄的四個按鈕是放在一列中. 如果要改成 4*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" id="page1">
      <header data-role="header">
        <h1>網格排版測試</h1>
      </header>
      <article data-role="content">
        <div class="ui-grid-b">
          <div class="ui-block-a">
            <a href="#" data-role="button" data-icon="action">動作</a>
          </div>
          <div class="ui-block-b">
            <a href="#" data-role="button" data-icon="arrow-d">下箭頭</a>  
          </div>
          <div class="ui-block-c">
            <a href="#" data-role="button" data-icon="arrow-u-l">上左箭頭</a>
          </div>
          <div class="ui-block-a">
            <a href="#" data-role="button" data-icon="alert">注意</a>
          </div>
          <div class="ui-block-b"> 
            <a href="#" data-role="button" data-icon="arrow-d-r">下右箭頭</a>
          </div>
          <div class="ui-block-c">
            <a href="#" data-role="button" data-icon="arrow-u-r">上右箭頭</a>
          </div>
          <div class="ui-block-a">
            <a href="#" data-role="button" data-icon="arrow-l">左箭頭</a>
          </div>
          <div class="ui-block-b"> 
            <a href="#" data-role="button" data-icon="arrow-d-l">下左箭頭</a>
          </div>
          <div class="ui-block-c">
            <a href="#" data-role="button" data-icon="audio">音訊</a>
          </div>
          <div class="ui-block-a">
            <a href="#" data-role="button" data-icon="arrow-u">上箭頭</a>
          </div>
          <div class="ui-block-b"> 
            <a href="#" data-role="button" data-icon="arrow-r">右箭頭</a>
          </div>
          <div class="ui-block-c">
            <a href="#" data-role="button" data-icon="back">返回</a>
          </div>
        </div>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

此例 ui-block-a/b/c 重複四次, 因此為 4 列 3 行版面, 結果如下 :




雖然結果與上面測試 2 一樣, 但實際上兩者版面結構不同, 上例是 1*3 網格, 此例為 4*3 網格. 此例網址 QR code 如下 :


沒有留言:

張貼留言