jQuery快速添加标签插件Tagbox js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery快速添加标签插件Tagbox js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-IN">
<head>
  <meta charset="UTF-8">
  <title>jQuery快速添加标签插件Tagbox</title>
  <link rel="stylesheet" href="css/jquery.tagbox.css" />
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/jquery.tagbox.js"></script>
  <script type="text/javascript">
    jQuery(function() {
      jQuery("#jquery-tagbox-text").tagBox();
      jQuery("#jquery-tagbox-select").tagBox({ 
        enableDropdown: true, 
        dropdownSource: function() {
          return jQuery("#jquery-tagbox-select-options");
        }
      });
    });
  </script>
  <style type="text/css">
  body {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px;
  }
  div.row {
    padding: 10px;
  }
  
  div.row label {
    font-weight: bold;
    display: block;
    padding: 0px 0px 10px;
  }
  </style>
</head>
<body>
<center>
  <h1>jQuery TagBox 1.0.1</h1>
  <form action="../jquery-tagbox/.">
    <div class="row">
      <label for="jquery-tagbox-text">文本方式添加标签</label>
      <input type="text" id="jquery-tagbox-text" />
    </div><!--div.row-->
    <div class="row">
      <label for="jquery-tagbox-select">下拉方式添加标签</label>
      <select name="" id="jquery-tagbox-select-options">
        <option value="代码">代码</option>
        <option value="JS代码">JS代码</option>
        <option value="PSD素材">PSD素材</option>
        <option value="矢量素材">矢量素材</option>
        <option value="图片素材">图片素材</option>
        <option value="免费素材">免费素材</option>
      </select>
      <!--select#-->
      <input type="text" id="jquery-tagbox-select" />
    </div>
  </form>
</center>
</body>
</html>

JS代码(jquery.tagbox.js):

