核取盒其實就是 HTML 中 type="checkbox" 的 input 元素, 其功能是讓使用者能勾選多個選項, HTML5 的核取盒外觀較原始, EasyUI 則透過 CSS 加以美化並與其他元件介面一致.
CheckBox 基本語法如下 :
<input class="easyui-checkbox" name="名稱1" label="選項1" value="值1" ....>
Input 元素必須填入 easyui-checkbox 才能初始化為 CheckBox 元件, 它有許多可設定的參數, 可以分別放在 input 屬性中, 除了 name 以外也可以都放在 HTML5 的 data-options 屬性中 (中間用逗號隔開) :
<input class="easyui-checkbox" name="名稱1" data-options="label='選項1', value='值1', ....">
常用屬性如下表 :
| CheckBox 常用屬性 | 說明 |
| class | 必須填入 easyui-checkbox 才能初始化 |
| label | 文字輸入欄位的標題 |
| labelPosition | 標題位置=before (預設) / after / top |
| labelAlign | 標題對齊方式=left (預設) / right |
| labelWidth | 標題寬度 (px) |
| value | 選項所綁定之值 |
| checked | 是否被勾選=true / false (預設) |
| width | 寬度 (px) |
| height | 高度 (px) |
| disabled | 是否可使用=true (預設) / false |
下面是原始的 HTML5 核取盒外觀 :
測試 1 : HTML5 的核取盒效果 [看原始碼]
<!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 style="margin-bottom:10px">
<label>Python</label>
<input type="checkbox" name="language" value="Python">
</div>
<div style="margin-bottom:10px">
<label>Java</label>
<input type="checkbox" name="language" value="Java">
</div>
<div style="margin-bottom:10px">
<label>C#</label>
<input type="checkbox" name="language" value="C#">
</div>
<div style="margin-bottom:10px">
<button id="ok">確定</button>
</div>
<script>
$(function(){
$("#ok").on("click", function(){
selected=[];
$("input[name=language]:checked").each(function(){
selected.push($(this).val());
});
alert(selected.join());
});
});
</script>
</body>
</html>
此例使用原始的 HTML5 核取盒, 所以需要 label 元素實現選項的標題, 當按下 "確定" 鈕透過 jQuery 處理 click 事件抓取所有被勾選的選項, 然後用 forEach 迴圈將其 value 丟到陣列裡, 最後顯示陣列組合結果. 關於 jQuery 選擇器用法參考 :
結果如下 :
用 EasyUI 改寫上面範例如下 :
測試 2 : EasyUI 的核取盒效果 [看原始碼]
<!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 style="margin-bottom:10px">
<input class="easyui-checkbox" name="language" label="Python" value="Python">
</div>
<div style="margin-bottom:10px">
<input class="easyui-checkbox" name="language" label="Java" value="Java">
</div>
<div style="margin-bottom:10px">
<input class="easyui-checkbox" name="language" label="C#" value="C#">
</div>
<div style="margin-bottom:10px">
<a href="#" id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">確定</a>
</div>
<script>
$(function(){
$("#ok").on("click", function(){
selected=[];
$("input[name=language]:checked").each(function(){
selected.push($(this).val());
});
alert(selected.join());
});
});
</script>
</body>
</html>
此例僅將核取盒與按鈕改為 EasyUI 版, 按鈕事件處理程式不變, 結果如下 :
可見外觀比上面的原始 HTML5 版較好看多了.
下面範例則是將 easyui-checkbox 改用 data-options 屬性來設定 :
測試 3 : EasyUI 的核取盒效果 (使用 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 style="margin-bottom:10px">
<input class="easyui-checkbox" name="language" data-options="label:'Python', value:'Python', labelPosition:'after'">
</div>
<div style="margin-bottom:10px">
<input class="easyui-checkbox" name="language" data-options="label:'Java', value:'Java', labelPosition:'after'">
</div>
<div style="margin-bottom:10px">
<input class="easyui-checkbox" name="language" data-options="label:'C#', value:'C#', labelPosition:'after'">
</div>
<div style="margin-bottom:10px">
<a href="#" id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">確定</a>
</div>
<script>
$(function(){
$("#ok").on("click", function(){
selected=[];
$("input[name=language]:checked").each(function(){
selected.push($(this).val());
});
alert(selected.join());
});
});
</script>
</body>
</html>
此例將核取盒設定放在 data-options 屬性中, 添加 labelPosition 屬性將標題改為放在核取盒後面, 結果如下 :
除了用 data-options 屬性來初始化核取盒外, 也可以使用 EasyUI 的 jQuery 函式 checkbox(), 例如 :
測試 4 : 使用 checkbox() 初始化核取盒 [看原始碼]
<!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 style="margin-bottom:10px">
<input class="easyui-checkbox" id="cbx1" name="language">
</div>
<div style="margin-bottom:10px">
<input class="easyui-checkbox" id="cbx2" name="language">
</div>
<div style="margin-bottom:10px">
<input class="easyui-checkbox" id="cbx3" name="language">
</div>
<div style="margin-bottom:10px">
<a href="#" id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">確定</a>
</div>
<script>
$(function(){
$('#cbx1').checkbox({
label: 'Python',
value: 'Python',
labelPosition: 'after'
});
$('#cbx2').checkbox({
label: 'Java',
value: 'Java',
labelPosition: 'after'
});
$('#cbx3').checkbox({
label: 'C#',
value: 'C#',
labelPosition: 'after'
});
$("#ok").on("click", function(){
selected=[];
$("input[name=language]:checked").each(function(){
selected.push($(this).val());
});
alert(selected.join());
});
});
</script>
</body>
</html>
此例把 input 元素中的 data-options 拿掉, 但添加 id 屬性以便能取得其 jQuery 物件, 然後其 checkbox() 函式來初始化, 結果與上面一樣.
沒有留言 :
張貼留言