GrabTag jQuery Plugin
Example 1
Example 2
Configuration
Limitations
Download
Example 1: Marking-Up Bibliographic Citations
Select text within the citation, click a tag type, then expand/contract a tagged region to refine. Right-click a tag to remove it.
Buddle, C.M. and D.P. Shorthouse. (2008). Effects of experimental harvesting on spider (Araneae) assemblages in boreal deciduous forests. The Canadian Entomologist 140(4): 437-452, 10.4039/n07-LS01
Example 1 Configuration
<![CDATA[<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.grabtag.js"></script>
<script type="text/javascript" src="jquery.contextMenu.js"></script>
<script type="text/javascript">
$(function(){
$('.biblio-selector').grabtag({
'config_ele' : '#grabtag-initializer'
'multitag' : false,
'tags' : {
"journal" : [
{ "author" : { 'background-color' : '#8dd3c7' }},
{ "date" : { 'background-color' : '#ffa1ff' }},
{ "title" : { 'background-color' : '#ffffb3' }},
{ "journal" : { 'background-color' : '#79fc72' }},
{ "volume" : { 'background-color' : '#72f3fc' }},
{ "pages" : { 'background-color' : '#7284fc', 'color' : '#fff' }},
{ "doi" : { 'background-color' : '#ffabab' }} ],
"book" : [
{ "author" : { 'background-color' : '#8dd3c7' }},
{ "date" : { 'background-color' : '#ffa1ff' }},
{ "title" : { 'background-color' : '#ffffb3' }},
{ "booktitle" : { 'background-color' : '#d19a41', 'color' : '#fff' }},
{ "pages" : { 'background-color' : '#7284fc', 'color' : '#fff' }},
{ "edition" : { 'background-color' : '#fb8072' }},
{ "editor" : { 'background-color' : '#948669', 'color' : '#fff' }},
{ "publisher" : { 'background-color' : '#fdb562' }},
{ "institution" : { 'background-color' : '#000', 'color' : '#fff' }},
{ "location" : { 'background-color' : '#bfbada' }},
{ "isbn" : { 'background-color' : '#80b1d3' }},
{ "doi" : { 'background-color' : '#ffabab' }} ],
"extra" : [ "note", "container", "retrieved", "tech", "translator", "unknown", "url" ]
},
'active_group' : 'journal',
'onActivate' : function(obj, data) {
$('#grabtag-output').val(data.content);
$('[data-grabtag="volume"]', '#grabtag-initializer').parent().hide();
},
'onMultitagWarning' : function(obj, tag) {
alert($(tag).attr("data-grabtag") + " has already been used");
},
'onTag' : function(obj, tag, data) {
$('#grabtag-output').val(data.content);
$(tag).parent().hide();
console.log(data);
},
'onTagResize' : function(obj, data) {
$('#grabtag-output').val(data.content);
console.log(data);
},
'onTagRemove' : function(obj, data) {
$('#grabtag-output').val(data.content);
$('#grabtag-initializer').find('[data-grabtag=' + data.tag.type + ']').parent().show();
console.log(data);
}
});
});
</script>
</head>
<body>
<div id="grabtag-initializer" class="clearfix"></div>
<p class="biblio-selector">Buddle, C.M. and D.P. Shorthouse. (2008). Effects of experimental harvesting on spider (Araneae) assemblages in boreal deciduous forests. The Canadian Entomologist <span data-grabtag="volume">140(4)</span>: 437-452, 10.4039/n07-LS01</p>
<textarea id="grabtag-output"></textarea>
</body>
</html>]]>
Example 2: Marking-up Free-form Text (Sticky Buttons)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales nunc pharetra orci venenatis laoreet semper enim molestie. Fusce aliquet sagittis lobortis. Vivamus in nisi sem, vitae accumsan massa. Donec bibendum, ipsum a fringilla placerat, mi mi tincidunt mauris, sed dapibus diam odio in dui. Curabitur in tincidunt ipsum. Pellentesque posuere leo libero. Maecenas sit amet urna et magna varius tincidunt. Pellentesque urna ante, ornare vitae suscipit eu, tempus eu elit. Fusce id turpis quis massa lobortis sodales. Integer in nulla lectus, in tincidunt elit. Sed tempus malesuada sem ac faucibus. Aenean eleifend consectetur nisl ut consectetur. Nulla facilisi. Cras ullamcorper tincidunt convallis. Suspendisse varius vestibulum tortor eget egestas.
Example 2 Configuration
<![CDATA[<script type="text/javascript">
var config = {
tags : ["taxon" : { "background-color" : "#80b1d3", "color" : "#fff"}, "size", "shape"],
sticky : true,
sticky_tag : 'size',
config_ele : '#freeform-config',
onTag : function(obj, tag, data) {
obj = null; tag = null;
var offset = 'offset:start=' + data.tag.offset.start + ', offset:end=' + data.tag.offset.end;
$("#freeform-output").val(data.tag.type + ':' + data.tag.value + ' (added, ' + offset + ')');
},
onTagResize : function(obj, data) {
obj = null;
var offset = 'offset:start=' + data.tag.offset.start + ', offset:end=' + data.tag.offset.end;
$("#freeform-output").val(data.tag.type + ':' + data.tag.value + ' (resized, ' + offset + ')');
},
onTagRemove : function(obj, data) {
obj = null;
var offset = 'offset:start=' + data.tag.offset.start + ', offset:end=' + data.tag.offset.end;
$("#freeform-output").val(data.tag.type + ':' + data.tag.value + ' (removed, ' + offset + ')');
}
};
$(".freeform").grabtag(config);
</script>
<div id="freeform-config" class="clearfix"></div>
<p class="freeform">Lorem ipsum...</p>]]>
Pre-selections
Enabled as shown in Example 1 for the volume tag. The region should be marked-up as ...<span data-grabtag="volume">242(1)</span>...
- config_ele
- The element where a control panel with clickable tag types will be created
- multitag
- true or false for tagging with the same tag, default is false
- tags
- An array of tags such as ["this", "that", "other"] or a hash of tags in grouped arrays such as { "group1" : ["this", "that", "other"], "group2" : ["here", "there", "nowhere"] }. Each tag can also be optionally styled as shown in example 1 above, otherwise a sample of 15 included colors will be drawn.
- active_group
- Group of tags to be made active on load (if tags are arranged in groups)
- sticky
- true or false to cause tag to be applied immediately after selections in extended element, default is false
- sticky_tag
- Tag to be made sticky on load
- onActivate(obj, data)
- Callback function that executes after the control panel loads
obj = jQuery object being extended
data = { 'content' : 'marked up content' }-
- beforeTag(obj, tag)
- Callback function that executes before a tag is created
obj = jQuery object being extended
tag = jQuery object for chosen tag type
- onTag(obj, tag, data)
- Callback function that executes after a tag is created
obj = jQuery object being extended
tag = jQuery object for chosen tag type
data = { 'tag' : { 'type' : 'author', 'value' : 'Shorthouse', 'offset' : { 'start' : 22, 'end' : 32 } }, 'content' : 'marked up content' }
- onTagResize(obj, data)
- Callback function that executes after a tag is resized
obj = jQuery object being extended
data = { 'tag' : { 'type' : 'author', 'value' : 'D.P. Shorthouse', 'offset' : { 'start' : 17, 'end' : 32 } }, 'content' : 'marked up content' }
- onTagRemove(obj, data)
- Callback function that executes after a tag is removed
obj = jQuery object being extended
data = { 'tag' : { 'type' : 'author', 'value' : 'D.P. Shorthouse', 'offset' : { 'start' : 17, 'end' : 32 } }, 'content' : 'marked up content' }.
NOTE: a right-click context menu is drawn using jquery.contextMenu.js. In its absence, this callback will not be executed.
- onMultitagWarning(obj, tag)
- Callback function that overrides default warning when user attempts to create multiple tags of same type while multitag set to false
obj = jQuery object being extended
tag = jQuery tag that was clicked
- onOverlapWarning()
- Callback function that overrides default warning when user expands tag into another tag or when user attempts to create tag within another tag
Additional Methods
- $(selector).grabtag("remove_all");
- Removes all tags from selector
- $(selector).grabtag("destroy");
- Destroys (unbinds) extension from selector
-
This plug-in assumes there is no additional HTML mark-up in the element being extended except for pre-selected <span> elements with matching tag types i.e. tag types listed in the tags configuration object. Any additional HTML will be stripped. Offset values returned in callback functions are measured in raw text counts and do not include any underlying HTML, including that of pre-selected tags. These actions are performed because HTML mark-up wreaks havoc on range selections, dynamically created and adjusted mark-up, and resultant offset counts.
Internet Explorer < 9 will not (currently) work because it does not support the range selection method getRangeAt(0).
jQuery plug-in: jquery.grabtag.js, 8.9kb minified
jQuery contextMenu: jquery.contextMenu.js, from Matt Kruse.
Stylesheet: grabtag.css