Discussion :

[Setsuna_00]

Bonjour,

Code :

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

1
2
 
<a class="multiSelect" id="choix_magasin"><span>Blablabla</span></a>

Lorsque je clique sur la premiere fois sur mon a: cela lance

Code :

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

1
2
3
4
 
	$('#choix_magasin').click(function() { 
		multiliste($(this));
	});

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
function multiliste(zone)
{
	var options_arr = [];
	var colors = ["#A9CDD9", "#D3E5EC"];
	var coord = zone.offset();
	var height = zone.height();
	var default_s = true;
	zone.unbind('click');
	var div = $("<div></div>").attr('id', 'multi_liste_mag').css({ position: 'absolute', top: (coord.top+height), left: coord.left, border: '1px solid black', height: '250px' });
	$('<ul></ul>').appendTo(div);
	$.each(magasins, function(i, mag){
		if(default_s && i == 0) { zone.find('span').empty().append("&nbsp;"); default_s = false }
		var colorspan = (i % 2 == 0)? colors[0] : colors[1];
		var checkbox = $('<input />').attr('type', 'checkbox').attr('value', mag.citrix).addClass('checkmag');
		var no = $('<li></li>').css('background-color', colorspan).css('cursor', 'hand').append(checkbox).append(mag.nom);
		no.click(function() {
			if(checkbox.attr('checked'))
			{
				checkbox.removeAttr('checked');
 
				var options_text = zone.find('span').text();
				var option_s = checkbox.attr('value');
				var length_s = (option_s+", ").length;
				var pos = options_text.indexOf(option_s+", ");
 
				// console.log("options_text = "+zone.find('span').text());
				var gauche = options_text.substring(0, pos);
				var droite = options_text.substring(pos+length_s, options_text.length-1);
				// console.log("pos = "+pos);
				// console.log("length_s = "+length_s);
				// console.log("gauche = "+gauche);
				// console.log("droite = "+droite);
				// console.log("options_text = "+zone.find('span').text());
				zone.find('span').text(gauche+droite);
				var ind = options_arr.indexOf(option_s);
				if(ind != -1) { options_arr.splice(ind, 1); console.log(options_arr); }
 
			}
			else
			{
				checkbox.attr('checked', 'checked');
				zone.find('span').append(checkbox.attr('value')+", ");
				options_arr.push(checkbox.attr('value'));
			}
	    });
		div.append(no);
	});
	div.hide().appendTo('body').show('fold', {}, 500);
	zone.click(function() { 
		div.effect('fold', {}, 500);
		$(this).unbind('click');	
		$(this).click(function() {  div.show('fold', {}, 500); });
	});
}

Mon problème est que lorsque mon menu s'ouvre à partir de la deuxième fois et que je clique sur le a pour fermer: la div ne se ferme pas/pas tt de suite/s'ouvre à la place ^^.

[Shikiryu]

Rien à voir avec le message mais... un <a> sans href
Soit tu n'utilises pas de <a> (tu peux binder le click sur une autre balise hein) soit tu mets un href (même #) et tu utilises preventDefault() dans jQuery (pour pas avoir de problème.)

Après, sans avoir approfondit le code et vu que tu utilises des animations, il se peut que la solution vienne de .stop()

[Setsuna_00]

Je pense que cela vient de la:

Code :

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

1
2
3
4
5
6
 
zone.click(function() { 
		div.effect('fold', {}, 500);
		$(this).unbind('click');	
		$(this).click(function() {  div.show('fold', {}, 500); });
	});

le problème vient du fait que c'est

Code :

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

div.effect('fold', {}, 500)

qui se lance alors que je voudrai lancer:

Code :

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

$(this).click(function() {  div.show('fold', {}, 500); });

[Setsuna_00]

j'ai trouvé en fesant quelques bidouilles:

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
 
function multiliste(zone)
{
	var options_arr = [];
	var colors = ["#A9CDD9", "#D3E5EC"];
	var coord = zone.offset();
	var height = zone.height();
	var default_s = true;
	var div = $("<div></div>").attr('id', 'multi_liste_mag').css({ position: 'absolute', top: (coord.top+height), left: coord.left, border: '1px solid black', height: '250px' });
	$('<ul></ul>').appendTo(div);
	$.each(magasins, function(i, mag){
		if(default_s && i == 0) { zone.find('span').empty().append("&nbsp;"); default_s = false }
		var colorspan = (i % 2 == 0)? colors[0] : colors[1];
		var checkbox = $('<input />').attr('type', 'checkbox').attr('value', mag.citrix).addClass('checkmag');
		var no = $('<li></li>').css('background-color', colorspan).css('cursor', 'hand').append(checkbox).append(mag.nom);
		no.click(function() {
			if(checkbox.attr('checked'))
			{
				checkbox.removeAttr('checked');
 
				var options_text = zone.find('span').text();
				var option_s = checkbox.attr('value');
				var reg = options_text.replace(option_s+", ", "");
				reg = reg.replace("&nbsp;", "");
				zone.find('span').text(reg);
				var ind = options_arr.indexOf(option_s);
				if(ind != -1) { options_arr.splice(ind, 1); console.log(options_arr); }
 
			}
			else
			{
				checkbox.attr('checked', 'checked');
				zone.find('span').append(checkbox.attr('value')+", ");
				options_arr.push(checkbox.attr('value'));
			}
	    });
		div.append(no);
	});
	div.hide().appendTo('body').show('fold', {}, 500);
	$('body').keydown(function(e) {
		if(e.which == 27 || e.wich == 13) { $('#multi_liste_mag').effect('fold', {}, 500); console.log('fermeture'); }
	});
}

Dans le $(document).ready():

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
$('#choix_magasin').click(function() { 
		if(!first_click_mag){ multiliste($(this)); first_click_mag = true; rebind(); }
	});
 
	function rebind()
	{
		$('#choix_magasin').click(function() { 
			if(first_click_mag)
			{ 
				if($('#multi_liste_mag').css('display') != 'none')
				{
					//$('#multi_liste_mag').
					$('#multi_liste_mag').effect('fold', {}, 500);
				}
				else
				{
					$('#multi_liste_mag').show('fold', {}, 500);
				}
			}
		});
	}

C'est pas propre, pas optimisé mais ca marche!