2019年3月25日 星期一

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

按鈕群組 Buttonset 用途為將原本之單選圓鈕 radio 與核取方塊 checkbox 轉變成一組單選或多選之按鈕形態. API 參考 :

# http://api.jqueryui.com/buttonset/

本篇測試參考了如下書籍 :
  1. jQuery UI 使用者介面設計 (歐萊里, Studio Tib. 譯)
  2. jQuery UI 與 Plugin 開發實戰 (悅知文化, 吳哲穎譯)
  3. jQuery 全能權威指南 (上奇, 張亞飛)
原始的 HTML 單選 (radio) 與多選 (checkbox) 之操作如下 :


測試 1 : Buttonset 測試 : 原始的 HTML 單選與多選鈕 [看原始碼]

HTML 部分 :

  <p>請選擇最討厭的水果 :</p>
  <p>
    <input type="radio" name="hatest_fruit" value="芭樂"> 芭樂
    <input type="radio" name="hatest_fruit" value="香蕉"> 香蕉
    <input type="radio" name="hatest_fruit" value="葡萄"> 葡萄
    <input type="radio" name="hatest_fruit" value="榴槤"> 榴槤
    <input type="radio" name="hatest_fruit" value="木瓜"> 木瓜
  </p>
  <p>請選擇最常吃的水果 :</p>
  <p>
    <input type="checkbox" name="often_fruit" value="芭樂"> 芭樂
    <input type="checkbox" name="often_fruit" value="香蕉"> 香蕉
    <input type="checkbox" name="often_fruit" value="葡萄"> 葡萄
    <input type="checkbox" name="often_fruit" value="榴槤"> 榴槤
    <input type="checkbox" name="often_fruit" value="木瓜"> 木瓜
  </p>
  <button id="ok">確定</button>

jQuery 部分 :

      $("#ok").button();
      $("#ok").click(function(e) {
        var hatest_fruit=$("[name=hatest_fruit]:radio:checked").val();
        var arr=[];
        $("[name=often_fruit]:checkbox:checked").each(function(){
          arr.push($(this).val());
          });
        var often_fruit=arr.join();
        var msg="您最討厭的水果是 : " + hatest_fruit + "\n" +
                "您最常吃的水果是 : " + often_fruit;
        alert(msg);
        });




此例的 radio 與 checkbox 群組是原始的 HTML 外觀, 同組的選項 name 屬性值必須相同. 當按鈕按下時以 jQuery 選擇器找出被選的 (checked) 選項, radio 使用 val() 取值, 因為是單選, 所以會傳回一個字串, 即被選擇的選項之 value 屬性值. 注意, radio 若沒有選取將傳回 undefined, 不是空字串. 其次, 因 checkbox 是複選, 因此選擇器將傳回一個集合, 可用工廠函數 each() 迭代取出被選擇之選項值放入陣列裡.

可以用選擇器取得 input 元素後呼叫 button() 方法將 radio 或 checkbok 轉變成單選或多選按鈕 :

$("input").button();

但不可以用上面的 HTML 格式去轉, jQuery UI 要求 radio 與 checkbox 以 label 元素呈現其標籤才能順利轉換, 否則會報錯 :

<input type="radio" name="option_name" id="id1" value="v1">
    <label for="id1">v1</label>
</input>

<input type="checkbox" name="option_name" id="id1" value="v1">
    <label for="id1">v1</label>
</input>

亦即每一個選項都要有 id 屬性, 以便讓 label 的 for 指向 radio/checkbox 選項之 id. 另外每一個選項都要有 value 屬性, 否則取值時會得到 "on".  例如 :


測試 2 : Buttonset 測試 : 讓 radio/checkbox 變成按鈕 [看原始碼]

HTML 部分 :

  <p>請選擇最討厭的水果 :</p>
  <p>
    <input type="radio" name="hatest_fruit" id="h1" value="芭樂">
    <label for="h1">芭樂</label></input>
    <input type="radio" name="hatest_fruit" id="h2" value="香蕉">
    <label for="h2">香蕉</label></input>
    <input type="radio" name="hatest_fruit" id="h3" value="葡萄">
    <label for="h3">葡萄</label></input>
    <input type="radio" name="hatest_fruit" id="h4" value="榴槤">
    <label for="h4">榴槤</label></input>
    <input type="radio" name="hatest_fruit" id="h5" value="木瓜">
    <label for="h5">木瓜</label></input>
  </p>
  <p>請選擇最常吃的水果 :</p>
  <p>
    <input type="checkbox" name="often_fruit" id="o1" value="芭樂">
    <label for="o1">芭樂</label></input>
    <input type="checkbox" name="often_fruit" id="o2" value="香蕉">
    <label for="o2">香蕉</label></input>
    <input type="checkbox" name="often_fruit" id="o3" value="葡萄">
    <label for="o3">葡萄</label></input>
    <input type="checkbox" name="often_fruit" id="o4" value="榴槤">
    <label for="o4">榴槤</label></input>
    <input type="checkbox" name="often_fruit" id="o5" value="木瓜">
    <label for="o5">木瓜</label></input>
  </p>
  <button id="ok">確定</button>

jQuery 部分 :

      $("#ok").button();
      $("input").button();
      $("#ok").click(function(e) {
        var hatest_fruit=$("[name=hatest_fruit]:radio:checked").val();
        var arr=[];
        $("[name=often_fruit]:checkbox:checked").each(function(){
          arr.push($(this).val());
          });
        var often_fruit=arr.join();
        var msg="您最討厭的水果是 : " + hatest_fruit + "\n" +
                "您最常吃的水果是 : " + often_fruit;
        alert(msg);
        });




