Why Create a jQuery plugin

Sometimes its is useful to have a piece of functionality available throughout your code. Maybe you want a single function you can call on a jQuery selector that performs a specific action on such selector. Or maybe you wrote a utility function Hide My WP in one of your projects and now you want to be able to move it easily to other projects. In any case writing a plugin is your best option.

jQueryis great. It’s cross-browser, easy to learn, and helps you make very user-friendly interfaces. It also comes with a lot of useful plugins to do almost whatever you want.

But sometimes a lot is not enough, what if you can’t find just the right plugin to suit your needs? Or maybe there exist a plugin but its too large, and you just want part of it. The solution might be to roll up your selves and write your own stuff. After all it sound more complicated than it really is. This short tutorial will go through the process of writing a simple plugin, adding some options, and even perform a callback.

Setting Up

You can download the entire project from GitHub

For this tutorial, we will be creating a simple accordion plugin. Let’s create a js file and put it in the “js” directory of our website. It’s tradition to start all js plugin’s files with “jquery dot” followed by the actual plugin name, so we’ll call ours “jquery.simple-accordion.js”.

– Our plugin file inside the js directory inside our website directory

Now we need to include our plugin file along with the jQuery library to our main HTML page (index.html). It is best practice to include the jQuery library directly from the Google api servers, since they are distributed across the world instead of your single server location: Closer servers usually means faster response times for the visitor. Another advantage of having jQuery included from Google, is that when a visitor comes to your site they may already have the jQuery script in their local cache. Pre-cached content usually means faster load times for the visitor.

The jQuery Plugin Structure

jQuery is packed with all the necessary hooks to aid you in the development of our plugin. But is good to keep up the JavaScript good practices, so we must make sure everything is kept inside a local scope. Let’s start with the basic shell of a jQuery plugin:

(function($) {

$.fn.simpleAccordion = function() {

//TODO: code for simple accordion plugin

}

}(jQuery));

Let’s quickly go through what’s going on here. By including everything in the (function() {}) self-enclosed JavaScript pattern, we’re making sure that all the variables in our plugin will stay safely outside of the global namespace. We don’t to run into conflicts with any other javascript running in this page, so we must isolate our code as we did above.

The other thing you might notice is that we’re defining our plugin as if jQuery was in it’s “no-conflict” mode. Again, we’re seeking to avoid colliding with other JavaScript on the page, and thus we want to make sure that our plugin isn’t reliant on the default $, which could be used by another library.