2020年9月5日 星期六

jQuery UI 學習筆記 (十三) : 控制群組 (ControlGroup)

最近在寫工作用的資訊系統, 順便複習 jQueryUI 用法, 發現剩下幾個元件還沒測試, 因此想一口氣測完, 先來測試控制群組 (Control Group), 其 API 與教學文件參考 :

# https://jqueryui.com/controlgroup/
# http://api.jqueryui.com/controlgroup/

jQuery UI 參考書籍如下 :
  1. jQuery UI 使用者介面設計 (歐萊里, Studio Tib. 譯)
  2. jQuery UI 與 Plugin 開發實戰 (悅知文化, 吳哲穎譯)
  3. jQuery 全能權威指南 (上奇, 張亞飛)
  4. Pro jQuery 2.0 2nd ed. (Apress, Freeman Adam)
  5. jQuery UI in Action (Manning, TJ Vantoll)
  6. jQuery 應用程式設計極速上手 (上奇, 羅友志譯)
  7. 打造 jQuery 網頁風暴 (張子秋, 佳魁)
所謂控制群組 (Control Group) 就是將下列表單元素用一個 div 元件包覆起來組合在一個方塊中, 需要的話也可以在最外層再套上 fieldset 元素使其具有整體的視覺效果 :
  • 按鈕 : a, button, input [type=button], input [type=submit], input [type=reset] 元素
  • 單選圓鈕 : input [type=radio] 元素
  • 核取方塊 : input [type=checkbox] 元素
  • 下拉式選單 : select-option 元素
  • 微調器 : input [class=ui-spinner-input] 元素
  • 標籤 : label [calss=ui-controlgroup-label] 元素
注意, 微調器只要加上 class="ui-spinner-input" 樣式類別即可, 不需要指定 type 屬性, 控制群組就會將其改裝為微調器外觀. 而標籤 label 元素則必須加上 class="ui-controlgroup-label" 樣式類別.

控制群組 Control Group 與 Buttonset 很像, 但 Buttonset 只是用來將 radio 與 checkbox 包裹在一起並轉成按鈕群組而已; 而 Control Group 則用來包裹所有表單元件且仍然保持原來外觀不變, 只是將它們變成一個群組而已, 關於 Buttonset 參考 :

# jQuery UI 學習筆記 (八) : 按鈕群組 (Buttonset)

控制群組的 HTML 網頁結構如下 :

<div id="controlgroup">
  ~~~表單元件~~~
</div>

或

<fieldset>
  <legend>標題</legend>
  <div id="controlgroup">
    ~~~表單元件~~~
  </div>
</fieldset>

最重要的是要在 Javascript 中取得此 div 元件, 然後呼叫 controlgroup() 方法 :

$("#controlgroup").controlgroup();

這樣就可以建立一個 Control Group 元件了, 預設是水平擺放內部的表單元件, 例如 :


測試 1 : 預設水平的控制群組 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size:10px;
        }
    </style>
  </head>
  <body>
    <div id="controlgroup1">
      <!-- radio -->
      <label for="r1">男</label>
      <input type="radio" name="gender" id="r1" value="男">
      <label for="r2">女</label>
      <input type="radio" name="gender" id="r2" value="女">
      <!-- checkbox -->
      <label for="c1">股票</label>
      <input type="checkbox" name="investment" id="c1" value="股票">
      <label for="c2">基金</label>
      <input type="checkbox" name="investment" id="c2" value="基金">
      <label for="c3">黃金</label>
      <input type="checkbox" name="investment" id="c3" value="黃金">
      <!-- selectmenu -->
      <select id="risk" name="risk">
        <option value="positive">積極型</option>
        <option value="robust">穩健型</option>
        <option value="conservative">保守型</option>
      </select>
      <!-- spinner -->
      <label class="ui-controlgroup-label" for="spinner">投資經驗</label>
      <input class="ui-spinner-input" id="spinner" name="invest_years">
    </div><br><br>
    <div id="controlgroup2">
      <!-- button -->
      <a href="#">a 按鈕</a>
      <input type="button" value="input button 按鈕">
      <input type="submit" value="input submit 按鈕">
      <input type="reset" value="input reset 按鈕">
      <button>button 按鈕</button>
    </div>
    <script>
      $(function(){
        $("#controlgroup1").controlgroup();
        $("#controlgroup2").controlgroup(); 
        });
    </script>
  </body>
</html>

此例為了不讓寬度太長, 將按鈕元件放到第二個控制群組, 結果如下 :




可見控制群組內的表單元件預設是水平排列, 可以用 direction: "vertical" 選項設定為垂直排列 :


測試 2 : 垂直排列的控制群組 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size:10px;
        }
    </style>
  </head>
  <body>
    <div id="controlgroup1">
      <!-- radio -->
      <label for="r1">男</label>
      <input type="radio" name="gender" id="r1" value="男">
      <label for="r2">女</label>
      <input type="radio" name="gender" id="r2" value="女">
      <!-- checkbox -->
      <label for="c1">股票</label>
      <input type="checkbox" name="investment" id="c1" value="股票">
      <label for="c2">基金</label>
      <input type="checkbox" name="investment" id="c2" value="基金">
      <label for="c3">黃金</label>
      <input type="checkbox" name="investment" id="c3" value="黃金">
      <!-- selectmenu -->
      <select id="risk" name="risk">
        <option value="positive">積極型</option>
        <option value="robust">穩健型</option>
        <option value="conservative">保守型</option>
      </select>
      <!-- spinner -->
      <label class="ui-controlgroup-label" for="spinner">投資經驗</label>
      <input class="ui-spinner-input" id="spinner" name="invest_years">
    </div><br><br>
    <div id="controlgroup2">
      <!-- button -->
      <a href="#">a 按鈕</a>
      <input type="button" value="input button 按鈕">
      <input type="submit" value="input submit 按鈕">
      <input type="reset" value="input reset 按鈕">
      <button>button 按鈕</button>
    </div>
    <script>
      $(function(){
        $("#controlgroup1").controlgroup({"direction": "vertical"});
        $("#controlgroup2").controlgroup({"direction": "vertical"});
        });
    </script>
  </body>
