Post Pic

The Basics: Building a jQuery Plugin

If you’re looking to become a tried-and-true front end developer, the jQuery plugin is probably going to be your best friend. In today’s post, we’ll go through the basics of creating your very own plugin. Let’s get started!

Step One: Adding the Groundwork

The beginning of your plugin should always be the closure. The closure prevents variables from extending into the global scope. We’ll define the variable $ as jQuery to prevent any conflicts that may arise if you ever use the jQuery library with other JavaScript libraries that also utilize the $ symbol. If working on a project with a group of other people, it might also be a good idea to pre-define window, document, and undefined, so that you’re sure what you’re calling is what you’re getting. But for now, we’ll just stick with jQuery.

[code lang=”javascript”]
(function($) {

}(jQuery));
[/code]

Step Two: Naming the Plugin

Next, we’ll extend the jQuery.fn object to include our own custom method. Replace nameOfPlugin with the name of your plugin, whatever it may be. In our plugin, we’ll be passing in some custom options that we’ll be able to utilize in our plugin. This helps keep the plugin as flexible as you want, so you can reuse it for different projects without re-writing the plugin code.

[code lang=”javascript”]
(function($) {
$.fn.nameOfPlugin = function(opts) {

};
}(jQuery));
[/code]

Step Three: Defining the Default Variables

Now that we have the ability to pass in some optional parameters to our plugins instantiation, we’re going to want some default values. So we’ll create an object named defaults that will hold all of the default options that can optionally be overwritten. Finally, we’ll create one more variable that we’ll name options that will hold the final options used for the plugin (the defaults merged with the ones overwriting the defaults passed in during the instantiation).

[code lang=”javascript”]
(function($) {
$.fn.nameOfPlugin = function(opts) {
var defaults = {},
options = $.extend(defaults, opts);

};
}(jQuery));
[/code]

Step Four: Looping Through the Objects

This next step will loop through all the matching jQuery objects used during the instantiation and run the function you give it. For instance, consider $('div.foo').nameoOfPlugin(). The loop will run over all <div />‘s with the class name of foo.

[code lang=”javascript”]
(function($) {
$.fn.nameOfPlugin = function(opts) {
var defaults = {},
options = $.extend(defaults, opts);
return this.each(function() {

});
};
}(jQuery));
[/code]

Step Five: Make the Magic Happen

From here on out, it’s up to you to add the functionality to make your plugin work. Remember, anything that you include inside the each loop will be iterated over as many jQuery objects are matched during the instantiation. You can use this inside the loop to target the current object, but be mindful of your scope. I like to pre-define a couple variables at the beginning of my loop so I know exactly what I’m targeting.

[code lang=”javascript”]
(function($) {
$.fn.nameOfPlugin = function(opts) {
var defaults = {},
options = $.extend(defaults, opts);
return this.each(function() {
var base = this,
$base = $(this);
});
};
}(jQuery));
[/code]

Step Six: Instantiating the Plugin

The final step (besides actually writing the plugin functionality) is to instantiate it. At the bottom of your markup file (right before the closing <body> tag, we’ll add the following code. Notice the continued use of the closure. Again, this is to make sure $ always equals jQuery. Replace the selector with what you’re looking to target, the plugin name with whatever you named your plugin, and you’re all set.

[code lang=”html”]
<script type="text/javascript">
(function($) {
$(‘div’).nameOfPlugin();
}(jQuery));
</script>
[/code]

Conclusion

So if you followed the directions above, you should now have the template for your own plugin and you can start creating some professional looking applications. Remember to keep your code as clean and readable as possible (with commented documentation), run it through JSLint to make it sparkle, and minify a copy of it to send to production.

If you have any questions, comments, or had any troubles in getting your plugin to work, post them in the comments and we’ll get things sorted out for you. Thanks for reading, and happy jQuerying!

Subscribe to RSS Feed

Related Posts