在上一篇 EasyUI 文章中我們測試了 Checkbox 元件, 本篇要來測試它的進階簡化版 CheckGroup (核取盒群組), 本系列文章索引參考 :
核取盒群組顧名思義就是將一群核取盒組成一個群組, 這是一個利用空的 div 元素當容器所包覆合成的元件, 這個 div 元素透過 class 初始化後會在裡面生成多個 type="checkbox" 的核取盒 input 元素, 功能與自行用 checkbox 手刻相同, 但使用起來更簡潔.
基本語法如下 :
<div class="easyui-checkgroup" name="名稱" dir="v" data-options="data: optionsData"></div>
Div 元素必須填入 easyui-checkgroup 樣式類別才能初始化為 CheckGroup 元件, name 參數是一個字串, 用來給群組內的每個 checkbox 設定相同的名稱; dir 則是設定選項的擺放方式, 預設為水平 "h". 如果要讓群組內的 checkbox 垂直排列, 可以用 dir='v' 設定 (預設是 'h' 水平排列).
選項變數 optionsData 為一個定義各選項內容的物件陣列變數, 每個選項就是一個物件, 包含必要的 label, value, 與可有可無的 disabled 屬性, 用來設定每個 checkbox 的標籤 (label) 與選項值 (value). 全部選項物件組成一個陣列 optionsData :
var optionsData=[{value: "選項1", value: "值1"}, {value: "選項2", value: "值2"}, ...]
注意, optionsData 必須定義於 <script> 標籤內的最上層, 不要放在等待文件載入完成的 $(function({ })) 裡面, 否則會無法載入變數值.
其實 name 與 dir 屬性也可以放在 data-options 裡面, 語法如下 :
<input class="easyui-checkgroup" data-options="name: '名稱', data: optionsData, dir: 'v'">
CheckGroup 常用屬性如下表 :
| CheckGroup 常用屬性 | 說明 |
| class | 必須填入 easyui-checkgroup 才能初始化 |
| name | 選項 checkbox 的共同名稱 |
| labelPosition | 標題位置=before (預設) / after / top |
| labelAlign | 標題對齊方式=left (預設) / right |
| labelWidth | 標題寬度 (px) |
| value | 設定每個選項的 value 的陣列 |
| data | 設定每個選項的物件陣列, 可用屬性 : label, value, disabled |
| itemStyle | 選項 checkbox 的樣式 (物件), 例如 {height: 30} |
| dir | 設定選項的布局方向 (字串), 可用 'v' (垂直) 或 'h' (水平, 預設) |
注意, data, value 與 itemStyle 屬性為 Javascript 之陣列或物件字面值, 必須在 data-options 屬性中設定, 無法放在 div 元素的 data 與 value 屬性中. 其次, CheckGroup 的選項參數 data 中沒有 checked 屬性, 所以無法設定預設已勾選之選項.
預設的 CheckGroup 範例如下 :
測試 1 : 預設的核取盒群組 (選項水平排列) [看原始碼]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<h2>擅長的程式語言</h2>
<div class="easyui-checkgroup" name="language" data-options="data: optionsData" style="margin-bottom:10px"></div>
<div style="margin-bottom:10px">
<a href="#" id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">確定</a>
</div>
<script>
var optionsData=[{value:'Python', label:'Python'},
{value:'Java', label:'Java'},
{value:'C#', label:'C#'}];
$(function(){
$("#ok").on("click", function(){
selected=[];
$("input[name=language]:checked").each(function(){
selected.push($(this).val());
});
alert(selected.join());
});
});
</script>
</body>
</html>
結果如下 :
可見預設選項是水平排列的. 添加 dir="v" 屬性可使選項垂直排列 :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<h2>擅長的程式語言</h2>
<div class="easyui-checkgroup" name="language" dir="v" data-options="data: optionsData" style="margin-bottom:10px"></div>
<div style="margin-bottom:10px">
<a href="#" id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">確定</a>
</div>
<script>
var optionsData=[{value:'Python', label:'Python'},
{value:'Java', label:'Java'},
{value:'C#', label:'C#'}];
$(function(){
$("#ok").on("click", function(){
selected=[];
$("input[name=language]:checked").each(function(){
selected.push($(this).val());
});
alert(selected.join());
});
});
</script>
</body>
</html>
此例只是在上面範例的核取盒群組 div 元素中添加 dir="v", 結果如下 :
name 與 dir 屬性均可放在 data-options 屬性中, 但要注意單雙引號需交替使用, 例如 :
測試 3 : 將 name 與 dir 放在 data-options 屬性內 [看原始碼]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<h2>擅長的程式語言</h2>
<div class="easyui-checkgroup" data-options="data: optionsData, name:'language', dir:'v'" style="margin-bottom:10px"></div>
<div style="margin-bottom:10px">
<a href="#" id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">確定</a>
</div>
<script>
var optionsData=[{value:'Python', label:'Python'},
{value:'Java', label:'Java'},
{value:'C#', label:'C#'}];
$(function(){
$("#ok").on("click", function(){
selected=[];
$("input[name=language]:checked").each(function(){
selected.push($(this).val());
});
alert(selected.join());
});
});
</script>
</body>
</html>
此例是將上例的 name 與 dir 都移到 data-options 內, 結果與上例相同.
除了用 easyui-checkgroup 樣式類別來初始化 CheckGroup 外, 也可以使用 div 元素的 jQuery 物件的 checkgroup() 方法, 在下面範例中, 我們將 div 元素的 class 屬性拿掉, 但添加有 id 屬性以便能取得其 jQuery 物件, 例如 :
測試 4 : 使用 checkgroup() 初始化 CheckGroup 元件 [看原始碼]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<h2>擅長的程式語言</h2>
<div id="chkgroup1" style="margin-bottom:10px"></div>
<div style="margin-bottom:10px">
<a href="#" id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">確定</a>
</div>
<script>
$(function(){
$("#chkgroup1").checkgroup({
name: "language",
data: [{value:'Python', label:'Python'},
{value:'Java', label:'Java'},
{value:'C#', label:'C#'}],
dir: "v"
});
$("#ok").on("click", function(){
selected=[];
$("input[name=language]:checked").each(function(){
selected.push($(this).val());
});
alert(selected.join());
});
});
</script>
</body>
</html>
此例將 optionsData 等屬性放在字典中傳入 checkgroup() 來初始化 CheckGroup 元件, 結果與上面相同.
下面是添加 labelPosition: "before" 屬性的範例 :
測試 5 : 設定 labelPosition: 'before' 使標籤在前 [看原始碼]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<h2>擅長的程式語言</h2>
<div id="chkgroup1" style="margin-bottom:10px"></div>
<div style="margin-bottom:10px">
<a href="#" id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">確定</a>
</div>
<script>
$(function(){
$("#chkgroup1").checkgroup({
name: "language",
data: [{value:'Python', label:'Python'},
{value:'Java', label:'Java'},
{value:'C#', label:'C#'}],
dir: "v",
labelPosition: "before"
});
$("#ok").on("click", function(){
selected=[];
$("input[name=language]:checked").each(function(){
selected.push($(this).val());
});
alert(selected.join());
});
});
</script>
</body>
</html>
結果如下 :
可見選項的標籤已變成在前面 (預設是後面).
雖然 CheckGroup 比用 CheckBox 手刻要簡潔, 但它不能使用 checked 屬性來指定那些選項預設已勾選, dataOptions 只能用 label, value, 與 disable 這 3 個屬性. 下面是將 C# 這個選項設為 disabled 使其不可選的範例 :
測試 6 : 設定 disabled: true 使選項不可選 [看原始碼]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="themes/default/easyui.css">
<link rel="stylesheet" href="themes/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<script src="locale/easyui-lang-zh_TW.js"></script>
</head>
<body>
<h2>擅長的程式語言</h2>
<div id="chkgroup1" style="margin-bottom:10px"></div>
<div style="margin-bottom:10px">
<a href="#" id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">確定</a>
</div>
<script>
$(function(){
$("#chkgroup1").checkgroup({
name: "language",
data: [{value:'Python', label:'Python'},
{value:'Java', label:'Java'},
{value:'C#', label:'C#', disabled: true}],
dir: "v"
});
$("#ok").on("click", function(){
selected=[];
$("input[name=language]:checked").each(function(){
selected.push($(this).val());
});
alert(selected.join());
});
});
</script>
</body>
</html>
結果如下 :
可見 C# 這一項顏色變淡無法選取.
沒有留言 :
張貼留言