Skip to content

exexzian/TagTagger.js

Repository files navigation

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){}
	}

About

jQuery plugin to create and manage tags

Resources

License

Stars

Watchers

Forks

Packages

No packages published