Minimal jQuery Tags Input Plugin - masterblaster

File Size: 68.9 KB
Views Total: 1106
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal jQuery Tags Input Plugin - masterblaster

masterblaster is a simple jQuery tags input plugin used to turns your input into tags by hitting Tab or Enter or clicking the Add button. Click the close button within the tag label will remove this tag.

Features:

  • Fade animations while adding or removing tags.
  • Custom keycode when entered adds the tag.
  • Custom tag rules: unique and minimum length.
  • 4 methods supported: push, pop, remove and destroy.

See also:

Basic Usage:

1. Include the required jquery masterblaster stylesheet file in your page.

<link rel="stylesheet" type="text/css" href="jquery.masterblaster.css">

2. Create an input filed.

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

3. Include the jQuery javascript library and jQuery masterblaster plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.masterblaster.js"></script> 

4. Call the plugin with options.

<script type="text/javascript">
$( "#tags" ).masterblaster( {
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
}
} );
</script>

Change log:

v0.1.0 (2014-03-20)

  • Added getTags method

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