2023年12月2日 星期六

jQuery EasyUI v1.10 學習筆記 : 標籤盒 TagBox

今天繼續測試 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 鈕, 按一下即可刪除該標籤, 參考官網教學文件 :


例如 : 



<!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", ....."]
});  

例如 : 



<!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 陣列的元素, 只要判斷元素是否為特定值, 然後變更其色彩樣式, 例如 :



<!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() 方法即可, 例如 :


<!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 用法參考 :


沒有留言 :