</html>

此例中的兩個控制群組都傳入一個選項物件 {"direction": "vertical"}, 這會使控制群組內的表單元件垂直排列, 結果如下 :




水平排列時每一個表單元件的高度可能會不同 (中英文字型大小不同問題), 但在垂直排列時就無此問題了, 每一個寬度都一樣.

如果要強化這是一個群組, 可以在控制群組 div 元素外面再套一個 fieldset-legend 元素, 例如 :


測試 3 : 外面包覆 fieldset 的垂直排列控制群組 (1) [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size:10px;
        }
    </style>
  </head>
  <body>
    <fieldset style="width:0px">
      <legend>垂直控制群組</legend>
      <div id="controlgroup1">
        <!-- radio -->
        <label for="r1">男</label>
        <input type="radio" name="gender" id="r1" value="男">
        <label for="r2">女</label>
        <input type="radio" name="gender" id="r2" value="女">
        <!-- checkbox -->
        <label for="c1">股票</label>
        <input type="checkbox" name="investment" id="c1" value="股票">
        <label for="c2">基金</label>
        <input type="checkbox" name="investment" id="c2" value="基金">
        <label for="c3">黃金</label>
        <input type="checkbox" name="investment" id="c3" value="黃金">
        <!-- selectmenu -->
        <select id="risk" name="risk">
          <option value="positive">積極型</option>
          <option value="robust">穩健型</option>
          <option value="conservative">保守型</option>
        </select>
        <!-- spinner -->
        <label class="ui-controlgroup-label" for="spinner">投資經驗</label>
        <input class="ui-spinner-input" id="spinner" name="invest_years">
      </div><br><br>
      <div id="controlgroup2">
        <!-- button -->
        <a href="#">a 按鈕</a>
        <input type="button" value="input button 按鈕">
        <input type="submit" value="input submit 按鈕">
        <input type="reset" value="input reset 按鈕">
        <button>button 按鈕</button>
      </div>
    </fieldset>
    <script>
      $(function(){
        $("#controlgroup1").controlgroup({"direction": "vertical"});
        $("#controlgroup2").controlgroup({"direction": "vertical"});
        });
    </script>
  </body>
</html>

結果如下 :




注意, 這裡 fieldset 元素添加了 "width: 0px" 的樣式, 這麼做的原因是 fieldset 的寬度預設是上一層父元素 body 的寬度, 所以 fieldset 會跟文件同寬, 將其 width 樣式指定為 0px 即可使 fieldset 寬度縮到與表單元件同寬.

其次, legend 元素所包覆的標題文字與控制群組內的文字比起來小很多, 原因在於 body 樣式裡的 font-size: 10px 將非 jQuery UI 元件的文字都限縮在 10px, 解決之道是不要用固定寬度來設定文件文字大小, 應該使用 jQuery UI 元件樣式類別 .ui-widget 來套用比例字型大小才對, 參考 :

# why jquery's ui.css files's font-sizes are bigger than normal?

根據此文建議將上面範例 3 修改為如下範例 4 :


測試 4 : 外面包覆 fieldset 的垂直排列控制群組 (2) [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      .ui-widget {font-size:80%;}
    </style>
  </head>
  <body>
    <fieldset style="width:0px">
      <legend>垂直控制群組</legend>
      <div id="controlgroup1">
        <!-- radio -->
        <label for="r1">男</label>
        <input type="radio" name="gender" id="r1" value="男">
        <label for="r2">女</label>
        <input type="radio" name="gender" id="r2" value="女">
        <!-- checkbox -->
        <label for="c1">股票</label>
        <input type="checkbox" name="investment" id="c1" value="股票">
        <label for="c2">基金</label>
        <input type="checkbox" name="investment" id="c2" value="基金">
        <label for="c3">黃金</label>
        <input type="checkbox" name="investment" id="c3" value="黃金">
        <!-- selectmenu -->
        <select id="risk" name="risk">
          <option value="positive">積極型</option>
          <option value="robust">穩健型</option>
          <option value="conservative">保守型</option>
        </select>
        <!-- spinner -->
        <label class="ui-controlgroup-label" for="spinner">投資經驗</label>
        <input class="ui-spinner-input" id="spinner" name="invest_years">
      </div><br><br>
      <div id="controlgroup2">
        <!-- button -->
        <a href="#">a 按鈕</a>
        <input type="button" value="input button 按鈕">
        <input type="submit" value="input submit 按鈕">
        <input type="reset" value="input reset 按鈕">
        <button>button 按鈕</button>
      </div>
    </fieldset>
    <script>
      $(function(){
        $("#controlgroup1").controlgroup({"direction": "vertical"});
        $("#controlgroup2").controlgroup({"direction": "vertical"});
        });
    </script>
  </body>
</html>

結果如下 :




果然這樣整個文件內的字型大小就一樣的, 以後這就是 jQuery UI 網頁測試的範本啦!

張貼者： 於
標籤： , ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )