The frag-linx widget (Ajax fragment links) embeds linked document fragments in the current page for presentation as tooltips or expandable content.
Examples
Place the following code in the <head> of your XHTML document.
Note: For best performance, it is recommended that you combine all the JavaScript files below into a single minified file.
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.jaria.js"></script>
<script type="text/javascript" src="jquery.frag-linx.js"></script>The plugin can act on any link in the <body> of your document, for example:
<p><a href="glossary.html#future-beans">future beans</a></p>The plugin needs to be initialised after the link markup has been parsed (once the DOM is ready is soon enough).
$('body').fragLinx();There are various options that can be passed on initialisation.
Now the linked content fragments need to be set up. For the example above, you would need create a glossary.html file, containing page fragments marked-up like the following:
<h1>Glossary</h1>
<div class="section" id="future-beans">
<h2>Future beans</h2>
<p>Canned beans stored in anticipation of a nuclear war or
<a href="#zombie-apocalypse">zombie apocalypse</a>.</p>
</div>
<div class="section" id="zombie-apocalypse">
<h2>Zombie apocalypse</h2>
<p><a href="http://l4d.com/">Bring friends....</a></p>
</div>This will result in links to page fragments that are progressively enhanced to request the page using Ajax, and display the contents of the linked fragment as a toolip or expandable section (depending on configuration and CSS used).
Working example
A complete demonstration of the frag-linx plugin is available.
Download
frag-linx is licensed under the The GNU General Public License (GPL), by downloading it you are agreeing to abide by the terms of that license.
Package
Download the complete frag-linx 0.3 example package (.zip)
Individual files
- jquery.frag-linx.js 0.3 (9 kB uncompressed)
- Dependencies
- Required: jQuery (tested with version 1.3.1)
- Required: jQuery ARIA plugin
Plugin options
The following options can be can be passed on initialisation of the plugin:
options = {
behaviour : 'expandable', // 'expandable', 'tooltip' (currently only 'expandable' is supported)
animationSpeed : 'normal', // 'slow', 'normal' or 'fast' or a number of milliseconds
linkSelector : 'a', // can be specified to select some links and not others
onlyEverOneOpen : true, // if set to true, only one link content can be expanded at a time.
callback : null // a callback function to perform after content is expanded or collapsed
};
$('body').fragLinx(options);