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 |
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:
- Nice Tags Manager with jQuery and Bootstrap - Bootstrap Tags Input
- jQuery Tags Manager with Twitter Bootstrap - tagmanager
- Versatile jQuery Tags Input Plugin - Tag Handler
- jQuery Tag & Token Input Plugin For Bootstrap - Bootstrap Tokenfield
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.