jQuery plugins

Function vs. plugin, fight!

When choosing whether to create a plugin or a function, you should have two main questions.

Is this something I am going to use alot?
Am I going to use this in a chain?

If the function is going to be used in a single page and nowhere else, you might want to consider if it is worth using your time to create a plugin. Creating a plugin allows you to bring more flexibility than most functions. Additionally, if you are using your function in a chain of jQuery functions, it might make it fit in more naturally and make it more flexible. However, nothing is stopping you from creating regular functions with jQuery methods (but these will not be chainable, more on that further down).

How to create the plugin

I suggest we start off by looking at how we are going the use the resulting code.

//You can run several functions in one single line
$('img').Show().SomeFunctionName().doMore();

$('.special').SomeFunctionName({firstOpt:true});

As you can see above, we are going to use the function that we are going to make (SomeFunctionName) like we use any other code. Additionally we will be able to set parameters for the function. We can already identify clear advantages by using a jQuery plugin. The jQuery selector allows us to easily use the function with the objects of our choice, this makes our function very flexible.

(function($) {
  $.fn.SomeFunctionName = function(options) {
  	//Our function comes here
  }
})(jQuery);

The code above shows how we define our jQuery function. In this case I called our function "SomeFunctionName" and our parameters are being passed through options. First we are going to insert the placeholder for our function.

(function($) {
  $.fn.SomeFunctionName = function(options) {
	
	return this.each(function (i) {	
		//Your code goes here	
	});
    
  }
})(jQuery);

As you can see above, our function will be a simple .each() loop function, which is a very nice function in jQuery. Many wonder why we use return in front of the loop, and the answer is very simple. When you chain the jQuery functions like we did earlier, you need to return the object so that the next function can use it as well. It is at the very core of jQuery programming. Next we are going to handle the options

(function($) {
  $.fn.SomeFunctionName = function(options) {
	
	defaults = {
			firstOpt: false,
			secondOpt: 5,
			thirdOpt: "blue"
		}
	
	var settings = $.extend(defaults, options);
	
	return this.each(function (i) {	
		var opts = settings;
        	
		//Your code goes here	
	});
  }
})(jQuery);

We start by adding our default settings in the form of a simple object. The user can use the same variables when calling the function. Then we merge the options provided by the user with our default settings and save it in the variable settings. Finally we pass the settings into our loop and save them as opts.

Now, let's look at the plugin code.

(function($) {
  $.fn.SomeFunctionName = function(options) {
	
    //Your default options
	defaults = {
			firstOpt: false,
			secondOpt: 5,
			thirdOpt: "blue"
		}
	
    //Merging default options with passed arguments
	var settings = $.extend(defaults, options);
	
    //Returning the element to the chain and running a loop
	return this.each(function (i) {	
		var opts = settings;
        	
		//Your code goes here	
	});
  }
})(jQuery);

I hope this tutorial will help you create a jQuery plugin and help you understand how it is constructed! If you want to check out a real life example of a plugin, you can check out my first plugin here

Comments:

creating your own

Function vs. plugin, fight!

How to create the plugin