Don’t be scared: creating your own jQuery plugin is simple.  We’re going to use my jQuery Plugin Skeleton and create a simple plugin which opens all external links in a new tab (or window).  This plugin is currently being used on this site.

Example link to Google

First Thing’s First (Step One)

Since I’ve already offered a simple jQuery plugin skeleton for you, we’re going to start with it.  I’ve chosen to name this plugin “externalLinks”, but you’re able to call it whatever you like.

(function($){
    $.fn.extend({
        // external links
        externalLinks: function(options){
            var defaults = { option : 'value' };
            var options = $.extend(defaults, options);
            return this.each(function(){
                var o = options;
            });
        }
    });
})(jQuery);

Download step1.js:

• .js
• .txt
• .zip

Step 2: Default Variables

Now that we’ve initialized jQuery and named our plugin, we need to set up our default variables.  I’m using the class name external, which will be applied to all external links.  This allows us to style the links with CSS later.  This also allows for user customization, but we’ll discuss this later too.

(function($){
    $.fn.extend({
        // external links
        externalLinks: function(options){
            var defaults = { className : 'external' };
            var options = $.extend(defaults, options);
            return this.each(function(){
                var o = options;
            });
        }
    });
})(jQuery);

Download step2.js:

• .js
• .txt
• .zip

Step 3: Filtering Through Links

We’ll deal with styling the external class later.  Let’s focus on our code for now.

We now need to find all appropriate links to apply this classname to.  We’ll do this with jQuery’s filter function.  We’ll examine the hostname of each anchor’s HREF and ensure that it is different from our own, and also verify that the anchor is not already associated with our specified classname.

Once we have found these anchors, we need to capture their click event.

(function($){
    $.fn.extend({
        // external links
        externalLinks: function(options){
            var defaults = { className : 'external' };
            var options = $.extend(defaults, options);
            return this.each(function(){
                var o = options;
                $(this).filter(function(){
                    return this.hostname && (this.hostname).split(":")[0] !== (location.hostname).split(":")[0] || $(this).hasClass(o.className);
                }).click(function(event){
                    // do stuff.
                });
            });
        }
    });
})(jQuery);

Download step3.js:

• .js
• .txt
• .zip

Step 4: More Specific Filtration

Though we’ve already found anchors which point to a hostname different than our own, we still need to limit them further.  We also need to supply the filter function with an end() statement.  Anchors which contain an image are not going to be given our previously specified classname.

(function($){
    $.fn.extend({
        // external links
        externalLinks: function(options){
            var defaults = { className : 'external' };
            var options = $.extend(defaults, options);
            return this.each(function(){
                var o = options;
                $(this).filter(function(){
                    return this.hostname && (this.hostname).split(":")[0] !== (location.hostname).split(":")[0] || $(this).hasClass(o.className);
                })
                .not(':has(img)')
                .addClass(o.className)
                .end()
                .click(function(event){
                    // do stuff.
                });
            });
        }
    });
})(jQuery);

Download step4.js:

• .js
• .txt
• .zip

Step 5: Finally Opening the Link

Now that we’ve limited the anchors to exactly what we want, we’re able to finally open the link.  This could be done multiple ways, but I’ve chosen to use JavaScript’s open() method.  We’re also going to call jQuery’s PreventDefault() function, just to prevent anything extra from happening.

(function($){
    $.fn.extend({
        // external links
        externalLinks: function(options){
            var defaults = { className : 'external' };
            var options = $.extend(defaults, options);
            return this.each(function(){
                var o = options;
                $(this).filter(function(){
                    return this.hostname && (this.hostname).split(":")[0] !== (location.hostname).split(":")[0] || $(this).hasClass(o.className);
                })
                .not(':has(img)')
                .addClass(o.className)
                .end()
                .click(function(event){
                    open(this.href);
                    event.preventDefault();
                });
            });
        }
    });
})(jQuery);

Download step5.js:

• .js
• .txt
• .zip

Step 6: Applying Style

In a CSS document (or in-line CSS) we need to style our selected classname.  I am adding an image to the anchor.

a.external {
    background-image: url('icon-external-link.png');
    background-position: right top;
    background-repeat: no-repeat;
    padding-right: 20px;
    zoom: 1; /* IE */
}

Download icon-external-link.png:

• .png
• .jpg
• .zip

Step 7: Applying the Plugin to Your Web Page

This is our last step, as we’ve successfully created our plugin and styled the necessary classes.  Since it’s now completed and in working order, I’ve renamed it “jquery-externallinks.js”.  We now need to include it and the jQuery library into our web page.


<script src = "//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type = "text/javascript"></script>
<script src = "jquery-externallinks.js" type = "text/javascript"></script>


We also need to call our plugin, which is a simple one-liner.  We create a self-executing function and insert our plugin call into it.

<script type = "text/javascript">$
(function(){
    $('a').externalLinks();
});
</script>

Download entire package:

• zip

I hope you’ve learned something here, and if you require any more assistance, feel free to let me know via comments or my contact page.

Over the years, I’ve developed a simple skeleton for jQuery plugins. When creating your own plugin, it’s nice to have a semi-strict format to follow. All of my plugins use this skeleton.

(function($){
    $.fn.extend({
        // plugin name
        pluginName: function(options){
            var defaults = {
                option : 'value'
            }

            var options = $.extend(defaults, options);

            return this.each(function(){
                var o = options;
            });

        }
    });
})(jQuery);

Download this file:

• .JS
• .TXT
• .ZIP