Please wait...

We are thrilled to have you onboard at Tectual. Doesn't matter if you ask for our free advice or a billion dollar project. We adore you, respect you and spend time to understand you. You are special.

Your query is submitted with us and we'll contact you back in no time.

Close

Your comment is not submitted. Please make sure both "Name" and "Comment" are filled.

Thank you for posting a comment. It will help us and other members a lot. If you submitted a question, we will respond to it ASAP. Keep in touch.

Close
Contact Us
< Back to the Blog

How To Make jQuery Plugin? (jQuery Plugin Hello World)

Here is a quick how to on making your own jQuery plugin. Extending jQuery with plugins and methods is very powerful and can save you and your peers a lot of development time by abstracting your most clever functions into plugins.

Learn jQuery Plugin (Beginners)

In this HowTo we are going to make a hello world tooltip plugin. This tutorial takes 15 minutes to be read. Let's see how we can do it.

Making jQuery Hello World Plugin

To write a plugin you have to extend jQuery.fn object.

jQuery.fn.helloWorld = function(){ ... }

As you know there are many JavaScript frameworks out there and to avoid conflicts when using $ the best practice is to wrap your plugin in following code:

(function($){

$.fn.helloWorld = function(){ ... }

})(jQuery);

Context

Now we can start writing our awesome plugin. Before starting remember in the immediate scope of the plugin function, the this keyword refers to the jQuery object the plugin was invoked on. This is a common slip up due to the fact that in other instances where jQuery accepts a callback, the this keyword refers to the native DOM element. Therefore there is no need to wrap the this keyword (again) in the jQuery function.

Chainability

The beauty of jQuery's design and is one of the reasons jQuery is so popular is it's chainability. So to maintain chainability in a plugin, you must make sure your plugin returns the this keyword.

(function($){

$.fn.helloWorld = function(){ 

  return this;

}

})(jQuery);

Let's code our first version of the Hello Worl Plugin.

$.fn.helloWorld = function(){
  
$.fn.helloWorld = function(){

  this.each(
    function(){
      var pos = $(this).position();
      var tip = $('<div style="background:#fff;color:#000;">Hello World!</div>').insertAfter(this).css({ top: pos.top+$(this).height()*1.5, left: pos.left+20});
    }
  );

  return this;
}

})(jQuery);

And sure you can write this.each(...) and return this in on line "return this.each(...)".

Now if you save it at helloplugin.js and make an html page as below you can test and see how it works.

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.min.js"></script>
    <script src="helloplugin.js"></script>
    <script>
      $(function(){

        $('h1, b, span').helloWorld();

      });
    </script>
</head>
<body>
  <h1>Here is Heading</h1>
  <p>As you read this you can find more tooltips <b>here and there</b>. You can have tooltips <span>anywhere</span>.</p>
</body>
</html>

Options

You should make your plugin flexible enough so other users will be able to customise it. You usually define some default value for each option parameter and if users need they can overwrite it when calling function. In this case we want to make the tooltip structure and text customisable.

(function($){

$.fn.helloWorld = function(options){

  var opts = $.extend(
    {
      phrase: 'Hello World',
      template: '<div class="panel" style="position:absolute;background:#37617A;z-index:2"></div>',
      showOn: 'mouseover'
    },
    options
  );
  return this.each(
    function(){
      var pos = $(this).position();
      var tip = $(opts.template).text(opts.phrase).insertAfter(this).css({ top: pos.top+$(this).height()*1.5, left: pos.left+20}).hide();
      $(this).bind( opts.showOn, function(){ tip.show(); })
    }
  );
}

})(jQuery);

In our next post we will show you how to make your plugins more flexible and how to extend them with methods.

You can check working sample here and get hello world plugin code from here. If you find this tutorial useful, please share it with your friends.

Discover what we say about jquery | js | tutorial | plugin |
Fri, 07 20 2012

jQuery Template (jTemplate)

jQuery Template Engine (jTemplate) is flexible and smart. Just by adding some extra directives it can merge all sort of data st...

jQuery Validator Plugin (Validation Plugin)

There are hips of jQuery validation Engines out there. But still some cannot be flexible enough to cover all developers need. S...

jQuery Watermark Plugin (Best jQuery Placeholder)

This easy to use jQuery watermark plugin which adds watermark input and textarea elements. A watermark is lighter colored text ...

jQuery Editable Plugin (Best In Place Editor)

jQuery Editable (Inline Editor) WarLike all other things on the web there is kind of war between geek working on same topic. Sp...

0comments

Write a comment and start a conversation about this post.
Subscribe Valid tags are b=bold and pre=code. line-breaks are detected automatically.