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();
  });