11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour

J'aimerai inclure du code html dans les balises <option> des liste déroulantes. Je sais que par défaut les listes déroulantes n'acceptent pas de mise en forme (image, gras, italique etc...).

Pour cela je pense à l'utilisation de javascript pour remplacer le code classique par un menu dhtml tout en gardant les comportements habituels des <select> (navigation par clavier, disabled, select multiple etc...).
Cela permettrait de mettre des balises de mise en forme dans les options.

Ca fait plusieurs jours que je recherche une solution complète permettant de personnaliser ces listes déroulantes mais sans résultat.

J'avais déjà trouvé il y a quelque temps une solution parfaite mais j'ai malheureusement perdu le lien Smiley decu
Il me semble que ça utilisait la bibliothèque prototype ou Jquery.

Voilà, donc si vous connaissez de bons liens, je suis preneur.

Merci d'avance Smiley cligne

Arnaud
Le problème c'est qu'avec n'importe quelle bibliothèque du monde aussi bien construite soit-elle, tu n'atteindras jamais l'accessibilité optimum de la liste déroulante standard, comprise par tous, reconnue par tous les moyens d'aide technique, et dont chacun sait se servir.
QuentinC a écrit :
Le problème c'est qu'avec n'importe quelle bibliothèque du monde aussi bien construite soit-elle, tu n'atteindras jamais l'accessibilité optimum de la liste déroulante standard, comprise par tous, reconnue par tous les moyens d'aide technique, et dont chacun sait se servir.
Je n'aime pas trop ce terme, mais pour une fois, soyons fous : "+1".
QuentinC a écrit :
Le problème c'est qu'avec n'importe quelle bibliothèque du monde aussi bien construite soit-elle, tu n'atteindras jamais l'accessibilité optimum de la liste déroulante standard, comprise par tous, reconnue par tous les moyens d'aide technique, et dont chacun sait se servir.


Il est évident que cette solution, si elle existe, ne pourra être accessible à 100% (en tout cas avec les fonctionnalités citées) vu que ces balises n'ont pas été créées dans ce but.
Je compte m'en servir pour une interface type CMS où ce type d'outil a son utilité.

J'ai cependant relevé quelques liens intéressants :
http://www.badboy.ro/assets/articles/niceforms/niceforms.html
http://www.easy-designs.net/articles/replaceSelect/
http://cbach.jquery.com/demos/selectbox/

Cette solution étant la plus proche de ce que je recherche :
http://www.glanzani.com.ar/select/index.htm (un peu lourd tout de même)

Merci @+
Modérateur
Salut,

Si c'est pour faire la même que dans le dernier exemple que tu cites, Scriptaculous est complètement inutile...

Il ne s'agit que de transformer la structure pour en faire une liste.
Pour la sélection multiple, tu peux affecter une classe au clic sur l'item.
Bien entendu, il faut aussi prévoir le comportement lors de la navigation à la souris ou au clavier.
Bref, ce n'est que DOM et CSS; il n'y a pas besoin de bibliothèque.
Je pense sincèrement qu'on peut obtenir quelquechose de pleinement fonctionnel même si ça nécessite du boulot derrière... ( Pas de solution toute faîte non. Smiley cligne )
koala64 a écrit :

Si c'est pour faire la même que dans le dernier exemple que tu cites, Scriptaculous est complètement inutile...


Justement, j'espère ne pas avoir à utiliser une bibliothèque complète telle que scriptaculous pour juste effectuer cet effet visuel car c'est bien trop lourd.

Personnellement je pense utiliser Jquery (que j'utiliserais de toute façon pour d'autres fonctionnalités) et programmer quelque chose qui reprend les comportements des select tout en permettant de la mise en forme dans les options.

Voilà, si j'ai quelque chose de fonctionnel qui en ressort, je posterais ici le lien car j'imagine ne pas être le seul à rechercher une liste déroulante compatible avec les images et les tags html.

Merci et @+