2023年12月4日 星期一

jQuery EasyUI v1.10 學習筆記 : 文字盒 TextBox

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


文字盒 TextBox 與標籤盒 TagBox 一樣都是 type=text 的 Input 元素, 主要差別是 TagBox 套用了 easyui-tagbox 樣式類別, 而 TextBox 則是套用了 easyui-textbox 樣式類別, 且可用的屬性不同. 文字盒主要是放在表單內讓使用者輸入單行文字或多行文字 (即兼具 textarea 功能). 

TextBox 基本語法如下 : 

<input class="easyui-textbox" label="欄位1" ....>

Input 元素必須填入 easyui-textbox 才能初始化為 TagBox 元件, 它有許多可設定的參數, 可以分別放在 input 屬性中, 也可以全部都放在 HTML5 的 data-options 屬性中 (中間用逗號隔開) :

<input class="easyui-textbox" data-options="label='欄位1', prompt='請輸入', ....">

常用屬性如下表 : 


 TextBox 常用屬性 說明
 class 必須填入 easyui-textbox 才能初始化
 label 文字輸入欄位的標題
 prompt 欄位內的提示語
 labelPosition 標題位置=before (預設) / after / top
 labelAlign 標題對齊方式=left (預設)/right
 labelWidth 標題寬度 (px)
 value 預設值
 type 欄位類型, text(預設) / password (密碼欄位)
 width 寬度 (px)
 height 高度 (px)
 multiline 是否為多行文字欄位=true / false (預設)
 iconClass 圖示樣式類別
 iconAlign 圖示對齊方式 : left / right (預設)
 iconWidth 圖示寬度 (px)



例如下面只有 class 與 label 屬性的測試範例 :


<!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>
    <div style="margin-bottom:10px">
      <input class="easyui-textbox" label="姓名">
    </div>
    <div style="margin-bottom:10px">
      <input class="easyui-textbox" label="Email">
    </div>
    <div style="margin-bottom:10px">
      <input class="easyui-textbox" label="密碼" type="password">
    </div>
    <div style="margin-bottom:10px">
      <a href="#" class="easyui-linkbutton">登入</a>
    </div>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>

結果如下 : 




可見預設的文字盒寬度都很短, 可以在 data-options 屬性中以 width 與 prompt 調整, 同時把 label 也放進 data-options 屬性中 :


測試 2 : 設定 label, type, width 與 prompt 等屬性 [看原始碼]

<!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>
    <div style="margin-bottom:10px">
      <input class="easyui-textbox" data-options="width:300, prompt:'請輸入姓名',  label:'姓名'">
    </div>
    <div style="margin-bottom:10px">
      <input class="easyui-textbox" data-options="width:300, prompt:'請輸入 Email 信箱', label:'Email'">
    </div>
    <div style="margin-bottom:10px">
      <input class="easyui-textbox" type="password" data-options="width:300, prompt:'請輸入密碼', label:'密碼'">
    </div>
    <div style="margin-bottom:10px">
      <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">登入</a>
    </div>
    <script>
      $(function(){
        });
    </script>
  </body>
</html>
 
此例前 3 個欄位都在 data-options 屬性中設定了 label, width 與 prompt, 密碼欄位; 按鈕則設定一個 iconCls=ok 的圖示, 關於 icon 圖示用法參考 :


結果如下 :




輸入密碼欄位時會以黑點代替 :




除了使用 class="easyui-textbox" 樣式類別來初始化外, 也可以用 jQuery 物件的 textbox() 方法, 但每一個 input 文字欄位元素必須添加 id 屬性以便能建立 jQuery 物件, 語法如下 :

$("#input 元素 id").textbox();

上面範例可以改寫為 : 


<!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>
    <div style="margin-bottom:10px">
      <input id="tb1">
    </div>
    <div style="margin-bottom:10px">
      <input id="tb2">
    </div>
    <div style="margin-bottom:10px">
      <input id="tb3">
    </div>
    <div style="margin-bottom:10px">
      <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">登入</a>
    </div>
    <script>
      $(function(){
        $("#tb1").textbox({
          width:300, 
          prompt:'請輸入姓名',
          label:'姓名'
          });
        $("#tb2").textbox({
          width:300, 
          prompt:'請輸入 Email 信箱', 
          label:'Email'
          });
        $("#tb3").textbox({
          width:300, 
          prompt:'請輸入密碼', 
          label:'密碼', 
          type:'password'
          });
        });
    </script>
  </body>
</html>

此例移除了 input 上的 class 與 data-options 屬性, 由其 jQuery 物件於呼叫 textbox() 方法時
初始化 Texbox 元件, 結果與上面範例一樣. 


標籤的位置可以用 labelPosition 屬性設定為 'top', 這樣標籤與輸入欄位就會從水平變成垂直了, 也可以用 value 屬性填入預設值, 例如 : 



<!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>
    <div style="margin-bottom:10px">
      <input id="tb1">
    </div>
    <div style="margin-bottom:10px">
      <input id="tb2">
    </div>
    <div style="margin-bottom:10px">
      <input id="tb3">
    </div>
    <div style="margin-bottom:10px">
      <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">登入</a>
    </div>
    <script>
      $(function(){
        $("#tb1").textbox({
          width:300, 
          prompt:'請輸入姓名',
          label:'姓名',
          labelPosition:'top'
          });
        $("#tb2").textbox({
          width:300, 
          prompt:'請輸入 Email 信箱', 
          label:'Email',
          labelPosition:'top',   
          value:'@'   
          });
        $("#tb3").textbox({
          width:300, 
          prompt:'請輸入密碼', 
          label:'密碼', 
          type:'password',
          labelPosition:'top'    
          });
        });
    </script>
  </body>
</html>

結果如下 :




可見如果用 value 設定預設值後, prompt 就失去作用了. 

沒有留言 :