μllinx - Multi Directional Hperlinks for the Masses

Option A: The widget way

No need to downloads! You just need to include the widget script tag in your page:

<script src="http://mullinx.makinguse.com/get/" type="text/javascript"></script>

Option B: jQuery Plugin

Download the μllinx jQuery plugin (Version 0.2):

• Uncompressed: mullinx.js (7.7 KB)
• Minified: mullinx.min.js (4.9 KB)

You can download μllinx jQuery Plugin from these websites as well:

• jQuery Plugins
• Google Code

Option A: The widget way

With the μllinx widget you don't neet to download or setup scripts or libraries in your page.
You just need to include the widget script tag at the end of your page:

<script src="http://mullinx.makinguse.com/get/" type="text/javascript"></script>

Option B: The jQuery plugin way

If you don't want to embed the widget, you can opt for the μllinx jQuery plugin. In order to use the plugin you need the jQuery Library to be included in your page header:

<script src="jquery.js" type="text/javascript"></script>
<script src="mullinx.min.js" type="text/javascript"></script>

Once you have included the libraries in your header, don't forget to add these few lines of javascript code into your page:

$(function() {
	$("a").mullinx();
});

Now you need to add the additional directions to your <a> tags, doing it is pretty simple, you just need to insert the url in the rev attribute, using the ; (semicolon) as separator:

<a href="http://mainlink.uri" rev="second.uri;third.uri;...;last.uri">Main Site</a>

You can also define a nicer title for each url, adding | (pipe character) and the title just after the url:

...rev="second.uri|Second Title;third.uri|Third Title;...;last.uri|Last Title"...

Why not using the rel attribute? Because "rev" is less used, "rel" could create some problem for is widely used for other purposes

The widget version of μllinx introduces two themes: dark and bright version. , if you want to switch to the bright one (similar to the one you can see in this page) you just have to modify a little bit the widget script tag:

dark theme:<script src="http://mullinx.makinguse.com/get/dark/" type="text/javascript">
</script>
bright theme:<script src="http://mullinx.makinguse.com/get/bright/" type="text/javascript">
</script>

The dark theme is the default one, so if you don't specify any theme in the script tag you'll get a dark μllinx.

μllinx jQuery plugin has some settings you can customize. The available options are:

• bgcolor: defines the background color. #000 (black) is default.
• color: defines the font color. #fff (white) is default.
• hoverColor: defines the links color when mouse moves over.#ffff00 (yellow) is default.
• opacity: defines μllinx transparency, values from 0 to 1 (0 is transparent, 1 no see-through). 0.9 is default.
• fontSize: defines font size. 0.8em is default.
• fontFamily: defines font family. Arial is default.
• separator: defines the spearator between urls in the rev attribtue. ; (semicolon) is default.
• sub_separator: defines the spearator between url and title in the rev attribtue. | (pipe) is default. "|",

Here we go with an example:

$(function() {
	$("a").mullinx({
		color:"#00ffff",
		opacity:0.5,
		bgcolor:"#fff",
		color:"#000",
		hoverColor:"#0000ff",
		fontSize:"18px",
		fontFamily:"Georgia,sans-serif"
	});
});