Create jQuery plugin - learn how to write your own

jQuery is a popular term known to the web developers and web designers. We use various jQuery plugins to serve different purpose and functionality of a website. Nowadays, lots of jQuery plugins are available on the internet for almost every functionality needed. You can easily find a required plugin here “http://plugins.jquery.com/“. Web developers and designers tend to just download the plugin from the internet and use it in the web page to achieve the functionality. Very few of us need to write custom jQuery script blocks to do some special or customized functionality. Rather than writing scattered jQuery script blocks, it is always a better idea to create jQuery plugin to wrap them up in a method and use the custom jQuery plugin when needed! That keeps the web page clean and the script is more manageable. So let’s learn the basic concepts and anatomy of a jQuery plugin and how to write your own plugin.

Create jQuery plugin – Basic Structure

A jQuery plugin code should usually be written in a JavaScript (.js) file. To use the plugin, you need to include the jQuery library and the plugin JS files in the <head /> section of the document. You need to ensure that the plugin JS file appears after the main jQuery library file, and before the custom script block where the plugin will be called.

Below is a simple implementation of a basic jQuery plugin. $.fn is jQuery’s way to allow you to define your own custom plugin.

(function($){
    $.fn.myPlugin = function(options){
        // The plugin implementation goes here
        
        // Plugin default options
        var settings = $.extend({
            name: 'John Smith',
            role: 'Developer',
            color: '#F00'
        }, options);

        this.each(function(){
            // Bind the plugin for all the targeted elements
            // and apply the options
            return this
                .append('Hello ' + settings.name)
                .append(' - ' + settings.role + '!')
                .css({ color: settings.color });
        };
    };
}(jQuery);

So if you bind the plugin to a <p /> tag:

<html>
    <head>
        <title>jQuery Plugin Test</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/myPlugin.js"></script>
        <script>
        (function($){
            $(document).ready(function(){
                $('p').myPlugin({
                    name: 'Supratim Roy',
                    role: 'Blogger',
                    color: '#00F'
                });
            });
        }(jQuery);
        </script>
    </head>
    <body>
        <p></p>
    </body>
</html>

Then the output will be like:

<p style="color:#00F;">Hello Supratim Roy - Blogger!</p>

Hello Supratim Roy – Blogger!

So this is a very basic structure and usage of a jQuery plugin. Seems easy, right! Let’s dig into more complex and practical life things.

There are some guidelines specified by the jQuery team. Following those guidelines will lead you to write a jquery plugin which is clean, non-conflicting, configurable, and extendable.

Your plugin should always return the jQuery object so that it is chainable.
In your plugin, there should be this.each iteration to bind the current set of the matched elements.
Keep the provision of accepting options to extend the plugin default settings through a callable interface.
Use the “jQuery” object directly rather than using “$” to avoid any possible conflicts.
Try to give your plugin a unique method name, so that it doesn’t conflict with other jQuery plugins.

Create jQuery plugin – Advanced Concepts

Though it is not mandatory, still use the semicolon (;) wherever possible to avoid any errors while the file is minified.
Prefix the plugin filename with “jquery.” to avoid any possible confusions.

Provide some callback functions:

It is a good practice to provide some callback functionality with your plugin to let the users use your plugin in a flexible way. Check the example below for a better idea.

(function($){
    $.fn.myPlugin = function(options){
        // The plugin implementation goes here
        
        // Plugin default options
        var settings = $.extend({
            name: 'John Smith',
            role: 'Developer',
            color: '#F00',
            onBeforeCall: function(){}
        }, options);

        this.each(function(){
            // Bind the plugin for all the targeted elements

            // use the callback function
            if (typeof settings.onBeforeCall === 'function') {
                settings.onBeforeCall(this);
            }

            // Apply the options
            return this
                .append('Hello ' + settings.name)
                .append(' - ' + settings.role + '!')
                .css({ color: settings.color });
        };
    };
}(jQuery);

At the end of everything, the most important factors that should be really considered while developing a jQuery plugin are flexibility, the size of the plugin, and performance of the plugin. You can also try some of the basic lessons from jQuery itself to learn how to create jQuery plugin.

How to create a jQuery plugin – basic concepts

Create jQuery plugin – Basic Structure

Create jQuery plugin – Advanced Concepts

Leave a Reply Cancel reply