Ajax fragment links

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

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);

Posted in

Leave a reply