Animated jQuery Tag/Token Input Plugin - masterblaster

Animated jQuery Tag/Token Input Plugin - masterblaster
File Size: 70.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

masterblaster is a small jQuery tag management plugin which allows you to add tags/tokens by pressing Tab or Enter key.

Features:

  • Custom trigger keys. (Default: Tab/Enter)
  • Custom tag rules. 
  • Validates tags on change.
  • Shows a simple animation when you add/remove a tag.
  • Events & Methods supported.

How to use it:

1. Include jQuery library and the jQuery masterblaster plugin's javascript and CSS in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.masterblaster.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.masterblaster.css">

2. Create an input filed that will be converted into a tag manager.

<input id="tags" placeholder="Enter tags here"/>

3. The Javascript.

var $mb = $( "#tags" );
$mb.masterblaster( { 
tagRules: {
unique: true,
minLength: 3
}
});
$mb.masterblaster( "push", "tag 1" );
$mb.masterblaster( "push", "tag 2" );

4. Options and defaults.

animate: true,
triggerKeys: [ 9, 13 ], //keycode when entered adds the tag
showAddButton: true, // 
helpText: "Hit Tab or Enter to add",
validateOnChange: false, // Trigger errors on input change if true -- otherwise trigger only on save.
tagRules: {
  unique: false, // Tags must be unique to be added.
  minLength: 1, // Minimum character length a tag must be.
  maxLength: null, // Maximum character length a tag can be.
  regexp: null // Pass a regular expression to test tags against
},

5. Events.

// Occurs on addition of tag through any means.

$mb.on( "mb:add", function( e, tagName ) {
    console.info( tagName );
} );

// Occurs on removal of tag through any means.
$mb.on( "mb:remove", function( e, tagName ) {
    console.info( tagName );
} );

// Occurs when one of the tagRules fail on save.
$mb.on( "mb:error", function( e, tagName, errorMsg ) {
  console.info( errorMsg ); //tag 1 is not in the valid format.
} );

6. Methods.

  • push(tagName) - Add tagName to the end of the list.
  • pop() - Removes last tag.
  • remove(tagName) - This will remove all tags tagName.
  • destroy() - Destroy/cleanup instance of plugin.

This awesome jQuery plugin is developed by aef-. For more Advanced Usages, please check the demo page or visit the official website.