Plugin jQuery – Aide contextuelle Javascript

Voilà déjà pas mal de temps que je n’ai rien publié ici… Ce qui ne veux pas dire que j’ai rien dans les cartons. C’est plutôt le temps qui manque un peu quand il s’agit de présenter tout ça de façon correcte.

Pour changer un peu des précédent articles dédiés au développement iPhone, je vais aujourd’hui présenter un petit outil Javascript, utilisant le Framework jQuery. Rien de révolutionnaire, c’est simplement un plugin jQuery permettant de dérouler un bandeau HTML au dessous d’un autre. J’ai appelé ce plugin ‘helpBox’ car ce widget est particulièrement adapté pour afficher une aide contextuelle.

Voici les liens vers le code source et la démo.
Rien de bien compliqué ici si l’on connais déjà la structure d’un plugin jQuery.
On commence par définir quelques paramètres…

var defaults = {
    helpContent:'<p>help content</p>',  // jQuery Selector or plain text HTML.
    contentCls:'help-content',          // CSS Class applied to the help box.
    buttonCls:'help-button',            // CSS Class applied to the help button.
    buttonText:'Help'                   // Help Button text
}

Ensuite, le plugin ‘helpBox’ se contente de recherche le code HTML du contenu de l’aide pour l’ajouter au document avec le bouton associé.

return this.each( function() {
 
    var o = options
 
    // Gets help content
    var content = ( $(o.helpContent).size() > 0 ) ? $(o.helpContent).html() : o.helpContent;
 
    // Appends help box and help button
    $(this).append("<div class='"+o.contentCls+"'>" + content + "</div>")
        .append("<div class='"+o.buttonCls+"'><a href='javascript:void(0)'>"+o.buttonText+"</a></div>");
 
    $(this).find('.'+o.contentCls).hide();
 
    // [...]
})

Ensuite, il ajoute deux gestionnaires d’événement au bouton: un ‘mouseover’ pour ouvrir le dialogue d’aide et un ‘click’ pour fermer ce dernier.

// Open the box on button mouseover, close it on click
$(this).find('.'+o.buttonCls+' a').mouseover( function() {
 
    $(this).parent().prev('.'+o.contentCls+':hidden').slideDown();
}).click( function() {
 
    $(this).parent().prev('.'+o.contentCls+':visible').slideUp();
});

Voilà tout. Facile non?

• Le code complet est ici: jquery.helpbox.js
• La démo est là: jQuery helpbox demo

Quelques ressources utiles pour finir:

• jQuery Plugin Authoring
• Les bases du développement de plugin jQuery sur learningjquery.com

Enjoy!