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.
Fri, 07 20 2012
0