How to create/build basic jQuery Plugin | Responsive & Effective

Hello friends !! We are going to develop a basic jQuery Plugin with basically having the general functionalities for our website. We will teach you all the step by step coding methods with official example which will help you easy to understand everything about the jQuery plugin.

jquery logo

Sometimes, when you want to make some functions in your site which can easily to access all the things and repeatedly used those functions like some image effects throughout the site code than you need to develop some master code and we called it plugin. Plugins are very help full to do such a things and jQuery is the best for it. At the last of this article, there is Best buy offers for jQuery books that you can not get from any other sites.

So, lets we start to build a basic jQuery plugin with official example of JQuery Learning Center. Just write the code step by step as we have describe below. You will definitely happy to learn here 🙂

STEP 1: How to works jQuery by Object and Utility methods ?

Before creating any plugin for us we need to understand basic about the jQuery. So, first we see how jquery actual works in our site. Look out this code just for basic css design.

$( "a" ).css( "color", "red" );

This is just a basic jQuery code that show how to work it. When you will use the $ sign (jQuery Function) to select any elements, it will return you jQuery object. You can use any of the methods like .css( ) , .click( ), .trim( ) etc. with the $ function for returning objects.

STEP 2: Plugin Authoring for developing it

You need to write any of the codes with proper authoring and formating. See the below code for all we must have to do for creating any functions like greenify and $.fn as like all other jQuery object methods.

<$.fn.greenify = function() {
 this.css( "color", "green" );
};
$( "a" ).greenify();

In the above code, we have used this.css instead of $(this), because of this and greenify method is already a part of the .css( ) object. So, you have to remember it whenever you creating this type of nested function which has previously defines.

STEP 3: Chaining of the methods 

Chaining is the most usable feature of the jQuery. Whenever you want to build a real world plugin that make you easy to access four or five actions with only one selector than you have to use chaining feature for it. You have to make your plugin chainable with just some line of codes to accomplished your methods returning to it’s main jQuery object. Look out this code:

$.fn.greenify = function() {
this.css( "color", "green" );
return this;
}
$( "a" ).greenify().addClass( "greenified" );

STEP 4: Protecting of the $ Alias and Adding Scope

(function ( $ ) {

$.fn.greenify = function() {
this.css( "color", "green" );
return this;
};

$.ltrim = function( str ) {
return str.replace( /^s+/, "" );
};

$.rtrim = function( str ) {
return str.replace( /s+$/, "" );
};

}( jQuery ));

AND

(function ( $ ) {

var shade = "#556b2f";

$.fn.greenify = function() {
this.css( "color", shade );
return this;
};

}( jQuery ));

STEP 5: Minimizing of jQuery Plugin footprint

(function( $ ) {

$.fn.openPopup = function() {
// Opening popup code.
};

$.fn.closePopup = function() {
// Close popup code.
};

}( jQuery ));

You would have to make one another slot of the parameter to control of performance like:

(function( $ ) {

$.fn.popup = function( action ) {

if ( action === "open") {
// Open popup code.
}

if ( action === "close" ) {
// Close popup code.
}

};

}( jQuery ));

STEP 6: Manipulating using each( ) method of jQuery

Here is the manipulation processing function we would have to write it for some specific objects. If you want to do manipulate some specific elements like calculating of some specified elements or getting database/data structure then you need to use .each( ) to repeated that all processes like below:

$.fn.myNewPlugin = function() {

return this.each(function() {
// Do something to each element of function here.
});
};

STEP 7: Plugin customization by Accepting Options

Your next learning process is for customization of the accepting options of your plugin for making good functional.

(function ( $ ) {

$.fn.greenify = function( options ) {

// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
color: "#556b2f",
backgroundColor: "white"
}, options );

// Greenify the collection based on the settings variable.
return this.css({
color: settings.color,
backgroundColor: settings.backgroundColor
});

};

}( jQuery ));

Our example usage for:

$( "div" ).greenify({
color: "orange"
});

Putting all together for complete plugin development

So, this will be the smallest example for your first basic jQuery plugin development which will clear your all the things about to jQuery complexity. As we have discussed above throughout the seven steps, I think you have learned and getting all the plugin building process. So, here I have to show you a simple and smallest jQuery plugin example for you which you can seen on the official website of JQUERY.

(function( $ ) {

$.fn.showLinkLocation = function() {

return this.filter( "a" ).each(function() {
$( this ).append( " (" + $( this ).attr( "href" ) + ")" );
});

};

}( jQuery ));

// Our Usage example:
$( "a" ).showLinkLocation();

Below is for just a reference links by href attribute in bracket.

<!-- Before plugin is called: -->
<a href="page.html">Foo</a>

<!-- After plugin is called: -->
<a href="page.html">Foo (page.html)</a>

You have to optimize your plugin with the below code:

(function( $ ) {

$.fn.showLinkLocation = function() {

return this.filter( "a" ).append(function() {
return " (" + this.href + ")";
});

};

}( jQuery ));

So, friend I think you have enjoyed to learn all about the jQuery Plugin development. If you like to learn more about the jQuery plugin building and want to make some effecting, responsive and ultra functional jQuery plugin than just go to the links below of top 5 best jQuery books with best buy offers: 1) Head First jQuery, 2) jQuery CookBook, 3) jQuery Designer for beginner’s, 4) jQuery Mobile, 5) jQuery UI (User Interface)

Thank you for visiting us and reading our articles 🙂

Leave a Reply

Techdevotee © 2015