12 tips et plugins jQuery pour améliorer vos interfaces

jQuery fait partie des bibliothèques javascript qui ont le vent en poupe et pour cause, sa qualité et sa communauté lui confère un statut que beaucoup d’organisations lui ont reconnu : WordPress, Drupal, Spip, Mozilla, Google, Dell intègrent cette bibliothèque dans leur développement.

Voici une sélection de 12 plugins que j’ai trouvés particulièrement intéressants sur différents points. Certains offrent une profonde intégration de la notion d’accessibilité en respectant WCAG 2.0, d’autres (et c’est la majorité) améliorent grandement l’ergonomie des interfaces web et sont innovants pour l’expérience utilisateur.

1. jQuery-Accessible-RIA
   jQuery Accessible RIA est une collection de plugins jQuery conformes avec les guidelines WCAG 2.0 et les normes WAI-ARIA. On y compte un plugin de gestion de tableaux, un de validation de formulaire, un pour les onglets accessibles et une lightbox. Un projet à suivre.
2. FormToWizard
   Un plugin puissant qui permet de décomposer, de manière transparente, un formulaire long et indigeste en une suite de mini-formulaires avec affichage des étapes et la possibilité de naviguer dans ces étapes.
3. Sliding login panel
   A l’heure où les formulaires de connexion et d’inscription sont devenus légion mais posent toujours problème en matière d’architecture et de webdesign, voici un plugin qui permet d’obtenir une zone d’inscription ou de connexion propre et ergonomique.
4. Validation
   Le plugin ultime de validation de formulaire en live : propre, facile à utiliser, paramétrable à souhait. Indispensable !
5. Img Notes
   Un plugin simple qui permet d’ajouter des notes sur une image (comme le permet Flicker ou Facebook, par exemple)
6. ColorPicker
   Parmi la foultitude de colorpickers existants celui-ci me parait le plus équilibré, le meilleur rapport fonctionnalités/légèreté.
7. Pretty checkboxes
   Une méthode pour remplacer de manière innovante les “bêtes” cases à cocher. Propre et clair !
8. Créer un joli nuage de mots-clé avec Facelift et jQuery
   Un tutorial pour réaliser un nuage de mots-clé dont l’aspect peut mieux respecter une charte graphique et offrir un bien meilleur rendu. Aucun problème du coté SEO, le code est non obstrusif et respecte les standards.
9. selectToUISlider
   Un superbe plugin qui permet de réaliser des sliders à une ou 2 entrées grâce à des <select> pour des sélections d’intervalles, par exemple. A noter l’accessibilité du plugin.
10. jqGrid
    Voici une solution de gestion avancée de datagrid. jqGrid permet d’afficher et de manipuler les données dans un tableau. Les chargements de données se font par requêtes Ajax et ce plugin dispose de toutes les fonctionnalités qu’on peut en attendre : tri de colonne, sous-tableaux, tableaux dépendants, performance, data mapping, dédition des données (avec filtres possibles)…
11. David Walsh: Sexy Album Art with MooTools or jQuery
    Un tutorial bien sympathique pour afficher proprement les informations d’un album de musique mais cela peut aussi s’adapter à tout autre contenu visuel nécessitant une sur-couche informative dont la présence n’est pas indispensable de prime abord.
12. Recreate the Apple Product Slider
    Un tutorial pour obtenir un slider dynamique comme sur le site d’Apple.

• FireQuery
  Un addon, encore en beta, pour Firefox bien pratique qui vient se greffer intelligemment sur Firebug et qui permet de gérer jQuery directement depuis la console Firebug. On pourra voir, par exemple, tous les événements accrochés à un élément du DOM… indispensable !
• Zero Clipboard: Javascript Copy to Clipboard
  En cadeau, un petit script, non basé sur jQuery, prometteur qui mêle javascript et Flash pour la gestion du copier/coller sur tous les navigateurs.

Post By David Lafon (87 Posts)

David Lafon est blogueur sur Web-intention.com, consultant UX, responsable qualité web et co-fondateur de w3qualité.net.

Website: →

Connect