Writing your Own Hello Word! JQuery Plugin

JQuery is cross browser javascript open source framework. It also comes with lots of plugins to do almost everything you want.

But sometimes you are not able to find exact plugin to suits your need, Or you do not want any jquery plugin to be used. In that case you need to develop your own jquery plugin.

Writing JQuery plugin is very easy, You just need to little knowledge of Jquery to create new Jquery plugin.

In this tutorial you will learn to create your own Jquery plugin having some custom options.

Step 1: Setup environment

Frist of create index.html or any other HTML file on which you are going to test plugin. And add jQuery library in the head tag of html. Like below

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
  <title>jQuery Hello Word! example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
  </head>
  <body>
	<h1> this is test example of hello world plugin</h1>
  </body>
  </html>

Step 2: Create Own Custom plugin file

Now Create your custom plugin file and add that file in your html file, that you have created in last step. Than your html file will be like this

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html lang="en">
  <head>
  <title>jQuery Hello Word! example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="mycustom_plugin.js" ></script>
  </head>
  <body>
	<h1> this is test example of hello world plugin</h1>
  </body>
  </html>

Step 3: Write down basic jquery plugin structure.

Now add following lines to plugin.js file you have created in last steps.

1
2
3
4
5
6
7
8
9
(function($) {
 
    $.fn.helloWorld = function() {
 
// your plugin code will goes here
 
    }
 
}(jQuery));

Lets understand the structure of plugin. By including everything in “(function($){ })”, We are making sure that all variables in our plugin will be safe outside of the global namespace. We don’t want to cause any conflict with any other javascript variable.

“$.fn.helloWord=function(){…..}” is jQuery ways to define any plugin. Which we have named “helloWorld”.

Step4: Calling your plugin in your html file.

To call your plugin in html you just need write down jquery code after your plugin file included in html like below

1
2
3
4
5
<script type=”text/javascript”>
$(document).ready( function() {
    $('h1').helloWorld();
});
</script>

At this time nothing will be happened to h1 tag, because we didn’t write any code inside the plugin.

Step5: Write down basic code inside your plugin

Now lets try to change the color by using your jquery plugin. We can change the color of any text by using ”Jquery.css” function. Lets use this function inside your plugin

1
2
3
4
5
6
7
8
9
10
11
12
(function($) {
 
    $.fn.helloWorld = function() {
 
/** change color of text **/
	this.each(function(){
		$(this).css(“color”,#ff0000”);
	});
 
    }
 
}(jQuery));

In above example we have used “this.each” jquery loop and changed the color of every object to red inside that loop.

Output of above example will be like this

output

In this way you can use any jquery function inside your custom jquery plugin and can do whatever you want to do.

In the next post I’ll show you to pass the parameters to your plugin and playing with those parameter. Till than stay tuned

Leave a Reply

Your email address will not be published. Required fields are marked *

*


Skip to toolbar