Tagtagger.js

jQuery plugin to create and manage tags

Project maintained by exexzian Hosted on GitHub Pages — Theme by mattgraham

TagTagger.js

============================================================================
TagTagger.js v0.0.6
jQuery plugin to create and manage tags
requires - taggerStyles.css and jquery.js
Website: http://exexzian.github.io/TagTagger.js/
jQuery Plugin Link: TagTagger.js - jQuery Plugin Center
**For Demo check:** click here

**Version - 0.0.6**: comes with more useful and flexible features - a big credit goes to - @Lewiscowles1986
✦ Create tags on the go - **features**
✔ Checks for duplicate tags and display fade-In/Out message

		- which makes it less annoying - Message text can be easily changed by passing option msg

		- Want even less annoynance - of course you can pass the showMsg as false
 
✔ Customization Options - Styleable via CSS

✔ Editable Tags

✔ Option to Finish the tag addition/edition by clicking **Done** button 

✔ **Tag Pool**(available from v0.0.6): feature provides the option to list Tags that can be added 
(well it surely restricts from spamming tag-box - and well of-coure you can turn it off anytime 
- see usage)

✔ **Flexible Event Callbacks**(available from v0.0.6): This one gives a free hand flexibility to developers
 to add callbacks on events like onCreated, onRemoved, onDuplicate, onNotInPool

Usage:

( As Simple As It Can Be )
✦ Well Of course you need to import its styling file: "taggerStyles.css"
✦ Default mode:
$('elementOrSelector').TagTagger();
✦ Passing Options by overriding Default settings (change as required):
✦ Sample Usage detail of v0.0.6 feature list: 
$('#Element').TagTagger({ 
					'tagPool' : {
						'onlyAvailable' : true,
						'tags' : ['java', 'c', 'javascript', 'html', 'css']
					},
					'events' : {
						'onCreated':function(data){ alert('created tag: "'+data+'"'); },
						'onRemoved':function(data){ alert('removed tag: "'+data+'"'); },
						'onDuplicate':function(data){ alert('duplicate tag: "'+data+'"'); },
						'onNotInPool':function(data){ alert('tag: "'+data+'" not in pool'); }
					}
				});

✦ Complete Default mode: 
'box' : {
			'width' : '500px',
			'minHeight' : '90px'
		},
		'tag' : {
			'bgColor' : '#161d6d',
			'fontColor' : '#ff0000'
		},
		'tagProperty' : {
			'minLength' : '1'
		},
		'duplicateMsg' : {
			'showMsg' : 'true',
			'message' : '
         Oooppsss!!!       
Seems You Already Have That Tag. 
',
			'bgColor' : '#e3e18a'
		},
		'tagPool' : {
			'onlyAvailable' : false,
			'tags' : []
		},
		'events' : {
			'onCreated':function(data){},
			'onRemoved':function(data){},
			'onDuplicate':function(data){},
			'onNotInPool':function(data){}
		}




Twit this Page: