Discussion :

[noobyyy]

bonsoir depuis peu j'ai découvert que l'on pouvait personnaliser des listes déroulantes avec une liste <ul></ul>. Mais le problème c'est que je ne sais pas comment récupérer la valeur sélectionner apparemment c'est différent d'une vrai liste déroulante, donc comment faire ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<ul id="list1">
<li value="1">&nbsp;<img src="../../img/man.png" alt="Homme" />Homme</li>
<li value="2">&nbsp;<img src="../../img/woman.png"  alt="Femme" />Femme</li>
<li value="0">&nbsp;<img src="../../img/anonyme.png" alt="Anonyme" />Anonyme</li>
</ul>

[SpaceFrog]

un li n'a pas de value !
il faut tout emuler et modifier une variable globale sur le onclick du li

[noobyyy]

ah tu me dis une variable globale pour que lorsque je clique sur un choix de la liste déroulante ça garde la valeur en attendant que je valide je formulaire ?
c'est bien ça ?

merci pour l'idée !

[SpaceFrog]

oui car les li n'ont pas de value , il faut bien garder la valeur quelque part ..

tu peux aussi mettre un input hidden ce qui serait plus dans la logique formulaire

[noobyyy]

ah oui encore mieux... merci SpaceFrog !

[noobyyy]

En revanche comment je fais pour dire que le membre à choisi un élément par défaut ? par exemple avec une liste déroulante selected="selected" affiche sans aucun soucis l'élément sélectionné, mais la... avec <ul><li></li></ul> comment faire ?

[SpaceFrog]

ben tu dois pouvoir renseigner l'input hidden avec la valeur selectionnée et du coup tu scanne les collection des li du ul pour tester et attribuer la bonne class

[noobyyy]

tu scanne les collection des li du ul pour tester et attribuer la bonne class

euh... j'ai une idée mais je ne sais pas si c'est comme tu veux me faire comprendre. Au pire je fais une fonction qui affiche en 1er le premier le <li> sélectionné et les deux autres a la suite...

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getElementsByTagName('li')

[noobyyy]

euh ça commence mal je suis déjà bloqué au 1er onClick !

La fonction marche bien mais cependant ça entoure que le lien et donc assez problématique pour une liste déroulante.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
'<li>&nbsp;<a href="javascript:genre(1);" title="" />
<img src="../../img/man.png" alt="homme"/>Homme</a></li>'."\n".

--

le onClick fonctionne, mais voila juste sur l'image en même temps c'est logique...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
'<li>&nbsp;<img onClick="javascript:genre(1);" src="../../img/man.png" alt="homme"/>Homme</li>'."\n".

comment avoir la ligne complète du <li> pour appeler la fonction ?

edit:

ok, après quelques recherche j'ai eu cette idée qui marche bien:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="longueurlist" onClick="javascript:genre(1);">&nbsp;<img onClick="javascript:genre(1);" src="../../img/man.png" alt="homme"/>Homme</div>

en revanche pour la suite c'est à dire afficher ce qui est en cours en 1er jsuis perdu même avec l'indice

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
getElementsByTagName('li');

[SpaceFrog]

mets le onclick sur le li ?

[noobyyy]

marche pas sur le <li>

[SpaceFrog]

ha ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul>
	<li onclick="alert('coucou')"> un li</li>
	<li onclick="alert('coucou')"> un li</li>
	<li onclick="alert('coucou')"> un li</li>
</ul>

[noobyyy]

toi ca va marcher car tu va cliquer sur du texte moi dans ma liste j'ai du vide. Enfin avec le div ça marche bien je vais rester sur cette option, au pire je vais ressayer avec le <li> plus tard mais bon hier j'ai bien cherché pour afficher le <li> par défaut impossible, j'ignore qu'elle est ton idée.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style type="text/css">
.sel {display:inline;
	}
.nosel {display:none}
 
</style>
<script type="text/javascript">
function li(val){
var i=0
var tabli=document.getElementsByTagName('li')
while (tabli[i++]){
 tabli[i-1].className=(tabli[i-1].innerHTML.replace(/\W/g,'')==val)?'sel':'nosel'
 }
 }
 
</script>
 
 
</head>
 
<body>
<ul>
	<li class="sel">un</li>
	<li class="nosel">deux</li>
	<li class="nosel">trois</li>
</ul>
<select onchange="li(this.value)">
<option value='un'>1</option> 
<option value='deux'>2</option> 
<option value='trois'>3</option> 
</select>

[noobyyy]

merci de ton aide, j'ai essayé de bien comprendre ton code.

Voici ma liste déroulante:


son code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
'<ul id="list1">'."\n".
	'<li><div class="longueurlist" onClick="javascript:genre(1);">&nbsp;<img src="../../img/man.png" alt="homme" tabindex="4"/>Homme</div></li>'."\n".
	'<li><div class="longueurlist" onClick="javascript:genre(2);">&nbsp;<img onClick="javascript:genre(2);" src="../../img/woman.png"  alt="femme" />Femme</div></li>'."\n".
	'<li><div class="longueurlist" onClick="javascript:genre(0);">&nbsp;<img onClick="javascript:genre(0);" src="../../img/anonyme.png" alt="anonyme" />Anonyme</div></li>'."\n".