/* * jQuery TagBox - jQuery Plugin * www.sucaijiayuan.com */
(function(jQuery){
	jQuery.fn.tagBox = function(options){
	var defaults ={
	separator:',',className:'tagBox',tagInputClassName:'',tagButtonClassName:'',tagButtonTitle:'添加标签',confirmRemoval:true,confirmRemovalText:'确定删除该标签吗？',completeOnSeparator:true,completeOnBlur:false,readonly:false,enableDropdown:false,dropdownSource:function(){
}
,dropdownOptionsAttribute:"title",removeTagText:"X",maxTags:-1,maxTagsErr:function(max_tags){
	alert("最多只能添加"+max_tags+"个标签!");
}
,beforeTagAdd:function(tag_to_add){
}
,afterTagAdd:function(added_tag){
}
}
if (options){
	options = jQuery.extend(defaults,options);
}
else{
	options = defaults;
}
options.tagInputClassName = ( options.tagInputClassName != '' ) ? options.tagInputClassName + ' ':'';
	options.tagButtonClassName = ( options.tagButtonClassName != '' ) ? options.tagButtonClassName + ' ':'';
	// Hide Element var $elements = this;
	if($elements.length < 1) return;
	$elements.each(function(){
	var uuid = Math.round( Math.random()*0x10000 ).toString(16) + Math.round( Math.random()*0x10000 ).toString(16);
	var $element = jQuery(this);
	$element.hide();
	try{
	var options_from_attribute = jQuery.parseJSON($element.attr(options.dropdownOptionsAttribute));
	options = jQuery.extend(options_from_attribute,options);
}
catch(e){
	console.log(e);
}
if($element.is(":disabled")) options.readonly = true;
	if( (jQuery.isArray($element)) && $element[0].hasAttribute("readonly") ) options.readonly = true // Create DOM Elements if( (options.enableDropdown) && options.dropdownSource() != null ){
	if(options.dropdownSource().jquery){
	var $tag_input_elem = (options.readonly) ? '':options.dropdownSource();
	$tag_input_elem.attr("id",options.className+'-input-'+uuid);
	$tag_input_elem.addClass(options.className+'-input');
}
else{
	var tag_dropdown_items_obj = jQuery.parseJSON(options.dropdownSource());
	var tag_dropdown_options = new Array('<option value=""></option>');
	jQuery.each(tag_dropdown_items_obj,function(i,v){
	if((jQuery.isArray(v)) && v.length == 2 ){
	tag_dropdown_options.push( '<option value="'+v[0]+'">'+v[1]+'</option>' );
}
else if ( !jQuery.isArray(v) ){
	tag_dropdown_options.push( '<option value="'+i+'">'+v+'</option>' );
}
}
);
	var tag_dropdown = '<select class="'+options.tagInputClassName+' '+options.className+'-input" id="'+options.className+'-input-'+uuid+'">'+tag_dropdown_options.join("")+'</select>';
	var $tag_input_elem = (options.readonly) ? '':jQuery(tag_dropdown);
}
}
else{
	var $tag_input_elem = (options.readonly) ? '':jQuery('<input type="text" class="'+options.tagInputClassName+' '+options.className+'-input" value="" id="'+options.className+'-input-'+uuid+'" />');
}
var $tag_add_elem = (options.readonly) ? '':jQuery('<a href="javascript:void(0)" class="'+options.tagButtonClassName+''+options.className+'-add-tag" id="'+options.className+'-add-tag-'+uuid+'">'+options.tagButtonTitle+'</a>');
	var $tag_list_elem = jQuery('<span class="'+options.className+'-list" id="'+options.className+'-list-'+uuid+'"></span>');
	var $tagBox = jQuery('<span class="'+options.className+'-container"></span>').append($tag_input_elem).append($tag_add_elem).append($tag_list_elem);
	$element.before($tagBox);
	$element.addClass("jQTagBox");
	$element.unbind('reloadTagBox');
	$element.bind('reloadTagBox',function(){
	$tagBox.remove();
	$element.tagBox(options);
}
);
	// Generate Tags List from Input item generate_tags_list( get_current_tags_list() );
	if(!options.readonly){
	$tag_add_elem.click(function(){
	var selected_tag = $tag_input_elem.val();
	options.beforeTagAdd(selected_tag);
	add_tag(selected_tag);
	if($tag_input_elem.is("select")){
	$tag_input_elem.find('option[value="'+selected_tag+'"]').attr("disabled","disabled");
}
$tag_input_elem.val('');
	options.afterTagAdd(selected_tag);
}
);
	$tag_input_elem.keypress(function(e){
	var code = (e.keyCode ? e.keyCode:e.which);
	var this_val = jQuery(this).val();
	if(code==13 || (code == options.separator.charCodeAt(0) && options.completeOnSeparator) ){
	$tag_add_elem.trigger("click");
	return false;
}
}
);
	if( options.completeOnBlur ){
	$tag_input_elem.blur(function(){
	if(jQuery(this).val() != "") $tag_add_elem.trigger("click");
}
);
}
jQuery('.'+options.className+'-remove-'+uuid).live( "click",function (){
	if(options.confirmRemoval){
	var c = confirm(options.confirmRemovalText);
	if(!c) return false;
}
var tag_item = jQuery(this).attr('rel');
	if($tag_input_elem.is("select")){
	$tag_input_elem.find('option[value="'+tag_item+'"]').removeAttr("disabled");
}
$tag_input_elem.val('');
	remove_tag(tag_item);
}
);
}
// Methods function separator_encountered(val){
	return (val.indexOf( options.separator ) != "-1") ? true:false;
}
function get_current_tags_list(){
	var tags_list = $element.val().split(options.separator);
	tags_list = jQuery.map(tags_list,function (item){
	return jQuery.trim(item);
}
);
	return tags_list;
}
function generate_tags_list(tags_list){
	var tags_list = jQuery.unique( tags_list.sort() ).sort();
	$tag_list_elem.html('');
	jQuery.each(tags_list,function(key,val){
	if(val != ""){
	var remove_tag_link = (options.readonly) ? '':'<a href="javascript:void(0)" class="'+options.className+'-remove '+options.className+'-remove-'+uuid+'" title="Remove Tag" rel="'+val+'">'+options.removeTagText+'</a>';
	if((options.enableDropdown) && jQuery('#'+options.className+'-input-'+uuid).find("option").length > 0){
	var display_val = jQuery('#'+options.className+'-input-'+uuid).find("option[value='"+val+"']").text();
}
else{
	var display_val = val;
}
$tag_list_elem.append('<span class="'+options.className+'-item"><span class="'+options.className+'-bullet">&bull;
	</span><span class="'+options.className+'-item-content">'+remove_tag_link+''+display_val+'</span></span>');
}
}
);
	$element.val(tags_list.join(options.separator));
}
function add_tag(new_tag_items){
	var tags_list = get_current_tags_list();
	new_tag_items = new_tag_items.split(options.separator);
	new_tag_items = jQuery.map(new_tag_items,function (item){
	return jQuery.trim(item);
}
);
	tags_list = tags_list.concat(new_tag_items);
	tags_list = jQuery.map( tags_list,function(item){
	if(item != "") return item}
);
	if( tags_list.length > options.maxTags && options.maxTags != -1 ){
	options.maxTagsErr(options.maxTags);
	return;
}
generate_tags_list(tags_list);
}
function remove_tag(old_tag_items){
	var tags_list = get_current_tags_list();
	old_tag_items = old_tag_items.split(options.separator);
	old_tag_items = jQuery.map(old_tag_items,function (item){
	return jQuery.trim(item);
}
);
	jQuery.each( old_tag_items,function(key,val){
	tags_list = jQuery.grep(tags_list,function(value){
	return value != val;
}
);
}
);
	generate_tags_list(tags_list);
}
}
);
}
}
)(jQuery);

