Html/Css Listbox avec images

[[A]pokah.]

Bonjour.

Je tiens à préciser dés maintenant que je suis un huge noob dans le domaine web mais j'ai grave besoin d'aide en ce qui concerne :

Mettre des images dans chaque élement dans une listbox.
La listebox est genre comme ça :

<select>
<option>element 1</option>
<option>element 2</option>
<option>element 3</option>
</select>

Mais j'ai besoin d'images dans les elements, donc..

J'ai trouvé ça comme tuto, mais franchement walah j'ai resté paumé devant :rire:
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!

Comme vous voyez, c'est une liste comme ça que je veux (avec X elements, X change bien sûr donc faut le scrollbar)

Merci

 

[Evaelis]

JQueryUI, quelle question !
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!

 

[TheHardButcher]

Youy d'abord, je souhaite préciser que je n'y connais absolument rien en programmation web et qu'il faut m'excuser pour la degueulassitude des sources :p

Perso, j'ai juste téléchargé jQWidgets et utilisé le lien jQuerry de google, et tout fonctionne :p

Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!​

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> 
<link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    alert("I am an alert box!");
}
var source = [
	{ html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='abc.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxNumberInput</span></div>", title: 'jqxNumberInput' },
	{ html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/expander.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxExpander</span></div>", title: 'jqxExpander' },
	{ html: "<div style='height: 20px; float: left;'><img width='16' height='16' style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/menu.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxMenu</span></div>", title: 'jqxMenu' },
];

</script>

<div id='ListBox'>
</div>

<script>

$("#ListBox").jqxListBox({ source: source, width: '200', height: '300px', theme: 'classic'});
</script>

Oui je sais que c'est pas propre, mais ça fait ce que tu veux, alors je sais pas ce qu'il te manque :p

 

[[A]pokah.]

JQueryUI, quelle question !
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!

J'ai vu ça mais c'est des dropdown :/Et je suis pas arrivé à mettre la même pour une liste normale

 

[Evaelis]

Dans ce cas, le plugin que tu proposes est largement suffisant.

 

[[A]pokah.]

Oui effectivement, j'avais juste oublié de télécharger Widgets, merci THB

 

[kimil14]

Je te propose sans Jquery:

HTML

<select id="selectImg">
  <option>homme</option>
  <option>femme</option>
  <option value="autre">autre (animal ?)</option>
</select>

CSS

select#selectImg option[value="homme"]   { background-image:url(homme.png);   }
select#selectImg option[value="femme"] { background-image:url(femme.png); }
select#selectImg option[value="autre"] { background-image:url(autre.png); }