'</ul>'."\n";

elle deviendra une liste déroulante enfin au niveau visuel grâce à Jquery.
j'ai le sexe de la personne dans une session.
avec ton code tu fais disparaitre le <li> ce qu'il faudrait c'est juste une question d'ordre au niveau de l'affichage.

Je ne dis pas que tu as tord au contraire merci de m'aider, j'essaie de trouver une solution et je galère, je me demande comment je vais faire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
'$(function(){'."\n".
		'$("ul#list1:eq(0)").imgDropDown({title:"sexe"});'."\n".
'});'."\n".

si à la place de sexe (le titre) j'afficherai la session du sexe ? et après j'affiche le reste ?

au début je voulais faire un switch() mais j'ai lâché l'affaire...

edit:
impossible de mettre autre chose que du texte dans le title

edit2:
est-ce que c'est possible d'émuler un click ?

exemple ça charge la page, puis ça émule comme si j'avais cliqué sur homme.
avec ce principe tout rentre dans l'ordre !

genre comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('0list').click();

mais comment l'exécuter automatiquement ?

edit3:
exemple:

echo '<br /><a href="javascript:testclick('.$_SESSION['sexe'].');">test</a><br />';

<li id="1list"...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function testclick(sexe)
{
	document.getElementById(sexe+'list').click();
}

pourquoi ça ne marche pas comme ça ?

[noobyyy]

voici le JavaScript qui fait ma liste déroulante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
(function($) {
	//Définition du plugin
	$.fn.imgDropDown = function(options) {	
 
		// définition des paramètres par défaut
		var defaults = {
		    title: "",
		    callback: null
		};	
		// mélange des paramètres fournis et par défaut
		var opts = $.extend(defaults, options);		
 
		// création d'une liste
		function createList(f){
			// créer la première zone, affichant l'option sélectionnée
			var cell = $("<div class='dropdownCell'>" + opts.title + "</div>");
 
			// créer la seconde zone, affichant toutes les options
			var dropdown = $("<div class='dropdownPanel'></div>");				
 
			$(this).find("li").each(function(){
				dropdown.append($("<div class='dropdownOpt'></div")
					.click(onSelect)
					.attr("value", $(this).attr("value"))
					.append($(this).html())		
					.hover(function(){$(this).addClass("dropdownOptSelected");},
						   function(){$(this).removeClass("dropdownOptSelected");})
				);
			});
 
			// on masque la zone déroulante
			dropdown.hide();
			$.data(cell, "visible", false);
 
			// on remplace la balise ul par notre liste personnalisée
			$(this).after(dropdown);
			$(this).after(cell);
			$(this).remove();
 
			// on positionne l'évènement de déroulage de la liste
			cell.click(function(){		
				// si la liste est déroulée
				if ($.data(cell, "visible")){
					dropdown.slideUp("fast");
					$.data(cell, "visible", false);
				}else{
					dropdown.slideDown("fast");
					$.data(cell, "visible", true);
				}
			});
 
			// fonction appelée à chaque sélection d'un élément
			function onSelect(){			
				cell.html($(this).html());
				cell.attr("value", $(this).attr("value"));
				dropdown.slideUp("fast");
 
				$.data(cell, "visible", false);
 
				// appel d'une fonction personnalisée
				if (opts.callback)
					opts.callback($(this));
			}				
		}
 
		// création d'une liste déroulante personnalisée pour tous les éléments de l'objet jQuery
		$(this).each(createList);	
 
		// interface fluide
		return $(this);
	};
})(jQuery);

Code CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
echo
	'<style type="text/css">'."\n".
	'.dropdownCell{
		border : 1px solid #bbb;
		width: 150px;
		height: 23px;
		cursor: pointer;
		font-family: arial;
		font-size: 10pt;	
		max-height: 23px;'."\n".
	'}'."\n".
 
	'fieldset:hover .dropdownCell:hover {
		border: 1px solid #5987BD;
	}'."\n".
 
	'.dropdownCell img{
		margin : 0px 3px 0px 3px;
		vertical-align: middle;
		width: 24px;
	}'."\n".
 
	'.dropdownPanel{
		border : 1px solid #bbb;
		width: 150px;
		position: absolute;
	}'."\n".
 
	'.dropdownOpt{
		background-color: #fff;
		cursor: pointer;
		font-family: arial;
		font-size: 10pt;
	}'."\n".
 
	'.dropdownOpt img{
		margin : 0px 3px 0px 3px;
		vertical-align: middle;
		width: 24px;
	}'."\n".
 
	'.dropdownOptSelected{
		background-color: #ccc;
	}'."\n".
 
	'.longueurlist {
		width: 150px;
	}'."\n".
	'</style>'."\n";