CSS代码(jquery.tagbox.css):

/**************************************/
/* TAGBOX */
/**************************************/
a.tagBox-add-tag{display:inline-block;font-size:12px;line-height:1em;padding:0.45em 0.8em;text-decoration:none;color:#333;border:1px solid #AAA;outline:none;text-transform:uppercase;text-shadow:1px 1px 2px #FFF;vertical-align:middle;background:-webkit-gradient(linear,left top,left bottom,from(#F2F2F2),to(#CCCCCC));background:-moz-linear-gradient(top,#F2F2F2,#CCCCCC);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2',endColorstr='#CCCCCC');-moz-border-radius:0.3em;-wekit-border-radius:0.3em;border-radius:0.3em;}
a.tagBox-add-tag:hover{border-color:#888;}
a.tagBox-add-tag:active{background:-webkit-gradient(linear,left top,left bottom,from(#CCCCCC),to(#F2F2F2));background:-moz-linear-gradient(top,#CCCCCC,#F2F2F2);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC',endColorstr='#F2F2F2');}
input.tagBox-input,select.tagBox-input{border:1px solid #CCCCCC;padding:3px;margin-right:5px;vertical-align:middle;background:#FFF;}
span.tagBox-container{display:inline-block;vertical-align:middle;}
span.tagBox-list{padding:0em 0;font-size:12px;line-height:1em;display:block;}
span.tagBox-item{display:inline-block;margin:0.3em 0.25em 0.15em;vertical-align:middle;cursor:default;white-space:nowrap;}
span.tagBox-item *{vertical-align:middle;white-space:normal;}
span.tagBox-bullet{display:none;}
span.tagBox-item *{vertical-align:middle;}
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:#FFF;background:#234B77;background:-webkit-gradient(linear,left top,left bottom,from(#4998CF),to(#234B77));background:-moz-linear-gradient(top,#4998CF,#234B77);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4998CF',endColorstr='#234B77');-moz-border-radius:0.5em;-wekit-border-radius:0.5em;border-radius:0.5em;}
span.tagBox-item-content a.tagBox-remove{text-decoration:none;display:inline-block;float:right;color:#FFF;text-align:center;font-family:"Comic Sans MS",Arial,Helvetica,sans-serif;font-size:10px;font-weight:bold;line-height:1em;background:#D00;margin-left:0.5em;padding:0.35em 0.5em;-moz-border-radius:1em;-webkit-border-radius:1em;border-radius:1em;-moz-box-shadow:0 0 3px #FFF;-webkit-box-shadow:0 0 3px #FFF;box-shadow:0 0 3px #FFF;}
span.tagBox-item-content a.tagBox-remove:hover{background-color:#ff3333;}
/*------------------------------------*/

附件:下载该文件资源,减少时间成本(增值服务)