此例每一個 radio/checkbox 的選項的顯示文字全部都改用 label 元素後, 再用 $("input") 選擇器選取每一個 input 元素, 呼叫 input() 即可 radio/checkbox 全部改成按鈕, 這只是外觀改變而已, radio 仍是單選, checkbox 仍是複選.

但是將 radio/checkbox 轉成按鈕看起來這些按鈕似乎是獨立的, 容易造成誤會, 這時就是 buttonset 派上用場的時候了, 它可將這些同一組的選項綁成在外觀上綁在一起, 方法是用 div 將選項包在裡面, 然後用選擇器選取 div 元素後呼叫 buttonset() 即可, 例如 :


測試 3 : Buttonset 測試 : 用 buttonset() 將選項綁成一組按鈕 [看原始碼]

HTML 部分 :

  <p>請選擇最討厭的水果 (單選) :</p>
  <div>
    <input type="radio" name="hatest_fruit" id="h1" value="芭樂">
    <label for="h1">芭樂</label></input>
    <input type="radio" name="hatest_fruit" id="h2" value="香蕉">
    <label for="h2">香蕉</label></input>
    <input type="radio" name="hatest_fruit" id="h3" value="葡萄">
    <label for="h3">葡萄</label></input>
    <input type="radio" name="hatest_fruit" id="h4" value="榴槤">
    <label for="h4">榴槤</label></input>
    <input type="radio" name="hatest_fruit" id="h5" value="木瓜">
    <label for="h5">木瓜</label></input>
  </div>
  <p>請選擇最常吃的水果 (複選) :</p>
  <div>
    <input type="checkbox" name="often_fruit" id="o1" value="芭樂">
    <label for="o1">芭樂</label></input>
    <input type="checkbox" name="often_fruit" id="o2" value="香蕉">
    <label for="o2">香蕉</label></input>
    <input type="checkbox" name="often_fruit" id="o3" value="葡萄">
    <label for="o3">葡萄</label></input>
    <input type="checkbox" name="often_fruit" id="o4" value="榴槤">
    <label for="o4">榴槤</label></input>
    <input type="checkbox" name="often_fruit" id="o5" value="木瓜">
    <label for="o5">木瓜</label></input>
  </div>
  <button id="ok">確定</button>

jQuery 部分 :

      $("#ok").button();
      $("input").button();
      $("div").buttonset();
      $("#ok").click(function(e) {
        var hatest_fruit=$("[name=hatest_fruit]:radio:checked").val();
        var arr=[];
        $("[name=often_fruit]:checkbox:checked").each(function(){
          arr.push($(this).val());
          });
        var often_fruit=arr.join();
        var msg="您最討厭的水果是 : " + hatest_fruit + "\n" +
                "您最常吃的水果是 : " + often_fruit;
        alert(msg);
        });




此例是將上面測試 2 中 input 選項的父元素 p 改成 div, 然後用 $("div") 選取了全部 div 元素後呼叫 buttonset(). 如果網頁中除 radio/checkbox 群組外還有很多其他 div 元素, 選擇器 $("div") 就太廣泛, 可以為需要用 buttonset 包成一組的 radio/checkbox 選項群組 div 指定 class 或 id, 再以選擇器鎖定這些需要群組話的 class/id 即可.

群組化的元素也不限定 div, 也可以用 p, span 或 fieldset, 例如 :


測試 4 : Buttonset 測試 : 用 fieldset 將選項綁成一組按鈕 [看原始碼]

HTML 部分 :

  <fieldset class="optionset">
    <legend>請選擇最討厭的水果 (單選) :</legend>
    <input type="radio" name="hatest_fruit" id="h1" value="芭樂">
    <label for="h1">芭樂</label></input>
    <input type="radio" name="hatest_fruit" id="h2" value="香蕉">
    <label for="h2">香蕉</label></input>
    <input type="radio" name="hatest_fruit" id="h3" value="葡萄">
    <label for="h3">葡萄</label></input>
    <input type="radio" name="hatest_fruit" id="h4" value="榴槤">
    <label for="h4">榴槤</label></input>
    <input type="radio" name="hatest_fruit" id="h5" value="木瓜">
    <label for="h5">木瓜</label></input>
  </fieldset><br><br>
  <fieldset class="optionset">
    <legend>請選擇最常吃的水果 (複選) :</legend>
    <input type="checkbox" name="often_fruit" id="o1" value="芭樂">
    <label for="o1">芭樂</label></input>
    <input type="checkbox" name="often_fruit" id="o2" value="香蕉">
    <label for="o2">香蕉</label></input>
    <input type="checkbox" name="often_fruit" id="o3" value="葡萄">
    <label for="o3">葡萄</label></input>
    <input type="checkbox" name="often_fruit" id="o4" value="榴槤">
    <label for="o4">榴槤</label></input>
    <input type="checkbox" name="often_fruit" id="o5" value="木瓜">
    <label for="o5">木瓜</label></input>
  </fieldset><br><br>
  <button id="ok">確定</button>

jQuery 部分 :

      $("#ok").button();
      $("input").button();
      $(".optionset").buttonset();
      $("#ok").click(function(e) {
        var hatest_fruit=$("[name=hatest_fruit]:radio:checked").val();
        var arr=[];
        $("[name=often_fruit]:checkbox:checked").each(function(){
          arr.push($(this).val());
          });
        var often_fruit=arr.join();
        var msg="您最討厭的水果是 : " + hatest_fruit + "\n" +
                "您最常吃的水果是 : " + often_fruit;
        alert(msg);
        });




此例以 fieldset 當作 radio/checkbox 選項的容器, 且均設為同樣的樣式等級 class="optionset", 這樣就可以用 $(".optionset") 選擇器選取這兩組選項, 再呼叫 buttonset() 變成群組化按鈕.

張貼者： 於
標籤： , ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )