Je vais vous présenter dans cet article quelques plugins jQuery qui j’utilise dans mes projets Symfony. Cet article n’est pas figé et pourra être amené à s’enrichir au fur et à mesure des plugins que je serai amené à utiliser et à tester (même si ça n’est pas tous les jours non plus qu’on a besoin d’un plugin, pensons aussi au temps de chargement de nos pages).
Qtip, pour une gestion d’infobulles
J’ai eu besoin d’afficher des informations supplémentaires au survol de lignes d’un tableau. C’est informations devaient être extraites d’une requête. J’ai donc cherché parmi les plugins jQuery lequel me permettrait de faire ce genre d’opérations, et j’ai trouvé QTip.
Son fonctionnement est assez simple, une fois en place vous avez accès à la méthode .qtip() et vous avez de nombreuses options permettant de faire varier le style et la position de l’infobulle.
Un exemple avec un simple texte :
$('#monElement').qtip({
content: 'Texte à afficher'
});
Pour mon développement c’était un peu plus complexe, car il fallait que j’affiche sur chaque ligne de mon tableau des informations prises dynamiquement. J’ai donc couplé l’infobulle avec une action Symfony comme suit :
$(".tdMonTableau").each(function(){
$(this).qtip({
content: {
url: '/monModule/monAction',
data: { idElement: $(this).closest('tr').find('td:eq(0) a').text() },
method: 'get'
},
style: {
tip: 'topLeft',
name: 'blue'
}
});
});
jQuery validate pour la validation de formulaires
Ce plugin disponible ici facilite grandement la vie pour une validation côté client d’un formulaire. Il permet nativement de valider des formats de données (adresse email, numéro de carte de crédit, date, date ISO…). Une fois installé, vous avez accès à la méthode .validate().
Alors bien sûr en Symfony on peut faire également de la validation de formulaire, mais il faut repasser par la case serveur, ce qui n’est pas toujours pratique suivant les cas.
Un exemple d’utilisation dans un fomulaire simple avec nom, prénom et email :
$("#ContactForm").livequery(function(){$(this).validate({
rules: {
nom: {"required": true},
prenom: {"required": true},
email: {"required": true, "email" : true},
},
messages: {
nom:"Le nom est obligatoire.",
prenom:"Le prénom est obligatoire.",
email:"Le mail est obligatoire et donc correspondre à un mail valide.",
}
}
)});
jQuery final Countdown pour un décompte de temps
Vous avez un évènement à venir et vous souhaitez mettre sur votre site un décompte de temps jusqu’à cet évènement ? Ce plugin disponible ici devrait répondre à vos souhaits. Très simple à mettre en place, l’exemple sur GitHub parle de lui-même.
jQuery FileUpload
Un upload de fichiers côté client n’est pas forcément simple à mettre en place. Heureusement, ce plugin facilite grandement la tâche et présente plutôt bien.
La mise en place et surtout l’intégration n’est pas forcément immédiate, mais il existe un wiki où vous trouverez les différentes informations nécessaires.
jQuery TableSorter
Ce plugin jQuery permet de mettre en place des tris côté client sur des tableaux HTML. Le rendu est plutôt bien, comme vous pouvez le voir sur le site du plugin.
jQuery HashChange plugin
Si vous utilisez Ajax notamment pour la navigation, la pagination ou autre, et que vous souhaitez gérer un historique de ce qu’a fait l’utilisateur, afin que le bouton retour du navigateur reste fonctionnel, vous allez devoir sans doute utiliser des hash dans l’url. Les navigateurs récents ont l’évènement « hashchange » qui permet de détecter le changement de hash. Mais sur les navigateurs plus anciens il n’en est rien, et vous n’allez donc pas pouvoir déclencher les actions nécessaires sur cet évènement. Ce plugin permet de pallier ce problème.
Je l’ai utilisé par exemple dans le développement d’un scroll continu avec jQuery compatible IE6.
Cette liste n’est donc pas exhaustive, elle reflète juste les besoins que j’ai eu, et par quel plugin j’ai pu répondre à ces besoins.
Si de votre côté vous avez des plugins jQuery que vous jugez digne d’intérêt, n’hésitez pas à en faire part dans les commentaires.
