Créer son premier plugin jQuery

Créer son premier plugin jQuery

Si tout comme moi, il vous arrive d'utiliser jQuery ou encore des plugin pour vos besoins perso, il est vous surement déjà arrivé de vous dire : Mince ce plugin fait pas tout à fait ce que je veux. Cet article peut vous aider.

Le jQuery... Aujourd'hui indispensable pour les développeurs web, il reste malgré tout un peu mystérieux (ou opaque) à certains concernant son mécanisme.

 

Tout d'abord, petit rappel...

 

jQuery est une librairie javascript, permettant de faciliter l'utilisation de javascript. Un exemple tout simple un document.getElementById("txtNom") se transforme en simple jQuery.("#txtNom"). Bon s'il n'y avait que ça... Mais l'intérêt principal de jQuery réside dans sa manipulation, simplifiée, du DOM. Sa popularité grandissante, et surtout sa flexibilité, ont permis à d'autres développeurs de développer des plugins en s'appuyant sur cette librairie. Le "plugin" (si on peut le nommer ainsi), le plus connu étant jquery-ui, qui va permettre d'utiliser des contrôles étendus, qui n'existent pas en HTML et qui sont codés grâce à la bibliothèque jQuery.

 

De nombreux plugins sont disponibles sur le web, tous plus incroyables les uns que les autres. Mais aujourd'hui, je vais vous révéler le secret des plugins jQuery et comment créer le votre.

 

Une lightbox simplifiée

Pour voir un peu comment faire notre plugin, nous allons faire une simple lightbox. Voici un peu le cahier des charges : J'ai une suite d'images, lorsque je clique dessus, je souhaite la voir apparaitre au milieu de mon écran, avec une sorte d'écran noir autour, pour pouvoir contempler mon image. Si je clique sur une croix ou que je clique en dehors de l'image, cette dernière se ferme et je reviens sur le site.

 

Rien de bien compliqué en soit et pourtant, au delà de la création du plugin, nous allons voir que certains mécanismes sont nécessaires à mettre en place, même pour ceux qui connaissent déjà jQuery.

 

Avant d'écrire, le code en lui, on va créer l'arborescence suivante dans un dossier que l'on nommera site.

 

- site

- images

------ image1.jpg

------ image2.jpg

------ image3.jpg

- index.html

- jquery-1.10.2.min.js (téléchargé sur le site de jquery)

- jquery.lightbox.js

- jquery.lightbox.css

Pour les images, je vous fais confiance, les miennes... Bref, vous verrez à la fin ce que j'avais choisi (je vous rassure y a quand même un chaton dans le lot). 

Bon, maintenant passons au code. On va commencer par le plus simple à savoir la page index.html.

 Voici le code que j'ai :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
    <title>Mon site</title>
    <meta name="author" content="Rhonin">
    <!-- Import design du plugin -->
    <link rel="stylesheet" type="text/css" href="jquery.lightbox.css" />
    <style>
        .image {margin:5px;border:1px solid black;width:200px;height:200px;}
 
     </style>
     <!-- Je récupère jQuery  -->
     <script src="jquery-1.10.2.min.js"></script>
 
      <!-- J'importe mon merveilleux plugin -->
     <script src="jquery.lightbox.js"></script>
 
     <script type="text/javascript">
         jQuery(function () {
                // J'initialise mon merveilleux plugin sur tous les élements ayant la classe CSS image.
               $('.image').lightbox();
 
        });
</script>
</head>
<body>
    <div>
        <img class="image" id="img1" title="Chaton" src="images/image1.jpg"/>
        <img class="image" id="img2" title="Knacki" src="images/image2.jpg" />
        <img class="image" id="img3" title="Chaussette" src="images/image3.jpg" />
    </div>
</body>
</html>

Bon, ca encore ca va. Maintenant on passe au code du plugin. Tout d'abord, il existe une constante, dans la façon de développer un plugin jQuery. Dans votre jquery.plugin.js vous devez toujours avoir au minimum ceci dans votre page :

 

(function($)
{
    $.fn.nom_du_plugin=function(parametres)
    {
       // Votre merveilleux code de plug in
    };
})(jQuery);

 Dans cette logique voici le code minimum de notre lightbox :

