Les plug-ins jQuery

Introduction

Les plug-ins jQuery sont des scripts dédiés à des tâches spécifiques comme le tri d’un tableau, l’implémentation d’un carrousel d’images ou la validation de formulaires.

Ces plug-ins, initiés par la communauté jQuery, sont nombreux, généralement d’excellente qualité et souvent librement disponibles sur la toile. Un aperçu de leur variété est disponible à l’adresse : http://plugins.jquery.com

Ces plug-ins génèrent un gain de temps précieux en évitant de devoir réécrire un code qui a déjà été traité par ailleurs. Ils permettent parfois aussi, avouons-le, de se lancer dans des opérations qui dépassent le niveau de programmation du concepteur moyen en jQuery. Dans ce chapitre, certains des exercices seront à télécharger sous forme d’archive au format .zip. Ces archives contiendront tous les fichiers nécessaires.

Concevoir un plug-in jQuery

1. Aspects théoriques

L’écriture d’un plug-in jQuery passe par des étapes bien déterminées et certaines règles bien précises sont à respecter.

Le plug-in jQuery prend la forme d’un fichier JavaScript externe (extension .js) qui se place immédiatement après la balise d’appel de jQuery (voir la section Utiliser un plug-in jQuery du présent chapitre) soit :


<script src="jquery.js"></script>

Nommer le plug-in

Un plug-in doit toujours être nommé sous la forme jquery.nom_du_plug-in.js. Il sera ainsi immédiatement identifiable.

Isoler le code

Dans ce fichier js nouvellement créé, il faut englober le code du plug-in dans une fonction anonyme. De cette manière, toutes les variables du plug-in n’entreront pas en conflit avec les autres scripts de la page.


(function () { 
    // code jQuery 
}) ()

Profitons-en pour passer la variable jQuery, grâce à son alias $, à cette fonction, ce qui permettra d’utiliser la variable $ à l’intérieur de celle-ci.


(function ($) { 
    // code jQuery 
}) ()

Ajouter la nouvelle méthode à jQuery

Nous sommes presque prêts à écrire notre plug-in. Il faut encore ajouter cette nouvelle méthode aux objets jQuery par l’instruction $.fn.nom_du_plugin. Dans cette fonction le mot-clé this représentera l’objet...

Utiliser un plug-in jQuery

L’utilisation d’un plug-in est des plus simples. Il suffit de l’appeler (par son nom) dans le code de la page.

Exemple

Exploitons notre plug-in dans une page avec plusieurs liens.

Le document HTML :


<!doctype html> 
<html lang="fr"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script src="jquery.mon_infobulle.js"></script> 
<script> 
    $(document).ready(function(){ 
        var options = { 
            offsetX: 30, 
            offsetY: 5, 
            infobullecss: "infobulle" 
        }; 
        $("a.info").mon_infobulle(options); 
    }); 
</script> 
<style> 
    .infobulle { 
        width: 150px; 
        padding: 3px; 
        background-color: #9CF; 
        border:...

Quelques plug-ins

Nous avons retenu quelques exemples de plug-ins. Pour pleinement apprécier le côté spectaculaire de ceux-ci, nous vous invitons plus que jamais à consulter l’espace de téléchargement dédié à ce livre.

1. jQuery UI

a. Préalable

jQuery UI (UI pour User Interface) propose de nombreux widgets pour enrichir l’interface visuelle de vos pages ou applications HTML comme les fenêtres de dialogue, les infobulles, les menus en accordéon, les menus avec onglets, les boutons, le glisser et le déposer (drag/drop), le redimensionnement et la réorganisation des éléments.

Outre ces éléments devenus classiques, jQuery UI intègre également les nouvelles balises du HTML5 avec les curseurs, les calendriers, les barres de progression, les compteurs numériques et les formulaires avec suggestion. Ces widgets permettent d’incorporer dans la conception des pages HTML ces balises HTML5 innovantes qui deviennent ainsi enfin opérationnelles pour tous les navigateurs du marché. Même les plus anciens !

En raison du nombre et de la richesse de ces modules externes proposés, jQuery UI se positionne comme le complément indispensable de jQuery. Que vous souhaitiez des applications web hautement interactives ou que vous désiriez simplement ajouter un widget comme un calendrier, jQuery UI s’impose à vous comme une excellente solution.

Ajoutons que ces widgets sont hautement configurables par le système d’options de jQuery UI et parfaitement adaptables à l’identité graphique de votre site par l’outil ThemeRoller.

Le livre jQuery UI - Enrichir l’interface de vos applications Web dans la collection Expert IT des Éditions ENI détaille l’implémentation et la configuration de ces multiples widgets.

b. Installation

Étape 1

jQuery UI (http://jqueryui.com/) est une extension du framework jQuery dédiée à l’interface de vos applications. Ainsi, jQuery UI a besoin de jQuery pour fonctionner. Cette couche de jQuery prend en charge toute la gestion des fonctionnalités JavaScript mises en œuvre par les multiples widgets introduits par jQuery UI. On retrouve donc un appel (ici par CDN) de la librairie jQuery.