jQuery Ajax动态添加、删除标签代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery可生成标签跟删除代码</title>
</head>
<body>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
(function( $, window, document, undefined ) {
  var pluginName = "masterblaster",
      name = "plugin_masterblaster",
      defaults = { 
        animate: true,
        triggerKeys: [ 9, 13 ], //keycode when entered adds the tag
        showAddButton: true,
        helpText: "Hit Tab or Enter to add",
        tagRules: {
          unique: false,
          minLength: null
        }
      },
      methods = [ "push", "pop", "remove", "destroy" ];
  function MasterBlaster( $element, options ) {
    this.options = $.extend( {}, defaults, options );
    this.$container = $( '<div class="mb-container"></div>' );
    this.$tagList = $( '<ul class="mb-taglist"></ul>' );
    this.$meta = $( '<div class="mb-meta"></div>' );
    this.$element = $element;
    this.$oldInput = $element;
    this.$input = $element.clone( );
    if( this.options.showAddButton )
      this.$addButton = $( "<button class='btn mb-add-button'><i class='icon-plus'></i>Add</button>" );
    this.tag = [ '<li style="opacity:1" data-tag="" class="mb-tag"><div class="mb-tag-content">',
                  '<span class="mb-tag-text"></span>',
                  '<a class="mb-tag-remove"></a>',
                 '</div></li>' ].join( "" );
    this.tags = [ ];
    this.setup( );
  }
  MasterBlaster.prototype.addElem = function( $tag ) {
    if( this.options.animate ) {
      $tag.css( "opacity", 0 );
      $tag.insertBefore( this.$meta );
      var width = $tag.css( "width" );
      $tag.css( "width", 0 );
      $tag.animate( {
        width: width
      }, "fast", function( ) {
       $tag.css( "width", "" );
       $tag.animate( { opacity: 1 } ); 
      } );
    }
    else
      $tag.insertBefore( this.$meta );
  };
  MasterBlaster.prototype.buildTag = function( tagName ) {
    var $tag = $( this.tag );
    $tag.find( ".mb-tag-text" ).text( tagName );
    $tag.attr( "data-tag", tagName );
    return $tag;
  };
  MasterBlaster.prototype.removeEvents = function( ) {
    this.$input.on( "keydown", $.proxy( this.onRemove, this ) );
    if( this.options.showAddButton )
      this.$addButton.on( "click", $.proxy( this.onRemove, this ) );
  };
  MasterBlaster.prototype.addEvents = function( ) {
    this.$input.on( "keydown", $.proxy( this.onAdd, this ) );
    if( this.options.showAddButton )
      this.$addButton.on( "click", $.proxy( this.onAdd, this ) );
  };
  MasterBlaster.prototype.onAdd = function( e ) {
    if( e.type === "click" || ~this.options.triggerKeys.indexOf( e.keyCode || e.which ) ) {
      e.preventDefault(); 
      var tagName = this.cleanTag( this.$input.val( ) );
      if( this.isValid( tagName ) ) {
        this.$container.removeClass( "mb-error" );
        this.push( tagName );
        this.$input.val( "" );
      }
      else {
        this.$container.addClass( "mb-error" );
        this.$element.trigger( "mb:error", tagName, this.error );
      }
    }
  };                                                             
  MasterBlaster.prototype.cleanTag = function( tagName ) {
    return tagName;
  };
  MasterBlaster.prototype.isValid = function( tagName ) {
    if( this.options.tagRules.unique && this.hasTag( tagName ) ) {
      this.error = tagName + " already exists.";
      return false;
    }
    else if( this.options.tagRules.minLength && tagName.length < this.options.tagRules.minLength ) {
      this.error = tagName + " must be greater than " + this.options.tagRules.minLength + " characters.";
      return false;
    }
    else {
      return true;
    }
  };
  MasterBlaster.prototype.refreshTagEvents = function( ) {
    this.$tagList.find( ".mb-tag-remove" ).off( "click" );
    this.$tagList.find( ".mb-tag-remove" ).on( "click", $.proxy( this.onRemove, this ) );
  };
  MasterBlaster.prototype.onRemove = function( e ) {
    e.preventDefault( );
    this.remove( $( e.target ).parents( ".mb-tag" ).attr( "data-tag" ) );
  };
  MasterBlaster.prototype.removeElem = function( tagName ) {
    var $tag = this.$tagList.find( "[data-tag='"+tagName+"']" );
    if( this.options.animate ) {
      $tag.animate( { opacity: 0.01 }, "fast", function( ) {
        $tag.animate( { width: 0, margin: 0 }, "fast", function( ) {
          $tag.remove( );
        } );
      } );
    }
    else
      $tag.remove( ); 
  };
  MasterBlaster.prototype.hasTag = function( tagName ) {
    return ~( this.tags.indexOf( tagName ) ); 
  };
  MasterBlaster.prototype.push = function( tagName ) {
    this.tags.push( tagName );
    ;
    this.addElem( this.buildTag( tagName ) );
    this.refreshTagEvents( );
    this.$element.trigger( "mb:add", tagName );
  };
  MasterBlaster.prototype.pop = function( ) {
    var tagName = this.tags[ this.tags.length - 1 ];
    this.remove( tagName );
  };
  MasterBlaster.prototype.removeFromTagsArray = function( tagName ) {
    var index = this.tags.indexOf( tagName );
    if( !~index ) return false;
    this.tags.splice( index, 1 );
    return true;
  };
  MasterBlaster.prototype.remove = function( tagName ) {
    this.removeElem( tagName );
    while( this.removeFromTagsArray( tagName ) );
    this.$element.trigger( "mb:remove", tagName );
  };
  MasterBlaster.prototype.destroy = function( ) {
    this.$oldInput.show( );
    this.removeEvents( );
    this.$container.remove( );
    this.$element.removeData( name );
  };
  MasterBlaster.prototype.setup = function( ) {
    this.$container.insertAfter( this.$oldInput );
    this.$oldInput.hide( );
    this.$input.attr( "id", "" ).addClass( "mb-input" );
    this.$container.append( this.$tagList.append( this.$meta ) );
    this.$meta.append( this.$input );
    if( this.options.showAddButton )
      this.$input.after( this.$addButton );
    if( this.options.helpText )
      this.$meta.append( $( "<span class='mb-help-text'><small>"+this.options.helpText+"</small></span>" ) );
    this.addEvents( );
  };
  $.fn[ pluginName ] = function( optionsOrMethod ) {
    var $this,
        _arguments = Array.prototype.slice.call( arguments ),
        optionsOrMethod = optionsOrMethod || { };
    return this.each(function ( ) {
      $this = $( this );
      if( !$this.data( name ) && ( typeof optionsOrMethod ).toLowerCase( ) === "object" ) 
        $this.data( name, new MasterBlaster( $this, optionsOrMethod ) );
      else if( ( typeof optionsOrMethod ).toLowerCase( ) === "string" ) {
        if( ~$.inArray( optionsOrMethod, methods ) )
          $this.data( name )[ optionsOrMethod ].apply( $this.data( name ), _arguments.slice( 1, _arguments.length ) );
        else
          throw new Error( "Method " + optionsOrMethod + " does not exist. Did you instantiate masterblaster?" );
      }
    } );
  }; 
} )( jQuery, window, document );
</script>
<style>
.mb-container {
  overflow: hidden;
}
.mb-container ul.mb-taglist {
  padding: 0;
  margin: 0;
  overflow: hidden;
  float: left;
}
.mb-meta {
  float: left;
  overflow: hidden;
  padding-left: 5px;
}
.mb-tag-content {
  overflow: hidden;
  white-space: nowrap;
}
.mb-help-text {
  margin-left: 5px;
  font-family: sans-serif;
}
.mb-container.mb-error .mb-input {
  border: 1px solid red;
  outline: red;
}
.mb-add-button {
  padding: 4px 8px;
  margin-left: 5px;
  font-size: 14px;
  line-height: 20px; 
  border-radius: 4px;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #0044cc;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
}
.mb-container li.mb-tag {
  overflow: hidden;
  font-family: arial, serif;
  float: left;
  list-style-type: none;
  padding: 4px;
  margin-right: 4px;
  background: #f0f0f0;
  border: 1px solid #c0c0c0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size: 1em;
}
.mb-container .mb-input-container {
  float: right;
}
.mb-container .mb-input {
  float: left;
  border: 1px solid #c0c0c0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; 
  padding: 6px;
  font-size: 1em;
  margin: 2px 0 0 0;
}
.mb-container a.mb-tag-remove {
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin-left: 5px;
  width: 10px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center 2px;
  background-image:url(//ku.shouce.ren/files/images/201601/56a368c2bd193.png);
}
</style>
<div align="center" style="width:416px; margin:0 auto">
<input id="tags" placeholder="Enter tags here"/>
</div>
<script type="text/javascript">
$("#tags").masterblaster({
	animate:true
});
</script> 
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery Ajax动态添加、删除标签代码

分类

jQuery实例

描述

jquery动态生成标签，同时动态删除标签，以Ajax的操作方式。测试时，你可以在文本框里输入要生成的标签文字，然后点击后面的按钮就可以动态创建标签，所生成的标签内都带有关闭功能，因此你还可以动态删除新创建的标签，这种功能可用于后...