今天繼續測試 EasyUI 的元件 TagBox, 這是一個可以收集使用者輸入之文字標籤 (Tag) 的元件, 本系列文章索引參考 :
TagBox 基本上是一個 Input 元素 (單行文字輸入欄位), 但須套上 easyui-tagbox 樣式類別才有 TagBox 的效果, 語法如下 :
<input type="text" class="easyui-tagbox" label="標題" values="標籤1, 標籤2, .....">
其中 type="text" 不是必要的, 因為 input 元素預設的 type 就是 text.
主要屬性有 3 個 :
- class : 必須填入 'easyui-tagbox' 樣式類別
- label : 在輸入框前面顯示的標題
- value : 設定預設的 tag, 一個以上每個 tag 以逗號隔開
其中 value 可有可無, 有設的話一開始 TagBox 內就會有這些預設標籤, 使用者在欄位中輸入 tag 文字後按 Enter 就會在標籤盒中新增一個標籤, 每個標籤右上方會有一個 x 鈕, 按一下即可刪除該標籤, 參考官網教學文件 :
例如 :
測試 1 : 用 easyui-tagbox 樣式類別初始化 TagBox [看原始碼]
<!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>
<input type="text" class="easyui-tagbox" value="名嘴,側翼" label="新增標籤" style="width:400px">
<script>
$(function(){
});
</script>
</body>
</html>
網頁剛開啟時預設顯示 value 屬性中的初始標籤 :
在欄位中輸入更多 tag, 超過欄位寬度時會往下增長 :
感覺此元件很適合用在社群網站.
除了直接套用 easyui-tagbox 外, 也可以用 jQuery 程式來初始化一個 TagBox 元件, 但必須給 input 元素一個 id 屬性以便能建立 jQuery 物件, 語法如下 :
$("#tagbox_id").tagbox({
label: "標題",
value: ["標籤1", "標籤2", ....."]
});
例如 :
測試 2 : 用 jQuery 物件的 tagbox() 方法初始化 TagBox [看原始碼]
<!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>
<input type="text" id="tagbox1" style="width:400px">
<script>
$(function(){
$("#tagbox1").tagbox({
label: "新增標籤",
value: ["名嘴", "側翼"]
});
});
</script>
</body>
</html>
結果與上面測試 1 相同.
如果要凸顯某些標籤, 可以利用 tagStyler 屬性透過回呼函式來設定 tag 的背景色, 回呼函式會迭代傳入 value 陣列的元素, 只要判斷元素是否為特定值, 然後變更其色彩樣式, 例如 :
測試 3 : 用 tagStyler 屬性動態更改特定標籤之樣式 [看原始碼]
<!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>
<input type="text" id="tagbox1" style="width:400px">
<script>
$(function(){
$("#tagbox1").tagbox({
label: "新增標籤",
value: ["名嘴", "側翼"],
tagStyler: function(value){
if (value=="政治分贓"){
return 'background:#ffd7d7;color:#c65353';
}
else if (value=="搓圓仔湯"){
return 'background:#b8eecf;color:#45872c';
}
}
});
});
</script>
</body>
</html>
此例利用傳入回呼函式的每個 value 元素, 判斷是否為特定標籤, 是的話就更改其背景與前景色, 結果如下 :
嗯, 效果還不錯.
如果要取得 TagBox 的內容, 就直接呼叫標籤盒的 jQuery 物件的 val() 方法即可, 例如 :
測試 4 : 呼叫 val() 方法取得 TagBox 的內容 [看原始碼]
<!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>
<input type="text" id="tagbox1" style="width:400px">
<a href="#" class="easyui-linkbutton" id="get_tags">取得標籤</a>
<script>
$(function(){
$("#tagbox1").tagbox({
label: "新增標籤",
value: ["名嘴", "側翼"]
});
$("#get_tags").on("click", function(e){
alert($("#tagbox1").val());
});
});
</script>
</body>
</html>
此例添加了一個連結按鈕 LinkButton 元件, 取得其 jQuery 物件後呼叫 on() 方法綁定一個 click 事件, 當按下此按鈕時呼叫 TagBox 元件的 val() 方法取得標籤盒的內容, 然後用 alert() 函式在
彈出視窗中顯示其內容, 結果如下 :
關於 LinkButton 用法參考 :
沒有留言 :
張貼留言