How to create a jquery plugin from scratch in 3 easy steps.

Introduction

jQuery plugins are a great way to reuse a certain functionality you find yourself using all the time. Whether you make a Plugin for yourself or share it with the world Plugins will save you a lot of time. The best thing about Plugins is that they are really easy to make! Let’s get started.

All the Code you will need

Here is all the code you will need to get started with your first plugin:

(function($) {
   $.fn.myPlugin = function(options) {
    var config = {foo: 'bar', anothervalue: 5};
    var defaults = $.extend(defaults, options);
     this.each(function() {
       // element-specific code here
       defaults.foo; // this will get the option that was passed through the plugin, first it looks for default
       // in this case foo is equal to the string bar
     });
     return this;
   };
 })(jQuery);

All you need to change in the code above is the myPlugin to whatever the name of your plugin is, and pass in whatever options you want the plugin to use. Having options allows for the plugins use to be more abstract and easier to modify. We use this.each to attack every element that the plugin needs to be applied to. For example if we want to apply the plugin to all elements with class “foo” then using the this.each makes sure that we go through all the classes “foo” and apply the plugin.

To use our options inside our code we have created an object called options. So to call on an option we have set use “options.option”. In the code above we call the option.foo which by default is the string “bar”.

How to Implement

In your page you will need to add jQuery of course and then reference your jQuery plugin. Then you need this line of code:

$(document).ready(function(){ $(".foo_class_of_element").myPlugin(); });

This will simply apply your plugin with the default options and apply itself to each “.foo_class_of_element” class on the page. To pass in options you have something like this:

$(document).ready(function(){ $(".foo_class_of_element").myPlugin({foo: 'bar2'}); });

Now the value of foo is not “bar” but instead its “bar2″.

Conclusion

That’s it you have created your first jQuery plugin, feel free to go to jquery.com and add it to the great library of existing plugins out there!

Related posts:

1. Advanced jQuery Placeholder Plugin (cross-browser support)
2. Create a Disappearing jQuery Dialog Message (Growl Like)
3. Working with cookies using jQuery and JavaScript
4. Simple Fast and Dirty Introduction to jQuery
5. Defer Load jQuery Plugin

Did you absolutely LOVE this article... share it!