Skiner des chekboxes

[thelos]

Salut à tous,

j'ai, il y a peu de temps cherché des solutions novatrices, légères et simples à mettre en place pour mes marchands d'items.
Pour cela, j'ai conclut que faire un formulaire sous forme de tableau avec dans ses cellules des chekboxes sous forme d'images serait un bonne idée. Les chekboxes seraient en fait les skins des items et les caractéristiques des
items se montreraient à l'aide d'une infobulle (tooltip).

Cela implique d'avoir un lot de chekboxes personnalisables et dynamiques (supportant une 50aine de skins différents).

J'ai déjà trouvé des alternatives en Js mais assez lourdes, si néamoins vous en trouvez ou en connaissez une qui collerait
Je veux aussi éviter les xForms pour plus d'accessibilité.
Flash/silverlight et Java sont à proscrire à moins que ce ne soit réellement intéressant. :motard:

Amitiés, Thelos

[nemesis_elite]

Salut salut,

Il y a longtemps, j'ai trouver une petit css qui permet de personnaliser les checkbox.

Voila ce que ca donne

Le CSS :

Code :

    input[type=checkbox] {
   position: absolute;
   left: -999em;
}
input[type=checkbox] + label {
   display: block;
   height: 16px;
   padding-left: 25px;
   background: url(bullet.gif) top left no-repeat;
}
input[type=checkbox]:checked + label {
   background-image: url(bullet_checked.gif);
}

Le formulaire :

Code :

<form method="post" action="/examples/checkboxes.php">
   <fieldset>
      <legend>Check some boxes</legend>
      <input type="checkbox" name="test[]" value="foo" id="foo_field"><label for="foo_field">Foo</label><br />
      <input type="checkbox" name="test[]" value="bar" id="bar_field"><label for="bar_field">Bar</label><br />
      <input type="checkbox" name="test[]" value="baz" id="baz_field"><label for="baz_field">Baz</label><br />
      <input type="submit" value="Submit" name="subm">

   </fieldset>
</form>

NemeSiS_eliTe

[naholyr]

Note : ça ne fonctionnera pas sous IE (en tous cas 6, qui ne gère pas le sélecteur [...] et je doute que le 7 connaisse :checked).

Edit : après tests, je confirme, le "truc" ne fonctionne pas du tout sous IE6 (ce qui fait que le formulaire est totalement utilisable puisqu'on retombe sur les checkbox classiques), et partiellement sous IE7 mais pour ce dernier c'est très embêtant : le style initial est bien appliqué mais comme la pseudo-classe ":checked" est inconnue, on ne voit jamais si la checkbox est cochée ou non

Un petit coup de Javascript me semble la seule solution portable (du côté de jQuery, il doit y avoir moyen de faire un truc clean).

Edit2 : et après recherche je confirme
- http://john.mcclumpha.org/javascript/Cre...th_jQuery/
- http://code.google.com/p/jquery-checkbox/