[POO] [MENU] UL LI

Version imprimable

[POO] [MENU] UL LI

Bonjour,
J'essaye depuis un moment de me faire mon propre menu vertical dynamique,
j'ai malheureusement quelque souci avec .. et bien je ne sais pas quoi,

Je vous laisse le soin de le tester, je ne comprend pas pour quoi il ne fonctionne pas ou bout d'un certain nombre de clique sur les différent groupes...

Code:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu vertical 01</title>
<script type="text/javascript">
var interval = new Array;
var tab = new Array;
var H_def = 17;
function deploy(obj){
obj = document.getElementById(obj.parentNode.id);
//ul = document.getElementsByTagName("ul")[0].id;
ul = obj.id.replace('groupe','menu');
 
// reduit les autre groupes
for (i in tab) {
	if (i != obj.id && (document.getElementById(i).offsetHeight-1)>= H_def) {
		clearInterval(interval[i]);
		tab[i] = false;
		ul_ = i.replace('groupe','menu');
		interval[i] = setInterval(function() {grow(document.getElementById(i),ul_)},1);
		document.getElementById('test').innerHTML = i;
	} 
}
	if (tab[obj.id] == true) {tab[obj.id]=false;}else{tab[obj.id]=true;}
	interval[obj.id] = setInterval(function() {grow(obj,ul)},1);
}
function grow(obj,ul){
	if (obj.offsetHeight <= document.getElementById(ul).offsetHeight&&tab[obj.id] == true) 
	{obj.style.height = (obj.offsetHeight+1)+"px";	}
	else if ((obj.offsetHeight-1) >= H_def && tab[obj.id] == false) {obj.style.height = (obj.offsetHeight-1)+"px";	}
	else {clearInterval(interval[obj.id]);}
}
 
</script>
<style type="text/css">
<!--
body,td,th {
	font-size: 12px;
	font-family: Calibri;
	cursor:default;
}
p {
margin:0px;
}
ul ,li {
margin:0px;
padding:0px;
}
li {
padding-left:15px;
}
.groupe {
overflow:hidden;
height:17px;
width:150px;
}
.titre {
font-weight:bold;
text-align:center;
cursor:pointer;
font-size:14px;
background-color:#6699CC;
}
-->
</style></head>
<div id="test">test</div>
<div id="groupe1" class="groupe">
  <p class="titre" onclick="deploy(this)">Groupe 1</p>
	<ul id="menu1">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
 
 
<div id="groupe2" class="groupe">
  <p class="titre" onclick="deploy(this)">Groupe 2</p>
	<ul id="menu2">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
 
 
<div id="groupe3" class="groupe">
  <p class="titre" onclick="deploy(this)">Groupe 3</p>
	<ul id="menu3">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
<body>
</body>
</html>

Possibilité de le voir a cette adresse : http://mimaro.free.fr/menu.html

Merci.

20/12/2008, 13h06
le_chomeur

est ce normal que tu détruises ton interval comme ceci :

Code:

clearInterval(interval[i]);

alors que tu l'a déclaré en fonction de l'id :

Code:

interval[obj.id]

sinon , le code est pas mal , mais je te conseillerais de passer par de la programmation orienté objet pour gérér plus facilement les instances de menu ( pour que chaque replis/ déplis soit indépendant des autres.... )
20/12/2008, 15h25
mimagyc

i est egal aux id de chaque array,

Si tu fait un alert(i); dans la boucle for, il retournera groupe1/groupe2/groupe3.

Mais pour je ne sais pas quel raison, au bout d'un certain nombre de clic, les menu ne se réduise plus :(
22/12/2008, 10h56
Mescaline

:roll: sur mon Firefox ça tourne sans problème, ça fait 5 mns que je clique sur les menus et qu'il les déroule ou les ferme correctement ...
22/12/2008, 10h59
le_chomeur

j'ai effectivement constaté le problème ...
a mon avis problème due au timer :)
exemple : click sur un menu , puis rapidement sur un des autres, tu pourras constater que l'action du précédent menu ne se termine pas...
il faut donc rendre tes action indépendant via un objet en utilisant le mot clé : new

Je comprend ce que tu veux dire, mais je ne comprend pas pourquoi il faut faire cela,
j'ai une variable "interval" pour chaque menu ,

Code:

1
2
 
var interval = new Array;

