tagtagger.js

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**: http://plugins.jquery.com/TagTagger/
**For Demo**: [Check Here](http://exexzian.github.io/TagTagger.js/demo/taggerDemo.html)

---

**Version - 0.0.6**: comes with more useful and flexible features - a big credit goes to - [@Lewiscowles1986](https://github.com/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){}
	}