CSS-Plus
CSS-Plus
Play with web technologies

How to create a simple jQuery plugin

April 23, 2010
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.

I avoided learning how to create a jQuery plugin for quite a while because I thought it would be too difficult and/or too complicated to learn since I'm not a 'hardcore' programmer. Contrary to what I thought, it is actually pretty easy to create a plugin as long as you know the jQuery basics.

jQuery plugins are great because they allow you to quickly implement something relatively complicated with, normally, a single line of jQuery. They also normally allow you to change a few options very easily. Have you ever needed a plugin to do something (that it should be able to do easily) but it wasn't able to? I've had this a few times and it would be quite convenient to edit the plugin to my liking, which is possible once you know what is actually going on.

Let's get started.

The basics

This is what the basic structure of a plugin looks like.

// Place the plugin within an anonymous function to avoid outside problems
(function($) {
    // Attatch the new method
    $.fn.extend({
        // Plugin Name
        pluginName: function(options) {
            return this.each(function() {
                // Here is where you insert your normal code
            });
        },
    });
})(jQuery);

redBorder jQuery plugin

The plugin I'm going to create is a plugin that creates a red border around the elements the user selects.

(function($) {
    $.fn.extend({
        redBorder: function() {
            return this.each(function() {
                $(this).css("border", options.border);
            });
        },
    });
})(jQuery);

There we go, the plugin is done! As you can see, all that has changed is:

  • pluginName has been replaced with redBorder
  • jQuery(this).css("border", "3px solid red"); has been inserted

Create a .js file and paste/start writing your plugin within that file. After you have done that, create a link to that file within your HTML document. Now, all you have to do is load jQuery, load the redborder.js plugin and call the redBorder function to selected elements.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.redborder.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("p").redBorder();
    });
</script>

The output would look something like this:

red-border

Adding options

(function($) {
    jQuery.fn.extend({
        // Options is added within the brackets after function
        // This informs the plugin that options will be used
        redBorder: function(options) {
            // Defaults options are set
            var defaults = {
                border: "3px solid red",
            };
            var options = $.extend(defaults, options);
            return this.each(function() {
                jQuery(this).css("border", options.border);
            });
        },
    });
})(jQuery);

Now you can edit the border options, as long as it adheres to the 'border' properties syntax within the CSS.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.redborder.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("p").redBorder({ border: "3px dotted green" });
    });
</script>

The output of this would look something like this:

green-border

There you have it. A very simple jQuery border plugin with basic options. Click here to learn to create more advanced jQuery plugin options.