How to Create JQuery plugin
JQuery
is a well known JavaScript framework. Comes with pretty plugins, easy to learn, reduces amount of code and more on. JQuery Plugins reduces development time but what if you can not fine plugin that fulfill your need? Plugins helps you if you need to write snippet in multiple pages. Just add plugin JS file to your html and initialize it.
How its cool if you create your own plugin and use it in your development!! Writing your own plugin is not so hard that we think. Here, we will learn how to create simple plugin and bit more options and perform some tasks using out custom plugin.
We will start with simple plugin. First of all, we need to create js file for plugin. Create a blank file and save it as jquery.myFirstPlugin.js. Include it to out html file in end of html file and off course include jquery-1.11.min.js (download) as its JQuery plugin.
<script type="text/javascript" src="js/jquery-1.11.min.js"></script>
<script type="text/javascript" src="js/jquery.myFirstPlugin.js"></script>
|
1
2
3
4
5
|
(function($) {
$.fn.myFirstPlugin = function() {
// your code here
}
}(jQuery));
|
Here, Include everything in (function($){}) self-enclosed pattern as we don’t want any confliction with other Javascript snippet on the page. $.fn allows you to define function as we gave myFirstPlugin name to our plugin. We will do magic inside function.
Let’s start do something with our plugin. return will let you do something after call to plugin by returning call from isolated environment of plugin. Suppose we want to change text of div having class cls-title. $(this) is our target element which text we want to change.
|
1
2
3
4
5
|
(function($) {
$.fn. = function() {
return $(this).text("My First Plugin");
}
}(jQuery));
|
Now, Its time to initialize plugin using below code. cls-title is div whose content we want to change.
|
1
2
3
4
5
|
<script>
$(document).ready( function() {
$('.cls-title').myFirstPlugin();
});
</script>
|
That’s it, we’ve written our first jQuery plugin!
Now, we will pass argument to our plugin.
|
1
2
3
4
5
|
(function($) {
$.fn.myFirstPlugin = function( titleText ) {
$(this).text(titleText);
}
}(jQuery));
|
Replace hard coded text with variable. Now we can pass any value to our plugin. Here is example
|
1
2
3
4
5
|
<script>
$(document).ready( function() {
$('.cls-title').myFirstPlugin("My First Plugin");
});
</script>
|
What if no text passed in initialization? Obviously we need to set default settings in our plugin.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
(function($) {
$.fn.myFirstPlugin = function( options ) {
// Default params
var params = $.extend({
text : 'Default Title',
fontsize : 10,
}, options);
return $(this).text(params.text);
}
}(jQuery));
|
Here, we have added default object called params and set default values of options using extend function. Hence, If we pass blank argument then it will set default values instead otherwise it will set.
$('.cls-title').myFirstPlugin({ text : 'Argument Title' });
Comment if you have any queries regarding JQuery plugin implementation.