Il ne devrait pas s'arrêter d'ailleurs ..., mais je vai essayer.

Comme ceci, ca fonctionne un peu mieux, mais ce n'est pas encore ca ...

Code:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu vertical 01</title>
<script type="text/javascript">
var interval = new Array;
var tab = new Array;
var H_def = 17;
var img_li = document.getElementById('li');
var over = null;
function deploy(obj){
obj = document.getElementById(obj.parentNode.id);
ul = document.getElementsByTagName("ul")[0].id;
 
// reduit les autre groupes
for (i in tab) {
	if (i != obj.id && (document.getElementById(i).offsetHeight)>= H_def) {
		//clearInterval(interval[i]);
		tab[i] = false;
		interval[i] = setInterval(function() {grow(document.getElementById(i),ul)},1);
		document.getElementById('test').innerHTML = i;
	} 
}
	if (tab[obj.id] == true) {tab[obj.id]=false;}else{tab[obj.id]=true;}
	interval[obj.id] = setInterval(function() {grow(obj,ul)},1);
}
function grow(obj,ul){
	if (obj.offsetHeight <= document.getElementById(ul).offsetHeight&&tab[obj.id] == true) 
	{obj.style.height = (obj.offsetHeight+1)+"px";	}
	else if ((obj.offsetHeight-1) >= H_def && tab[obj.id] == false) {obj.style.height = (obj.offsetHeight-1)+"px";	}
	else {clearInterval(interval[obj.id]);}
}
 
</script>
<style type="text/css">
<!--
body,td,th {
	font-size: 12px;
	font-family: Calibri;
	cursor:default;
}
p {
margin:0px;
}
ul ,li {
margin:0px;
padding:0px;
}
li {
padding-left:15px;
}
.groupe {
overflow:hidden;
height:17px;
width:150px;
}
.titre {
font-weight:bold;
text-align:center;
cursor:pointer;
font-size:14px;
background-color:#6699CC;
}
-->
</style></head>
<div id="test">test</div>
<div id="groupe1" class="groupe">
  <p class="titre" onclick="deploy(this)">Groupe 1</p>
	<ul id="menu1">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
 
 
<div id="groupe2" class="groupe">
  <p class="titre" onclick="deploy(this)">Groupe 2</p>
	<ul id="menu2">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
 
 
<div id="groupe3" class="groupe">
  <p class="titre" onclick="deploy(this)">Groupe 3</p>
	<ul id="menu3">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
<body>
</body>
</html>

j'ai enlevé le //clearInterval(interval[i]); dans la boucle for.

Edit Heeeee bien en fait je le test depuis 2 min, il fonctionne la ... j'ai tout de même un doute :aie:.

Quelqu'un pour l'améliore au sinon?
surtout a ce niveau la

Code:

1
2
3
 
obj = document.getElementById(obj.parentNode.id);
ul = document.getElementsByTagName("ul")[0].id;

Et je le trouve particulièrement lent, pourant le setInterval est a 1!

22/12/2008, 11h53
le_chomeur

je te montre cet après midi avec ton code en version objet et commenté :)

J'ai modifier la fonction grow comme ceci

Code:

1
2
3
4
5
6
7
8
 
function grow(obj,ul){
	if (obj.offsetHeight-H_def <= document.getElementById(ul).offsetHeight&&tab[obj.id] == true) 
	{obj.style.height = (obj.offsetHeight+1)+"px";	}
	else if ((obj.offsetHeight-1) >= H_def && tab[obj.id] == false) {obj.style.height = (obj.offsetHeight-1)+"px";	}
	else {clearInterval(interval[obj.id]);}
	document.getElementById('test').innerHTML = nbr+++'<br />';
}

Le setinterval ne s'arrête pas :(

Mis a jour sur http://mimaro.free.fr/menu.html

22/12/2008, 23h34
mimagyc

J'ai beau le regarder dans tout les sens(écran a l'envers) rien ne me fait tilter ...
je comprend pas :?

Merci
23/12/2008, 09h40
le_chomeur

okip c'est partit , voila la partie algo :

- ouverture d'un menu = fermeture de celui ouvert ( ou ceux ouvert )

donc en utilisant des "objet" indépendant on va pouvoir lancer l'ouverture et la fermeture de façon indépendante...

j'attaque :)

ATTEND!!!! :mouarf:

