How to create a simple jQuery plugin

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		   
	jQuery.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($){				   
	jQuery.fn.extend({

		redBorder: function() {
			
			return this.each(function() {   
			
				jQuery(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:

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:
jQuery plugin example

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

Any questions or comments?

  1. Jeet says:

    Hi Jamy,

    First of all thank you for writing this informative article. Really useful to write own jquery plugin.

    Regards,
    Jeet

  2. Rajasekhar says:

    Excellent…!!!

  3. venkaygotuham says:

    hi sir,
    thank u for imfermation

  4. RK says:

    Hello Jamy,
    Its really nice. its useful for my start to write jquery own plugin :)