jQuery Link Decorators Examples

A jquery plugin that provides you the ability to decorate file links and display tooltips containing information about the files when hovering over them.

Link to downloadable files: plaintext file and Portable Document Format file. The Font Awesome icons following the links are not present in the source markup, but are added by the plugin.

Here's a link to a non-existent file: no such file. This file does not exist, and the red icon and strikethrough are added by the plugin.

Move the mouse pointer over the links to see the pop-up notes, and use your browser's DOM inspector to see the inserted markup.

The source for the above behavior:

	
<script type="text/javascript">
// map file extensions to Font Awesome icons classes
var classmap = {
	pdf: "fa fa-file-pdf-o",
	txt: "fa fa-file-text",
	doc: "fa fa-file-word-o",
	docx: "fa fa-file-word-o",
	xls: "fa fa-file-excel-o",
	xlsx: "fa fa-file-excel-o",
	jpg: "fa fa-file-image-o"
};

var success = function(data) {
	// Decorate link with icon for file type, and popup showing size
	$(this).append(" <i class='" + classmap[data.ext] + "'></i><span class='popup'>[" + data.EXT + ": " + data.formattedSize + "]</span>");
};

var fail = function() {
	// Decorate missing link with warning
	$(this).append(" <i class='fa fa-exclamation-triangle'></i>")
	.append("<span class='popup'>This file is missing</span>")
	.addClass("missing");
};

// Decorate document links using the above callbacks
$("a:pathStartsWith(/test/documents)")
	.addClass("document")
	.addExtensionClass()
	.decorate(success, fail)
	;
</script>