jquery外掛jquery TagBox（建立標籤輸入框）教程

看標題，就知道這個外掛是做什麼的。使用步驟如下：

（一）引入相關檔案：

引入jquery.tagbox.css和jquery.tagbox.js，前提是引入jquery檔案。

（二）加入此控制元件：

 <input type="text" id="jquery-tagbox-text" />

（三）初始化：

  $(document).ready(function($) {
  	 $("#jquery-tagbox-text").tagBox();
  });

由於釋出此外掛的時候，其使用的jquery版本是1.5，在1.9以後的版本中會報一個錯:

TypeError: jQuery(...).live is not a function

這是由於jquery1.9以後的版本廢除了live函式，所以要改原始碼

將jquery.tagbox.js裡的這句：$('.'+options.className+'-remove-'+uuid).live( "click", function () {

改為：$(document).on( "click",'.'+options.className+'-remove-'+uuid, function () {

就可以正常使用。輸入標籤按回車或者點選“ADD TAG”按鈕，標籤會顯示在輸入框下面，點選標籤上的關閉按鈕，可刪除該標籤。

預設它標籤的顏色是藍色，博主覺得太醜，就改了它的css，改成透明色

修改如下：

span.tagBox-item-content {
  display: inline-block;
  padding: 0.417em 0.417em;
  font-size: 1em;
  line-height: 1.4em;
  text-shadow: 0.083em 0.083em 0.083em #888;
/*  border: 0.083em solid #3C7BA8;
*/  color: #000000;
  background: #FFF;
  /*background: -webkit-gradient(linear, left top, left bottom, from(#4998CF), to(#FFF));
  background: -moz-linear-gradient(top, #4998CF, #FFF);*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4998CF', endColorstr='#FFF');
  -moz-border-radius: 0.5em;
  -wekit-border-radius: 0.5em;
  border-radius: 0.5em;
}

（四）獲取tag的值：

獲取文字框的值就可以了，多個值以英文的逗號分隔。

var tagValue=document.getElementById("jquery-tagbox-text").value;

要是編輯頁面的話，需要頁面載入完成顯示原來新增的標籤，在控制元件初始化之前賦值就ok了（多個值用英文逗號連線）。

  $(document).ready(function($) {
  	 document.getElementById("jquery-tagbox-text").value="人才,天才,英才";
  	  $("#jquery-tagbox-text").tagBox();
  });