Skiner des chekboxes

Affichage hiérarchique | Affichage linéaire

Skiner des chekboxes

Auteur Message

thelos
Organisateur de concours

Messages : 196
Groupe : Concours
Inscription : Feb 2008
Statut : Hors ligne
Réputation : 2

Message : #1

Skiner des chekboxes

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.

Amitiés, Thelos

Beau, fort, intelligent, brillant, grand, musclé, grand coeur, esthétiquement parfait, création divine et accessoirement humble.

05-08-2008 05:38 PM

Visiter le site internet de cet utilisateur

Trouver tous les messages de cet utilisateur

nemesis_elite
Membre

Messages : 270
Groupe : Membre
Inscription : Aug 2006
Statut : Hors ligne
Réputation : 11

Message : #2

RE: Skiner des chekboxes

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

Projet en pause

Ce message a été modifié le: 05-08-2008 06:23 PM par nemesis_elite.

05-08-2008 06:17 PM

naholyr
Modérateur Programmation

Messages : 861
Groupe : Modérateur
Inscription : Aug 2006
Statut : Hors ligne
Réputation : 18

Message : #3

RE: Skiner des chekboxes

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/

Ressources [PHP][MySQL][

prototype.js]
Projet Dei - Le jeu [Statut=Conception]

naholyr@jabber.fr

Ce message a été modifié le: 05-08-2008 07:00 PM par naholyr.

05-08-2008 06:51 PM

« Sujet précédent | Sujet suivant »

Voir une version imprimable
Envoyer ce sujet à un ami
S'abonner au sujet | Ajouter le sujet aux favoris