We’ve already discussed at length many of the important topics regarding jQuery in the previous articles of this series. Things like what jQuery is and how it can be used, what kind of things people are using jQuery to make, and even how you can use jQuery’s resources to add animations to websites. Something we haven’t discussed yet, which is our next topic, is how someone can use jQuery’s impressive tool set to actually create their own plugins. As we saw in a previous article in this set, plugins can be used to do all kinds of things, from animating loading bars, to establishing cross-browser galleries of images, video, and sound files. This article is an overview of how you can go about creating your own plugin using jQuery.
What is a jQuery plugin?
In essence, a jQuery plugin is a way that a developer extends the jQuery prototype object. Extending this prototype object means that every jQuery object you add after the prototype will inherit any methods you add to the original. When you’re thinking about designing a plugin, it’s a good idea to work with a series of elements – like groups of text on a page, or images in a gallery, or something similar. There are tons of plugins out there already, but if you want to create your own, you can do so following the steps below.
Create a basic plugin
The following steps can be used when creating general type of plugin that you can either use privately or release to the public.
How jQuery works
In order to design with jQuery, it’s important to understand the basics of how it functions. Remember that a $() command is one that always returns as a jQuery object. Remember to attach that to the selector so that you aren’t leaving stuff out of your plugin.
Chaining
Chaining is a process that you need to learn before your plugin can be released to the world at large. This is when you link about 5 actions into a single selector by having all the objects return back to the original jQuery object. This is useful for keeping your code tidy and bundling like functions with like code.
Protect the $ alias
Understandably, the $ alias is incredibly popular in jQuery plugins. This makes sense, given that it’s shorthand for returning a jQuery object. However, you should be careful not to overuse it, and if you are going to use it another script library with jQuery alongside your own development, you should make sure to use the jQuery.noConflict() command in order to prevent things from breaking too much. You should also make sure to check out the function expression which is immediately invoked, which then can pass the jQuery function over the $ alias and make sure everything works out alright.
Minimize the footprint
As a matter of good practice and etiquette, it’s a good idea to only take up one place with the $.fn command. Not only does this limit the possibility that your plugin might override another one by accident, it also reduces the chance that it will be overridden itself. Plus, as a general matter of cleanliness, it’s nice to have tidy code that takes up as little space as possible. It can really prevent design documents from getting overloaded with text and subsequently becoming very difficult to parse through.
The each() method
Normally, jQuery objects feature links and references to DOM elements that they control or interact with. This is the reason why jQuery objects are called ‘collections’ so often – because they interact with a number of different individual elements. Manipulating specific elements (such as to get a data attribute or calculating a specific position on the screen) means you’ll want to use the .each() function in order to be able to loop through the other elements and only interact with the one you want. Notably, you’ll want to use .each() instead of .this() because .each() is chainable whereas .this() is not.
Accept options
Accepting options is an inevitable part of your plugins becoming more complex. It means that you support customizable options for your plugin. For example, you could add a feature to a function that previously made text green, where someone could enter a hexadecimal code that relates to a red-greenblue color code. Then, if they enter a different code, their text will appear as the color they designated in the code rather than green.
Creating a plugin from scratch might seem intimidating at first, but with a little practice, you’ll be developing awesome new additions to jQuery’s script library in no time! See examples of JQuery basic plugins here: http://www.w3schools.com/jquery/jquery_examples.asp
