Click here to Skip to main content
15,035,723 members
Articles / Programming Languages / Javascript
Tip/Trick
Posted 3 Jul 2015

Tagged as

Stats

8.3K views
5 bookmarked

How to Create Plugins in Jquery?

Rate me:
Please Sign up or sign in to vote.
4.75/5 (5 votes)
3 Jul 2015CPOL2 min read
Creating a plugin in Jquery is very simple. In this tip, we will learn how to create custom plugins in Jquery.

Introduction

Creating a plugin in Jquery is very easy. Before creating a plugin, we need to know the basic naming convention that will be used in plugins. The common and most popular naming convention is Jquery.pluginName.js or Jquery.pluginName.versionNumber.js. Using the version in plugin avoids adding wrong version of plugins. If it is a minified file, try to add .min before .js extension. If you want to publish your plugin publicly, then make sure that plugin name is not taken already by somebody else.

The basic structure of a plugin is very simple. It looks like the below script:

JavaScript
(function($){
$.fn.pluginName = function(){
return this;
};
})(jQuery);

In the above code, we have used one anonymous function which takes jQuery as a parameter. This function will be called as soon as DOM is loaded. Any plugin may need some parameters which will be passed by the user while initializing. If it requires two or three parameters, then we can directly define in the plugin function. But if the plugin requires multiple parameters or has some default values, then we cannot use direct parameters. Here we need to use Json object as a parameter.

JavaScript
(function($){
$.fn.pluginName = function(options){
var defaultOptions = {parameter1:'value 1', parameter2:'value2'};
var finalOptions=[];
$.extend(finalOptions, defaults, options);
return true;
};
})(jQuery);

In the above code, we have defined some default values to the parameters. It means if the user does not pass any parameters, then default parameters will be used. If the user passes any parameters, then they will be taken and will be merged with finalOptions. For this, we have used extend function. Now, I will use a simple example to explain the plugin better. You see demo here to better understand how to create jquery plugins. Let's say I want to create a plugin to change the background color. Then, my plug in code will be as below:

JavaScript
(function($){
$.fn.testPluin = function(options){
var defaultOptions = {backColor:'yellow' };
var finalOptions=[];
$.extend(finalOptions, defaults, options);
return this.css('background': finalOptions.backColor);
};
})(jQuery);

//Intitialize:
$("div").testPluin({backColor: 'red'});
//html
<div> This is simple plugin </div>

Here, we are passing red color while initializing. So the div gets red background color. If we do not pass any parameter, then default color will be used that is yellow.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

No Biography provided

Comments and Discussions

 
Question2nd sample Pin
thewazz7-Jul-15 8:49
professionalthewazz7-Jul-15 8:49 
QuestionGood Pin
Santhakumar Munuswamy @ Chennai4-Jul-15 20:35
professionalSanthakumar Munuswamy @ Chennai4-Jul-15 20:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.