Create your first JQuery plugin

I really surprised on the power of Jquery , when I started to work with it. There are a lot of usable, user-friendly plugins , which are free, and you can use your own site.

Before you start to work you have to insert the jQuery library in your header of your webpage.

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>

I strongly recommend to use a newest minimized version. Why? Because many new features are implemented in it, otherwise the minimized version is smaller, so browsers download it faster.

My first JQuery plugin was very simple, I just created a popup button which is went away a few secs later:

$.fn.clickPopup = function(optionclass){
$(this).append("<div class='"+optionclass+"'></div>");
$("."+optionclass+"").delay(1100).fadeOut(800,function() { $(this).remove(); });
};

If you have written JQuery codes previously, you know that you need to use one of the following before you start your code:

*$(document).ready(handler)
* $().ready(handler) (this is not recommended)
* $(handler)

In a HTML code I put only one line :

$("body").clickPopup("saved")

If you want a customized button please create it first and then use in your css.

Insert the following code in your css :

.saved{
background-image:url('save.png');
width:160px;
height:50px; 
position :absolute;
margin-top:50%;
margin-left:50%;
}

YOu can download the source code and see the demo mode later.

About Ildiko Toth

I am a web developer with more than 3 years of experience using PHP, HTML and CSS . I started to experiment and work with Zend Framework and JQuery, too. I think the best way to learn something is to do it. I decided to do things, and share anything interesting I find along the way :)