Un plugin JQuery est une extension de la librairie JQuery. Un plugin peut être comparé à une fonction prédéfinie. En général, un plugin sert à ne remplir qu’une seule fonction, un seul objectif. On en compte plus de 1 000, la plupart peuvent être trouvés dans la partie plugins du site officiel de JQuery (en anglais).

Le premier plugin est Shadowbox,il est utilisé sur Coconews et E-monsite. Shadowbox permet l’affichage d’information mis en avant du reste du site. Il permet de mettre en avant une image (en grand format), une autre page, une vidéo… dans un cadre qui sera centré à l’écran et qui recouvrira la page en cours. Sa grande souplesse permet de l’utiliser sur un site comme E-monsite, car il faut qu’il fonctionne sur tous les sites membres.

Ensuite, il y a le plugin Droppy qui permet de créer très facilement des menus déroulants. Il peut gérer plusieurs niveaux de sous-menus (jusqu’à trois apparemment). Il est facilement personnalisable en CSS. Il est également utilisé sur E-monsite.

Le plugin JCarousel permet de créer une galerie de photos (horizontale ou verticale) et de les faire défiler dans zone limitée. Il est également simple à mettre en place. La structure des blocs générés ne facilite pas forcément la personnalisation graphique. Ce plugin a été utile sur le site du Festival de Saint-Riquier et sur Coconews.

Enfin, en bref, je peux également citer le plugin Cycle qui permet de faire des diaporamas avec des animations personnalisées, JQueryUI qui propose plein de fonctionnalités différentes telles un datepicker (un calendrier permettant de sélectionner une date), des curseurs à glissière…, Tooltip qui permet de créer des info-bulles personnalisables et enfin Rating qui permet de créer un système de notation personnalisé.

Mais à quoi ça sert ?

Ce n’est pas par hasard si le slogan de JQuery est : « Write less, do more » (que l’on peut littéralement traduire par : « Ecrivez moins, faîtes-en plus »). JQuery permet donc de faire du JavaScript plus facilement et plus rapidement. Cette librairie est également utile pour réaliser de légers effets graphiques ou bien encore des animations (certains sites faits avec JQuery ressemblent beaucoup à des sites en flash).

Comment ça fonctionne ?

La première chose à faire est de télécharger la dernière version (à l’heure actuelle 1.3.2) de JQuery (disponible ici). Il faut ensuite lier JQuery à votre page HTML comme n’importe quel fichier externe JavaScript :

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

Ensuite, pour faire un premier effet (agrandir un bloc par exemple), il faut insérer ce script dans votre page (ou dans un fichier externe, selon votre préférence) :

$(document).ready(function() {  $('a#agrandir').click(function() {
$("#bloc1").animate( { width:"90%" }, 1000 )  });});

Quelques explications :

• la première ligne permet de demander au navigateur d’exécuter le code JavaScript lorsque la page est chargée (équivalent à l’attribut onload).
• la deuxième ligne permet de détecter si le lien ayant pour id agrandir (a#agrandir) a été cliqué (équivalent à l’attribut onclick)
• la troisième ligne permet d’animer le bloc ayant pour id bloc1 jusqu’à ce qu’il ait une largeur de 90% (l’animation durera 1000 millisecondes, soit une seconde).

Une documentation en français de JQuery existe, elle est disponible ici.

J’ai commencé chez Awelty vers la fin novembre en tant que développeur web. Mes compétences vont du PHP/MySQL à l’HTML/CSS en passant par le JavaScript (avec le framework JQuery), l’Ajax et le débuggage. Mon premier projet a été de développer entièrement le site de Coconews avec ses trois portails (Guadeloupe, Martinique et Guyane). J’ai ensuite participé au développement du site du festival de Saint-Riquier. Je m’apprête maintenant à développer la nouvelle version d’Agenda Culturel avec une sortie prévue pour cet été (les paris ont déjà été lancés sur la date de sortie).

En dehors du boulot, je tiens un blog perso qui parle principalement de développement web (JQuery, PHP, Ajax), de web design et de la culture web en général. J’aurai certainement l’occasion de revenir sur le framework JQuery dans le futur. On peut également me retrouver sur Twitter.

Pour conclure ma présentation, je peux dire que ce n’est peut-être pas innocent si mon surnom ici est « le Geek« …

En général, pour chaque formulaire sur un site on créé une fonction spécifique. Ce qui peut s’avérer rapidement une grosse perte de temps.

La problématique est donc posée : comment gagner du temps tout en effectuant des contrôles sur les formulaires en bonne et due forme ?

Il suffit d’avoir une seule et même fonction pour l’ensemble des formulaires. C’est là que l’utilisation de jQuery devient très intéressante. En effet, avec jQuery il est possible d’agir sur les éléments de la page ayant le même sélecteur.

Nous allons donc définir une classe spécifique aux éléments de formulaire obligatoires. De plus, nous allons indiquer un élément title aux champs formulaires afin de pouvoir les réutiliser dans notre fonction :

<input name="nom" id="nom" class="obligatoire" title="Nom" type="text">

Ainsi, tous les éléments ayant la classe « obligatoire » devront être remplis. La fonction javascript suivante se charge du contrôle :

function VerifForm(){
var count=1;
var message="";
$(".obligatoire").map(function(){

if($(this).val()== »)
{
message += « \n – « +$(this).attr(« title »);
count++;
}
});

message += « \n\n »+ »Puis validez de nouveau le formulaire »;

if(count==2) { alert(« Veuillez remplir ce champ :\n »+message);
return false; }
else if(count>2) { alert(« Veuillez remplir ces champs\n »+message);
return false; }
else { return true; }

}

Ainsi, si le champ « nom » n’est pas rempli, une alerte javascript (qui peut être modifiée par une alerte ajax, avec par exemple le plugin facebox) indiquera que le champ n’est pas rempli.

Il ne faut pas oublier d’appeler cette fonction dans la balise <form> : onsubmit= »return VerifForm(); »

Cette fonction est basique et doit être améliorée pour prendre en compte d’autres éléments de formulaire tels que les cases checkbox, les boutons radio, etc. De plus, il serait judicieux de définir des classes différentes pour contrôler les adresses email, les numéros de téléphone, etc.