(function($)
{
    $.fn.lightbox=function()
    {
       // Votre merveilleux code de plug in
    };
})(jQuery);

 

Pas besoin de paramètres, nous faisons les choses simplement. On peut cependant imaginer (par exemple), un paramètre booléen indiquant si l'on souhaite oui ou non fermer l'image lorsque l'on clique en dehors de cette dernière. 

Maintenant voici le code complet de notre plugin. Bien sûr je vais expliquer certains points :

(function($)
{
    $.fn.lightbox = function()
    {
        creationBlocLightBox();
 
       gestionEvenements($(this));
    }
})(jQuery);
 
/**
* Cette fonction va créer la DIV lightBox avec une mise en forme minimale
*/
function creationBlocLightBox()
{
    $('<div id="lightBox">').appendTo('body');
 
    $('<label id="close">').text('X').appendTo("#lightBox");
 
    $('<img src="" id="imageZoom"/>').appendTo("#lightBox");
 
    $('<p id="legende">').appendTo("#lightBox");
 
    $('<div id="overlay">').appendTo("body");
}
 
 
/**
* Cette fonction va faire les abonnements d'évènement
* Exemple : Clique sur l'image, alors on affiche la lightbox
* Le paramètre contiens l'objet (ou l'image) sur laquelle effectuer le traitement
*/
function gestionEvenements(obj)
{
    $("#close").on('mouseenter', function () {
        $(this).css("cursor", "pointer");
    });
 
    obj.click(function () {
        $("#legende").html($(this).attr('title'));
        $("#lightBox img").attr('src', $(this).attr('src'));
        $("#lightBox").fadeIn('slow');
        $("#overlay").show().css({ "opacity": "0.5" });
    });
 
    $("#close, #overlay").on('click', function () {
        $("#overlay").fadeOut('slow');
        $("#lightBox").fadeOut('slow');
    });
}
 
 
 
Bon passons aux explications du code. Je vous passe les appels des méthodes dans le plugin lui-même, ce qui nous intéresse c'est le code jQuery utilisé pour réaliser ce plugin. La méthode de création de la div lightbox est plutôt classique pour toute personne utilisant le jQuery. L'idée ici sera de créer la structure utile qui contiendra l'image agrandie. La seconde méthode, va permettre de binder les évènements pour faire fonctionner la lightbox.
 
Pourquoi avoir utilisé la fonction on au lieu de la fonction click ? Tout simplement car l'objet, lors du chargement de la page, n'existe pas. Il est crée à la volée dans notre plugin. Il faut donc une sorte de listener qui se déclenchera lors de l'évènement clique. Pour le reste du code rien d'extraordinaire, A vous maintenant d'améliorer ce code ou de le compléter.
 
 
Voilà, maintenant on a une lightbox fonctionnelle ! Ha bon par contre il nous manque un truc... le style !! Et chez Diversitudes, le style on l'a je vous rassure. Le voici, le voilà :
 
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 4;
}
 
#close {
    float: right;
    background-color: white;
    border: 1px solid black;
    padding: 5px;
}
 
#lightBox {
    display: none;
    position: absolute;
    top: 25px;
    left: 30%;
    width: 500px;
    z-index: 5;
    background-color: black;
}
 
#imageZoom {
    margin: 0;
    width: 500px;
    height: 498px;
}
 
#legende {
    background-color: black;
    color: white;
    text-align: center;
    margin-top: -6px;
}
 
Etant une bille en CSS j'ai assuré le service minimum pour que cela ressemble vaguement à quelque chose. Le principe est là, c'est déjà ça.
 
Voilà, il n'y a plus qu'à tester ! Si vous êtes feignant, je vous laisse un lien de téléchargement du tout, histoire que vous fassiez vous même joujou avec le plugin. L'intérêt d'avoir une lightbox, c'est qu'il y a des dizaines de possibilités de la faire évoluer, tout en consolidant ses bases en jQuery. Je vous laisse le donc le plaisir de me rendre ça plus joli et paramétrable.
 
Voici, comme promis les photos que j'avais choisis pour développer le plugin :
 
 
Le plugin qui déchire !
 Les joies du codes...
 

Code du tutoriel


comments powered by Disqus
Publié le Jeudi 28 Novembre 2013 à 19:00