j'ai pu faire ceci avec l'aide de SpaceFrog :

Code:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu vertical 01</title>
<script type="text/javascript">
var interval = new Array;
var tab = new Array;
var H_def = 17;
function interval_(set) {
ul = set.id.replace('groupe','menu');
interval[set.id] = setInterval(function() {grow(set,ul)},1);
}
function deploy(obj){
obj = document.getElementById(obj.parentNode.id);
// reduit les autre groupes
for (i in tab) {
	if (i != obj.id && document.getElementById(i).offsetHeight> H_def) {
		clearInterval(interval[i]);
		tab[i] = false;
		new interval_(document.getElementById(i));
	}
}
	if (tab[obj.id] == true) {tab[obj.id]=false;}else{tab[obj.id]=true;}
	new interval_(obj);
}
function grow(obj,ulc){
	if (obj.offsetHeight-H_def <= document.getElementById(ulc).offsetHeight&&tab[obj.id] == true) 
	{obj.style.height = (obj.offsetHeight+2)+"px";}
	else if (obj.offsetHeight >= H_def && tab[obj.id] == false) {obj.style.height = (obj.offsetHeight-2)+"px";}
	else {clearInterval(interval[obj.id]);
	}	
}
function test()
{
alert(tab['groupe1']+'-'+tab['groupe2']+'-'+tab['groupe3']);
}
</script>
<style type="text/css">
<!--
body,td,th {
	font-size: 12px;
	font-family: Calibri;
	cursor:default;
}
p {
margin:0px;
}
ul ,li {
margin:0px;
padding:0px;
}
li {
padding-left:15px;
}
.groupe {
overflow:hidden;
height:17px;
width:150px;
}
.titre {
font-weight:bold;
text-align:center;
cursor:pointer;
font-size:14px;
background-color:#6699CC;
}
-->
</style></head>
<div id="test" onclick="test()">test</div>
<div id="groupe1" class="groupe">
  <p class="titre" onclick="new deploy(this)">Groupe 1</p>
	<ul id="menu1">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
 
 
<div id="groupe2" class="groupe">
  <p class="titre" onclick="new deploy(this)">Groupe 2</p>
	<ul id="menu2">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
 
 
<div id="groupe3" class="groupe">
  <p class="titre" onclick="new deploy(this)">Groupe 3</p>
	<ul id="menu3">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
<body>
</body>
</html>

et il fonctionne,
mon seul souci, enfin j'ai l'impression que les setinterval ne s'arrette pas ...

EDIT:

Apres verification

Code:

1
2
3
4
5
6
7
8
 
function grow(obj,ulc){
	if (obj.offsetHeight-H_def <= document.getElementById(ulc).offsetHeight&&tab[obj.id] == true) 
	{obj.style.height = (obj.offsetHeight+2)+"px";}
	else if (obj.offsetHeight >= H_def && tab[obj.id] == false) {obj.style.height = (obj.offsetHeight-2)+"px";}
	else {clearInterval(interval[obj.id]);}	
	document.getElementById('test').innerHTML += obj.id+'&nbsp;';
}

il s'arrette bie, je le trouve lent pourtant ;...

Et il faudrait que je trouve un moyen plsu judicieux pour chopper les id des balise div et ul.

Merci encore quand meme!!!!!!!!!!!!!!!!:king:

23/12/2008, 10h20
le_chomeur

comme tu veux ... sinon je suis en train de te le faire orienté objet :)
23/12/2008, 10h31
mimagyc

Je crache pas sur une variante pour apprendre et comprendre ;)

Et puis il faudrait que je trouve une autre façon plus correct de récupérer les id des balise(je me répète ^^)
23/12/2008, 10h44
le_chomeur

récupère dabord ton contenant :)

puis tes menu par la balise : document.getElementsByTagName ;)

Comme ceci?

Code:

1
2
3
 
obj = obj.innerHTML.replace(' ',''); // supprimer les espaces
ul = document.getElementsByTagName("ul")[0].id;

ou plutot

Code:

1
2
3
 
obj = document.getElementById(obj.parentNode.id);
ul = document.getElementsByTagName("ul")[0].id;

Code:

1
2
obj = obj.innerHTML.replace(/  /g,''); // supprimer les espaces
ul = document.getElementsByTagName("ul")[0].id;

sinon tu ne remplaces que le premier

