小狐狸事務所: 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/

本篇測試參考了如下書籍 :

jQuery UI 使用者介面設計 (歐萊里, Studio Tib. 譯)
jQuery UI 與 Plugin 開發實戰 (悅知文化, 吳哲穎譯)
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 按鈕上的文字也會隨之反覆變化.

小狐狸事務所

2019年3月25日星期一

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

沒有留言:

張貼留言

2019年3月25日 星期一

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

沒有留言:

張貼留言

2019年3月25日星期一