autoabbr.js
autoabbr.js is a jQuery plugin that takes a list of words and automatically inserts <abbr> tags into the DOM whenever it finds one of these words. The intended usage is for inserting glossary definitions inline into a page purely with JavaScript.
Installation
Install it like you would any jQuery plugin by including it after jQuery:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="autoabbr.js"></script>
Basic Usage
The most basic usage is just to run this on your paragraph tags and to supply a word file.
$('p').autoabbr({ src: 'words.json' });
The words file should just be a simple hash of { word1: definition1, word2: definition2 }
You can also supply your words directly inline:
$('p').autoabbr({ words: { "lorem": "word 1", "ipsum": "word 2" }});
You could also supply both words
and src
, in which case the words loaded from the file will append/overwrite the words supplied inline.
Words
- Word matching is case-insensitive but exact. e.g. "Lorem" in the text will match "lorem" in the word file, but will not match "lor" or "lorems".
- Words break on any non-letter. e.g. "lorem" in the word file would apply to the lorem in "lorem-ipsum".
- You can use a wildcard at the end of a word e.g. "lor*" in the word file would match "lor" or "lorem" in the text.
Other Options
The options parameter lets you customise things a bit.
{ 'defTag': 'abbr', // The element to use around definitions. 'attrKey': 'data-definition', // The attribute name to use for the word's key. Empty string to omit. 'attrDef': 'title', // The attribute name to use for the word's definition. Empty string to omit. 'addClass': 'definition', // A class to attach to your definition elements. Empty string to omit. 'includeWord': 'true' // Whether or not to include the word itself in the definition attr, format 'word: definition' 'onComplete': function(){...} // A callback function to run when adding words is complete. e.g. for attaching a toolTip library }