23/12/2008, 11h30
le_chomeur

tout compris :mrgreen:
23/12/2008, 13h25
mimagyc
Code:

1 2 obj = document.getElementById(obj.parentNode.id);
Ceci fonctionne parce que je vai recuperer l'id de la ballise div, mais ceci
Code:

1 2 obj = obj.innerHTML.replace(/ /g,''); // supprimer les espaces
ne fonctionne pas ... et je ne sais pas pourquoi, il me fait dans la console d'erreur FF :

Erreur*: document.getElementById(i) is null
Fichier Source*: http://127.0.0.1/menu.html
Ligne*: 18

...

edit:
Lorsque je fait ceci
Code:

1 2 3 function test(obj) {alert( obj.innerHTML.replace(/ /g,'')); } <div id="test" onclick="test(this)">Groupe 1</div>
il me retourne Groupe 1 avec l'espace :(

Bon, j'ai rechanger tout ca,
Code:

1 2 3 obj = obj.innerHTML.replace(/ /g,''); obj = document.getElementById(obj);
mainetnant j'ai le droit a

Erreur*: obj is null
Fichier Source*: http://127.0.0.1/menu.html
Ligne*: 25

C'est a dire a cette ligne
Code:

1 2 if (tab[obj.id] == true) {tab[obj.id]=false;}else{tab[obj.id]=true;}

j'ai reussi en faisant comme ceci

Code:

1
2
3
 
obj = obj.innerHTML.replace(/ /g,'').toLowerCase();
obj = document.getElementById(obj);

MERCI! ;)

EDIT:
Mais en y réfléchissant, je préfère prendre l'id du parent, des fois que l'id ne soit pas identique au contenu de la balise P.

LE CODE FINAL:

Code:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu vertical 01</title>
<script type="text/javascript">
var interval = new Array;
var tab = new Array;
var H_def = 18;
function interval_(set) {
ul = document.getElementsByTagName("ul")[0].id;
interval[set.id] = setInterval(function() {grow(set,ul)},10);
}
function deploy(obj){
// solution 1 (ID de la balise parent)
obj = document.getElementById(obj.parentNode.id);
// solution 2 (Contenu de la balise P)
//obj = obj.innerHTML.replace(/ /g,'').toLowerCase();
//obj = document.getElementById(obj);
 
// reduit les autre groupes
for (i in tab) {
	if (i != obj.id && document.getElementById(i).offsetHeight> H_def) {
		clearInterval(interval[i]);
		tab[i] = false;
		new interval_(document.getElementById(i));	}
}
	if (tab[obj.id] == true) {tab[obj.id]=false;}else{tab[obj.id]=true;}
	new interval_(obj);
}
function grow(obj,ulc){
	if (obj.offsetHeight-H_def < document.getElementById(ulc).offsetHeight&&tab[obj.id] == true) 
	{obj.style.height = (obj.offsetHeight+3)+"px";}
	else if (obj.offsetHeight > H_def && tab[obj.id] == false) {obj.style.height = (obj.offsetHeight-3)+"px";}
	else {clearInterval(interval[obj.id]);}	
}
</script>
<style type="text/css">
<!--
body,td,th {
	font-size: 12px;
	font-family: Calibri;
	cursor:default;
}
p {
margin:0px;
}
ul ,li {
margin:0px;
padding:0px;
}
li {
padding-left:15px;
}
.groupe {
overflow:hidden;
height:17px;
width:150px;
}
.titre {
font-weight:bold;
text-align:center;
cursor:pointer;
font-size:14px;
background-color:#6699CC;
}
-->
</style></head>
<div id="groupe1" class="groupe">
  <p class="titre" onclick="deploy(this)">Groupe 1</p>
	<ul id="menu1">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
 
 
<div id="groupe2" class="groupe">
  <p class="titre" onclick="deploy(this)">Groupe 2</p>
	<ul id="menu2">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
 
 
<div id="groupe3" class="groupe">
  <p class="titre" onclick="deploy(this)">Groupe 3</p>
	<ul id="menu3">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
<div id="groupe4" class="groupe">
  <p class="titre" onclick="deploy(this)">Groupe 4</p>
	<ul id="menu4">
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
        <li>Menu5</li>
        <li>Menu6</li>
        <li>Menu7</li>
        <li>Menu8</li>
	</ul>
</div>
<body>
</body>
</html>