2019年3月25日 星期一

jQuery UI 學習筆記 (九) : 單選與複選按鈕 (CheckboxRadio)

上一篇測試 "jQuery UI 學習筆記 (八) : 按鈕群組 (Buttonset) " 以 buttonset() 將 radio/checkbox 的選項轉變成按鈕群組, 使選項具有主題布景色彩; 但是可能需在提示文字中加註 "單選" 或 "複選", 避免被誤認為是一般按鈕.

可否在這些選項按鈕上保留 radio 單選圓鈕與 checkbox 多選方塊的圖樣, 以便與一般按鈕有明顯區隔呢? 可以的, 可呼叫 checkboxradio() 使 radio/checkbox 轉變成具有圓鈕與核取方塊的按鈕群組.

Checkboxradio 的API 與教學文件參考 :

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

本篇測試參考了如下書籍 :
  1. jQuery UI 使用者介面設計 (歐萊里, Studio Tib. 譯)
  2. jQuery UI 與 Plugin 開發實戰 (悅知文化, 吳哲穎譯)
  3. jQuery 全能權威指南 (上奇, 張亞飛)
將 radio/checkbox 轉變成 CheckboxRadio 按鈕元件只要用選擇器選取全部 input 元素, 再呼叫 checkboxradio() 方法即可 :

$("input").checkboxradio(); 

這樣雖然會選取全部 input 元素, 不過沒有關係, jQuery UI 會自動找尋 type=radio 與 type=checkbox 的元素進行渲染, 其他 input 元素不會受到影響, 例如 :


測試 1 : CheckboxRadio 測試 : checkbox 勾勾無顯示 [看原始碼]

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><br>
  <button id="ok">確定</button>

jQuery 部分 :

      $("#ok").button();
      $("input").checkboxradio();
      $("#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);
        });




注意, checkbox 按鈕有點奇怪, 勾選後按鈕變成紅色, 但打勾卻消失, 只有滑鼠 hover 滑到選項按鈕上面時才會出現勾勾. 但這是因為選用 jQuery UI 主題背景 hot-sneaks 的關係, 若改用其他主題就不會, 例如用 base 或 eggplant 等主題就不會 :

  <link id="theme" href="themes/hot-sneaks/jquery-ui.min.css" rel="stylesheet">

測試 2 : CheckboxRadio 測試 : checkbox 勾勾有顯示 [看原始碼]

<link href="themes/base/jquery-ui.min.css" rel="stylesheet">




事實上, jQuery UI 25 個預設主題布景中有 16 個有勾勾被蓋掉情形, 下列範例使用下拉式選單切換主題布景來測試, 這是透過給樣式主題的 link 元素設 id, 然後用 SelectMenu 下拉式選單的 selectmenuchange 事件來切換主題名稱, 參考 :

# jQuery UI 學習筆記 (一) : 主題布景 (Themes)


測試 3 : CheckboxRadio 測試 : 主題布景切換 [看原始碼]

  <link id="theme" href="themes/eggplant/jquery-ui.min.css" rel="stylesheet">




這些按鈕看起來似乎是獨立的, 可以選取這些選項呼叫 buttonset() 將這些選項按鈕都變成按鈕群組, 參考 :

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

例如 :

測試 4 : CheckboxRadio 測試 : 呼叫 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><br><br>
  <button id="ok">確定</button>

jQuery 部分 :

      $("#ok").button();
      $("input").checkboxradio();
      $("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);
        });




此例結合了 checkboxradio 與 buttonset 功能, 讓 radio/checkbox 能在美化視覺效果外還能保持原始 HTML 介面.

Checkradio 提供選項, 方法, 以及事件對 radio/checkbox 進行操控, 常用選項如下表 :

 常用 option 說明
 classes 對 ui-checkbox 樣式 class 指定額外樣式
 disabled 不可用狀態 (true/false, 預設 false)
 icon 是否要顯示 radio/checkbox 圖像 (true/false, 預設 false) 

常用方法如下表 :

 常用 method 說明
 option 取得或設定選項之值
 disable 禁能 (等於 disabled 屬性=True)
 enable 致能 (等於 disabled 屬性=False)
 refresh 更新元件之視覺狀態 (checked 或 disabled)

常用方法如下表 :

 常用 event 說明
 create 建立物件時觸發

例如 :


測試 5 : CheckboxRadio 測試 : 選項與方法 [看原始碼]

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><br><br>
  <button id="ok">確定</button>
  <button id="usable">Enable</button>
  <button id="icon">Show Icon</button>

jQuery 部分 :

      var config={
        disabled: true, 
        icon: false,
        classes: {"ui-checkboxradio": "highlight"}
        };
      $("input").checkboxradio(config);      
      $("#ok").button();
      $("#usable").button();
      $("#usable").click(function(e) {
        var isDisabled=$("input").checkboxradio("option", "disabled");
        if (isDisabled) { //現在是不可用狀態
          $("input").checkboxradio("enable");
          $("#usable").html("Disable");
          }
        else {  //現在是可用狀態
          $("input").checkboxradio("disable");
          $("#usable").html("Enable");
          }
        });
      $("#icon").button();
      $("#icon").click(function(e) {
        var haveIcon=$("input").checkboxradio("option", "icon");
        if (haveIcon) { //現在有圖樣
          $("input").checkboxradio("option", "icon", false);
          $("#icon").html("Show icon");
          }
        else {  //現在無圖樣
          $("input").checkboxradio("option", "icon", true);
          $("#icon").html("Hide icon");
          }
        });
      $("#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); 
        });







此例設置了 id=usable 與 id=icon 兩個按鈕, 在選項物件 config 中將選項 disable 設為 true, icon 設為 false, 故預設 radio/checkbox 均無圖像且均不可用, 故 usable 按鈕預設顯示 "Enable", 而 icon 按鈕預設為 "Show icon", 按下這兩個按鈕會使 radio/checkbox 恢復為可用, 以及顯示圖像, 同時 usable 與 icon 按鈕上的文字也會隨之反覆變化.

張貼者： 於
標籤： , ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )