文字盒 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>
結果如下 :
測試 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();
上面範例可以改寫為 :
測試 3 : 呼叫 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 屬性填入預設值, 例如 :
測試 4 : labelPosition 與 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 就失去作用了.
沒有留言:
張貼留言