A jQuery plugin for the Twitter Bootstrap framework to manage tags.
More information about the tagger plugin can be found at A Curious Animal blog site.
Tweet Follow @acanimal
tagger is a jQuery plugin that makes use of some Twitter Bootstrap
framework components so. Because of this you need to include the
Bootstrap CSS file in your web page followed by the tagger.css
file:
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/tagger.css" rel="stylesheet" media="screen">in addition to the jQuery library plus the
tagger.js
file:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/tagger.js"></script>
As any other jQuery plugin make an element selection and apply the tagger plugin:
$(some_selection).tagger();
tagger works on any element with a value attribute, typically an
input
element. Given next HTML element:
<input id="input1" value="some, tags, here" />and the next JavaScript sentence:
$('#myInput').tagger();this produces the next output:
readOnly
modeYou can force tagger to work in read only mode, that is, simply beautify
the set of tags specified in the input
element by setting
the readOnly
property to true
:
<input input="inputReadOnly" value="some, tags, here, working, in, readOnly, mode" />
$('#inputReadOnly').tagger({ readOnly: true });
By default tagger uses the ,
as the filed delimiter between tags.
You can change this using the fieldSeparator
property:
<input input="inputReadOnlyAndFieldSeparator" value="some | tags | here | working | in | readOnly | mode | with a | different | field separator " />
$('#inputReadOnly').tagger({ readOnly: true, fieldSeparator: '|' });
tagger offers three methods to work with our tags:
tags
: to add one or more tags
remove
: to remove one or more tags
clear
: to clean our tag list
$('#myInput').tagger('tags', 'some, more, tags');
$('#myInput').tagger('remove', 'more, tags');
$('#myInput').tagger('remove', 'more, tags');
clear
method uses internally the remove
tags
method wihout parameters:
$('#myInput').tagger('tags');
tagger allows to register different callbacks to know what is happening. They are:
onTagsAdded
: invoked after the tags
method is called
onTagsRemoved
: invoked after the remove
method is called
onClear
: invoked after the clear
method is called
onClick
: invoked when a tag label is clicked