Jquery Plugin Tutorial : First Plugin

Forums » Bookshelf » Jquery Plugin Tutorial » First Plugin

Prev		Next

Chapter 4. Our first plugin!

4.1. Let’s start with a simple plugin

Now we have the basics, following will be very easy: it will just be tradionnal jQuery code!

The first plugin we’ll build is called hoverFade. Its role is to decrease slowly the opacity of elements when the mouse moves over them. When the element is invisible, the plugin increases quickly the opacity in order to make it visible again. This plugin can be applied on links to have nicer effects like changing their color!

Here is the code of the plugin:

(function($)
{
    $.fn.hoverFade=function()
    {
       return this.each(function()
       {
        //We want the element to change when the mouse moves over it
        $(this).mouseover(function()
        {
            //We decrease its opacity slowly
            $(this).fadeOut('slow',function()
            {
                //And then, we reset quickly its opacity!
                $(this).fadeIn('fast');
            });
        });
       });
    };
})(jQuery);

	Note
	You can wonder why I use `$(this)` and not our `this`. It’s because we write our code in the `each()` method now, and not directly in the plugin. In `each()`, we have to use `$(this)` to access to the element.

4.2. And if we test?

It’s obvious, but to test our plugin we have to save it! In the most of the cases, we save two versions:

uncompressed version
- The version we currently have. The code is clean, indented and commented. It’s easy to maintain it and other developers can understand what you’ve done. It’s generally named jquery.myPluginName.js.
minified version
- Of course, it’s the same code as the previous version, except that it’s not indented and not commented. In fact, the code is usually on one line! The file is difficult to read and maintain it is like Hell… The advantage is that the file is lighter, ideal for the integration in the web sites. Its name generally named jquery.myPluginName-min.js.

It’s best to have always these two versions. Furthermore, if you want to distribute your plugin, it’s also very appreciated to propose the two ones.

	Note
	In order to easily transform our uncompressed version into minified one, we can use tools made for that, like jscompress.

So, we name our file jquery.hoverFade.js and we’ll use the HTML5 code below to test it!

<!DOCTYPE html>
<html>
    <head>
        <title>hoverFade plugin</title>
        <meta charset="UTF-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="jquery.hoverFade.js"></script>
        <script>
            $(function()
            {
                $('a, h1').hoverFade().css('color','red');
            });
        </script>
    </head>
    <body>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>
            Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Praesent sit amet libero odio.
            Maecenas auctor varius lorem at commodo. Praesent egestas consectetur hendrerit. Pellentesque
            condimentum dictum enim, scelerisque convallis erat mollis quis. Ut cursus tellus sed odio feugiat
            aliquam. Aenean vel orci nunc. Cras pharetra tortor a elit laoreet <a href="#">non ornare magna fermentum</a>. Fusce
            convallis tincidunt rhoncus. Nunc ac elit in tellus facilisis euismod. Donec vel mi urna. Aliquam in
            urna dolor, <a href="#">non blandit sapien</a>. Proin consequat, arcu non dignissim semper, nibh tellus condimentum
            turpis, vel ornare ipsum massa rhoncus eros.
        </p>
    </body>
</html>

Try it!

	Note
	Don’t forget to include jQuery: without it, our plugin can’t work! Of course, don’t forget also to include our plugin. You can see a third `script` tag in this example: we run our plugin here. The call of `css()` method is made just for test that our plugin is well chainable.

Prev		Next
	Home \| ToC

Jquery Plugin Tutorial : First Plugin

Chapter 4. Our first plugin!

4.1. Let’s start with a simple plugin

4.2. And if we test?

Marakana jQuery Tutorial

Marakana Tutorials

Upcoming classes