Basic jQuery Plugin Creation
As I said before there are lots of jQuery plugins available now. Some of them are paid and some of them are free. But it doesn’t matter, as long as you wanted a particular plugin you’ll do anything to get it. Actually, the plugins that you’ve already downloaded or you’re planning to download did not just go out there as a jQuery plugin itself coming from nowhere, it was created by their authors or developers. It is developed for certain purposes that the developer aims.
So with all those said, have you ever considered creating your own jQuery plugin?
It’s not that hard, we’re not going to discuss advance or complex jQuery plugin but we’re going to have a simple “center” plugin.
Basically, we will create a plugin that will adjust the styles of an element specified in order to keep it horizontally and vertically centered on the page.
Demo :
http://net.tutsplus.com/tutorials/javascript-ajax/coding-your-first-jquery-ui-plugin/
1. Add Javascript File
Adding a blank JavaScript file is essential in creating a plugin. Naming conventions stated that jQuery plugins should be named “yourpluginname.jQuery.js”. Make sure that you create a reference to it in your document.
<head>
<script src="jquery-1.2.6.pack.js">
</script><script src="center.jQuery.js">
</script></head>2. Paste Codes
Paste these following codes to it.
(function($){
$.fn.center = function(){
var element = this;
$(element).load(function(){
changeCss();
$(window).bind("resize", function(){
changeCss();
});
function changeCss(){
var imageHeight = $(element).height();
var imageWidth = $(element).width();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(element).css({
"position" : "absolute",
"left" : windowWidth / 2 - imageWidth / 2,
"top" : windowHeight /2 - imageHeight / 2
});
};
});
};
# })(jQuery);Paste this one too.
$.fn.center = function(){};
“Center” is just a sample name; you should replace this with the name that you’re going to use. This is to inform jQuery that you’re extending its methods. Right now this piece of code does absolutely nothing; we can call our method with:
$(function(){
$("#someElement").center();
});3. Know how to Center an Image
First, you must know already how to center an image on a page manually. Your element must be positioned as absolute. Or it’ll be obvious that it doesn’t budge when we alter the “left” or “right” values. Okay so next, the image needs to be shifted 50% of the window of browser’s width to the left. At last, to adjust for the width of the image, we will need to subtract one and a half of the image’s width.
function changeCss(){
var imageHeight = $(element).height();
var imageWidth = $(element).width();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(element).css({
"position" : "absolute",
"left" : windowWidth / 2 - imageWidth / 2,
"top" : windowHeight /2 - imageHeight / 2
});
};This would place the image at the center of the page perfectly.
4. Create Listener
We will need a listener for the browser when it’s resized.
$(window).bind("resize", function(){
changeCss();
});The function “ChangeCss()” is the one that adjusts the top and the left value of the image. Whenever it’s called by resizing the window, jQuery will just recompute the values.
Conclusion
As you can see, creating jQuery plugins is not that hard as long as you understand what you’re doing and what those codes are for. Basically, what we’ve done here is easy and you should get along with this without encountering any problems at all.
