How to write a jQuery plugin?

What is jQuery plugin?

A jQuery plugin is a simple method or a collection of methods that extends jQuery’s object. You can use and enable all jQuery objects and core methods in the methods that you add in your plugin by extending the main jQuery prototype object.

The basic concept of plugin is to perform something on specific element or a set of elements. We can consider each method of jQuery like .show() and .hide() as a plugin.

Why should you write a jQuery plugin?

Sometimes you want to write one functionality that is available for the your entire code or a single method that performs some operations on select elements of your page. For example, you want to change the border color of all text-boxes when they get focused or you want to change the color of text to green for all your <span> tags. In this case, you may want to write a plugin with useful functions and that can be moved to other projects easily.

Prerequisites

Before we start a plugin, we must know a little about jQuery and how it works. We must know about the $ object, selectors to select elements, core methods like .css(), .attr(), .click() etc. For example, see the below code:

Above example uses jQuery selector and a core method .css(). It simply selects all <p> tags and applies blue color to the text. Let’s consider another example,

The above code selects all the <a> tags which have click_me class and binds the click event. When you click on that tag, it will show an alert.

Whenever we use $ object, it returns a jQuery prototype object. This object gets all core methods from $.fn object. This object contains all the jQuery methods.

Basic Plugin

We know what is jQuery plugin, why should we write one and basic knowledge of jQuery itself. Now it’s time to create our own plugin. Let’s start with a very basic example. Let’s say we want to create a plugin that makes the texts gray within a selected elements. What we have to do is, create a new method grayedOut to $.fn object, so it can be available like other jQuery methods.

As we added a new method grayedOut to $.fn object, we can use it like other core methods. See below example,

This will make color of text to gray within all matched <p> tags.

Avoiding conflicts

The $ is most used variable in JavaScript libraries. If you are using multiple jQuery libraries, you have to use the jQuery.noConflict() method to not use the $ variable. This will affect out plugin and break it as we assumed $ as jQuery object. To make our plugin work well, we need to put our code inside of an immediately invoked function expression, and then pass the jQuery function and use $ as parameter.

The another purpose of this is to use our own private properties. For example, if we want to store color name into a variable.

Manipulating specific elements

A normal jQuery object contains references to any DOM element or multiple elements. So if we want to do manipulation of only specific elements, we need to use .each() method to loop through elements.

This will apply the function to each element and return the object, then we can manipulate them separately like we can get attributes, perform styling operations, etc.

Adding options

It is a good idea to provide access to plugin options publically. By using options, it becomes easier to customize the plugin without changing the base code of plugin. The easiest way to do this is use an object format. Another thing to note here is, we should set default options also, so if we don’t pass options, we can use default ones.

Let’s consider our grayedOut plugin and change it to accept several options.

For example,

The above code will make text color blue instead of gray. The value of color is overridden by the value passed in options using $.extend() method.

Now you know the basics of jQuery plugin. To make it more advanced, you can write more methods, more configuration options as per your requirement.

You may also like...