2023年12月8日 星期五

jQuery EasyUI v1.10 學習筆記 : 核取盒 CheckBox

本篇記錄 jQuery EasyUI 的核取盒 CheckBox 測試, 本系列文章索引參考 :


核取盒其實就是 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 核取盒外觀 :



<!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 改寫上面範例如下 : 



<!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 屬性來設定 : 



<!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(), 例如 :



<!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() 函式來初始化, 結果與上面一樣. 

於

沒有留言:

張貼留言