jeudi 22 septembre 2011

fancy checkbox avec jquery

Les éléments de formulaires dans un site ont un style différent selon l'OS utilisé.
Petit a petit avec l'html5 et le css3 ces éléments vont devenir plus flexibles. En attendant quand un client exigent ou un graphiste entreprenant décident de créer des boutons "fancy" il faut trouver une solution et rapidement en plus du css on est obligé d'y ajouter une couche de javascript.

J'avais trouvé un script simple et rapide à mettre en place et à utiliser pour les checkbox :
http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/jquery.html

L'idée est de cacher la checkbox en css et de la remplacer par des images de fond, le tout rendu dynamique par jquery. On utilise pour ça le label entourant la checkbox et on vérifie l'état "checked" de l'élément input type="checkbox".
Le script est plutôt intéressant, un peu étrange aussi mais au final très pratique, et surtout il plante complètement sur Opéra.

Il s'avère qu'avec Jquery on peut faire ça beaucoup plus rapidement et simplement (merci à mon collègue de m'avoir montrer la technique qui pour l'instant a été testée sur tous les navigateurs jusqu'à IE7 sans problèmes majeurs).

/ ! \ ATTENTION uniquement pour les checkbox (pour l'instant)