jQuery plug-in – highlight external links
I’m pretty new to the whole jQuery game, having really only started to look at in a number of weeks ago. Until then I have been happily using Prototype and Scriptaculous, and as I knew them I didn’t see a point to move to another library. However, the more examples I saw of jQuery the more elegant I thought it was, and so now am in the process of learning it more, converting some code over and trying my hand at plug-ins. So here’s introducing my first jQuery plug-in!
This plug-in allows you to automatically append a class and title to any external resources. You can pass in multiple domains that are thought of as ‘local’, and anything else with a protocol that doesn’t belong on the passed local domains will be flagged as external. If no domains are passed then the current domain in the url will be used as-is (with the www., etc., if present).
That probably doesn’t make much sense, but I’m sure it will when using it…
So here’s the code:
/**
* External Links, jQuery plug-in.
*
* This plug-in allows you to automatically append a class and title to
* any external resources. You can pass in multiple domains that are
* thought of as 'local', and anything else with a protocol that doesn't
* belong on the passed local domains will be flagged as external.
* If no domains are passed then the current domain in the url will be
* used as-is (with the www., etc., is present).
*
* Examples of use:
*
* $(document).ready(function() {
* $('body').externallink();
* });
*
* $(document).ready(function() {
* $('#mainContent').externallink({
* localhosts: ['example.com', 'example.org', 'ex.com'],
* classname: 'externalResource',
* title_add: 'none'
* });
* });
*
* @copyright Copyright (c) 2008 Andrew Collington
* @version $Id$
*/
(function($) {
$.fn.externallink = function(options) {
var defaults = {
localhosts: [],
classname: 'external',
title_add: 'append', // none, append, overwrite
title_say: 'external resource'
};
var options = $.extend(defaults, options);
if ($.inArray(document.domain, options.localhosts) == -1) {
options.localhosts.push(document.domain);
}
$($($('a', this).get()).filter(function(){
return this.firstChild.nodeType == 3 || this.firstChild.nodeName != 'IMG'
}).filter(function() {
var href = $(this).attr('href');
if (/^(w+)://(.*)/.test(href) == false) return false;
for (var h = 0; h < options.localhosts.length; h++) {
if (href.indexOf(options.localhosts[h]) != -1) return false;
}
return true;
}).get()).each(function(i, el){
$(this).addClass(options.classname);
if (options.title_add != 'none' && options.title_say.length) {
if ('overwrite' == options.title_add) {
el.title = options.title_say;
} else if ('append' == options.title_add) {
if (el.title) el.title += ' [' + options.title_say + ']';
else el.title = options.title_say;
}
}
});
};
})(jQuery);
A couple examples of using the plug-in:
$(document).ready(function() {
$('body').externallink();
});
$(document).ready(function() {
$('#mainContent').externallink({
localhosts: ['example.com', 'example.org', 'ex.com'],
classname: 'externalResource',
title_add: 'none'
});
});
1 Response