Posted on by & filed under Content - Highlights and Reviews, Mobile Development, Programming & Development.

jQuery is a powerful library that allows JavaScript developers to easily manipulate the Document Object Model (DOM) in web pages, which is one of the reasons why jQuery is a popular choice for app building. In addition to its DOM manipulation ability, jQuery offers other useful utility features such as support for cross-browser AJAX, Animations, Effects, and Compatibility methods.

While the variety of features offered by jQuery alone are sufficient for most web applications, some advanced use cases require additional features to be present. jQuery offers an extension mechanism that enables plugins that extend the functionality of jQuery. As a result, many developers have written custom plugins that range from new animations and effects to rigorous form validation. Before embarking on writing your own plugin, check out the plugin registry at http://plugins.jquery.com/ to see if an existing plugin would fulfill your requirement.

The purpose of this article is to cover the process of writing a new custom jQuery plugin using the API exposed by jQuery. For more details on writing jQuery plugins, look at Chapter 11: Creating Plugins in jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples. Let’s get started on our plugin. Open up your favorite text editor and write the following code:

The jQuery.fn object is used to add new functions to the jQuery object (the $(..) object). The name of the function should preferably be the name of your plugin. While it is possible to add multiple functions for one plugin, it is not recommended. Instead you should use a different mechanism, such as a function argument, to differentiate between multiple functionalities that your plugin might provide.

An additional note, before proceeding, is that it is also recommended to wrap your plugin’s function definition inside another function like this:

The purpose of doing this is to explicitly define the $ variable as referring to the global jQuery object so that no conflicts occur with other libraries that might be using this variable name. Inside your plugin function, you can continue to use the $ variable to refer to jQuery.

Let’s create a jQuery plugin, called greenify, that changes the background color of the selected object to green. While this might not be the most useful plugin available, it serves our purpose of demonstrating the creation of a plugin. Create a file named, greenify.js and add the following code:

Inside the plugin function the this keyword refers to the collection of jQuery objects on which the function has been applied. To perform the manipulation on each object, you can use jQuery’s each method to iterate over the objects, as has been done in the above code. We have used the css method of jQuery to change the background of each object to the color green.

Now link the file to your web page along with jQuery. You can then call the following function within your script:

Note how “myElem” is the id of the element you want to turn green. Similarly, you can also call this function for multiple objects by using an appropriate selector. For example, to turn the background of all paragraphs to green, we can use:

Since a jQuery plugin should ideally be usable in multiple settings (especially if you decide to publish it on the jQuery registry), it must follow the recommended best practices so that it works flawlessly in any environment. One such recommended practice is to maintain chainability of the jQuery plugin. Method chaining is a technique that allows a sequence of methods to be called on an object without having to refer to the object for each invocation. For example, in the following code, we set the width, change the background and show the element in one line:

In order to enable this, each method in the chain must return a reference to the object itself so that the next method in the chain can act on it. For our jQuery plugin function this means that we need to place a return statement at the end. Modifying the earlier code, we write:

Now the return keyword before the call to the each function ensures that we maintain method chainability.

This is just the tip of the iceberg when it comes to writing plugins for jQuery. For more information, visit the official docs at http://docs.jquery.com/Plugins/Authoring. Also GitHub is a place where many open source jQuery plugins are hosted, so it is a good idea to read their code to learn more.

You can find out more on using jQuery in the books listed below.

Safari Books Online has the content you need

Check out these jQuery books available from Safari Books Online:

jQuery is a popular JavaScript library that simplifies event handling, animating, and Ajax interactions for rapid web development. Even casual web designers, who create web pages for fun, want to add the latest cool effects to their sites, and jQuery–the fast, flexible JavaScript library–is a tool of choice. From visual effects, special controls, and Ajax made easy, the jQuery and jQuery UI: Visual QuickStart Guide will teach readers how to make the most of jQuery using the task-based, step-by-step, visual format they love. It’s crammed with examples and there’s a special section on widgets.
In Pro jQuery, seasoned author Adam Freeman explains how to get the most from jQuery by focusing on the features you need for your project. He starts with the nuts and bolts and shows you everything through to advanced features, going in depth to give you the knowledge you need. Getting the most from jQuery is essential to truly mastering web development.

About the author

Shaneeb Kamran is a Computer Engineer from one of the leading universities of Pakistan. His programming journey started at the age of 12 and ever since he has dabbled himself in every new and shiny software technology he could get his hands on. He is currently involved in a startup that is working on cloud computing products.

Tags: DOM, jQuery, jQuery UI, plugins,

Comments are closed.