Marre des checkbox qui ressemble à des cases à cocher ?
Envie de les « styliser » un peu ?
Alors le plugin jQuery VChecks devrait répondre à ce problème 
D’une liste simple :
[html]
<ul id="custom_list" style="width: 300px">
<li><input name="first" type="checkbox"><span>First checkbox</span></li>
<li><input name="second" type="checkbox" checked><span>Simple checkbox is checked</span></li>
<li><input name="third" type="checkbox"><span>Another simple</span></li>
<li><input name="last" type="checkbox" checked><span>Last checkbox is checked</span></li>
</ul>
[/html]
Et avec un peu de javascript :
[javascript]
$(function(){
$("#custom_list").vchecks();
});
[/javascript]
Et hop :
Lien :
L’idée du plugin est bonne, l’aspect du résultat est très chouette aussi.
Par contre, dés que l’on va regarder sous l’capot, c’est tout de suite beaucoup moins sympathique. Très dommage.
Franchement, je déconseille ce plugin en l’état, car vu la qualité du code vraiment médiocre, je présage de jolis risques de bugs, et des performances loin de l’optimal.
Comme ce plugin me plait sur le concept, je suis déjà en train de retravailler le code et j’en proposerait une version remastérisé à l’auteur rapidement.
Nico
Comme je le disais dans mon précédent commentaire, le fonctionnement du plugin VChecks me semble plutôt médiocre de plusieurs points de vu.
Ce qui, à mon avis, ne va pas dans ce plugin :
- Utilisation de span pour les labels de checkbox, et pas du tag label qui est fait pour et fourni une meilleur ergonomie
- Manque de simplicité globale. Un grand nombre de choses sont inutiles, et donc dans un soucis de simplicité (donc meilleure évolutivité, meilleure maintenabilité, meilleure optimisation) il faut bannir tout l’inutile.
- Utilisation d’un div inutile pour afficher les checks (un background bien placé fera mieux l’affaire).
- Utilisation de la class CSS unchecked en plus de la class checked. Si c’est pas checked, fatalement c’est unchecked, donc inutile d’en faire deux classes CSS.
- Utilisation des classes first et last : Ni l’une ni l’autre n’est utilisé en javascript. En fait ces classes sont utilisées pour le CSS. Elles pourraient d’ailleurs être utilisés pour la présentation de la liste lorsque le JS est désactivé, ou que l’on utilise pas le plugin, ou sur d’autres composants de la page. Donc ce n’est pas spécifique à la gestion de liste de checkbox : Rien a faire donc dans ce plugin.
- Utilisation de la classe hover. Comme précédemment, cette classe est là seulement pour palier à un défaut de IE, et n’est pas du tout spécifique à la liste de checkbox. Il est donc incohérent de mettre dans ce plugin cette gestion de la classe hover.
- Les input checkbox sont masqués en javascript avec hide(). Tout le reste de la présentation est fait en CSS. C’est incohérent. Soit on délègue la mise en page au CSS, soit on gère le tout en JS, mais pourquoi faire moitié l’un et moitié l’autre ? Et pour laissé un maximum de personnalisation possible, le mieux est de gérer la mise en page en CSS. Et donc le masquage de l’input devrait être géré en CSS aussi. Le javascript, lui, ne se charge que de gérer les interactions, les événements, et permet de fournir au CSS les moyens d’une mise en page correct.
- erreurs de codage javascript : une variable non initialisée donc globale (pas de var utilisé) : c’est moche. gros manque d’optimisation sur les manipulations DOM et sur les gestion d’événements : c’est moche aussi.
Si on veut reprendre ce plugin et faire mieux, il faut commencer par se poser la question suivante :
Que fait ce plugin ?
Et pour répondre à cette question, il faut répondre à une autre question : Qu’est-ce qu’on veut faire ?
Ce qu’on veut faire :
Une liste de checkbox visuellement sympa, et donc avec des checkbox stylisés.
Comme c’est une question de mise en page, on devrait se tourner avant tout vers le CSS. Mais le CSS ne pourra pas faire tout.
C’est là qu’intervient notre plugin jQuery : fournir au CSS les moyens de faire une mise en page plus efficace de notre liste.
Qu’est-ce que le CSS n’est pas capable de faire :
- Faire varier la présentation d’éléments de la liste (le li ou le label) en fonctions de l’état de la checkbox (checkée ou pas).
A partir de là, on en conclu que notre plugin jQuery est finalement très basique. Il suffit en gros de vérifier l’état de la checkbox, et d’ajouter une classe CSS au LI correspondant à la checkbox si celle-ci est checkée.
Cette vérification, il faudra la faire au chargement de la page, ainsi qu’a chaque changement d’état de la checkbox. Ici on sera confronté à un petit problème car l’événement signalant le changement d’état d’une checkbox n’est pas géré correctement par IE. Donc pour faire simple j’ai géré via l’événement click, mais cette solution n’est peut-être pas idéale pour une question d’accessibilité, donc il faudrait peut-être revoir ce point.
Donc maintenant, on sait ce que l’on veut :
Un script JS auquel on va indiquer une liste HTML contenant des checkbox, et ce script devra controler si les checkbox en question sont checkées ou pas. Si une checkbox est checkée, le script devra ajouter une classe CSS (« checked » par exemple) au LI contenant la checkbox. Si la checkbox n’est pas cochée, pas de classe « checked » pour le LI.
Franchement, rien de bien compliqué.
Ensuite, tout le reste c’est du CSS.
Afin de pouvoir optimiser la présentation CSS, notre plugin pourra également ajouter une classe CSS sur le UL racine de la liste afin de pouvoir distinguer la présentation avec JS de la présentation sans JS.
Si vous voulez un exemple d’implémentation de ce plugin à ma façon, vous pouvez le trouver à l’adresse suivante :
http://github.com/LeMisterV/jquery.checklist
Dans cette exemple ma liste de checkbox n’a pas exactement la même tête que celle d’origine. Mais c’est une bête question de CSS, et je ne voulais pas m’embêter à reprendre les images de fonds etc… Évidement le rendu pourrait être identique.
Cordialement,
Nico
@Nico :
« et j’en proposerait une version remastérisé à l’auteur rapidement. »
Il y a exactement 8 heures et 37 minutes entre tes 2 commentaires
Sinon, tu fais une excellente critique de ce plugin (constructive qui plus est) et ta version est effectivement plus pertinente quand à l’idée que tu te fais (et que je partage
) de la séparation CSS/Javascript.
Merci encore pour tes commentaires et ta version de ce script.
trop hot g rien comprie a se truc la lol
1/ merçi d’éviter le langage SMS
2/ Qu’est ce que tu ne comprends pas ? le plugin en lui-même ou le commentaire de Nico ?