[POO] [MENU] UL LI

**mimagyc** · 20/12/2008, 01h17

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 :

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
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.

**le_chomeur** · 20/12/2008, 13h06

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

Code :

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

clearInterval(interval[i]);

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

Code :

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

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.... )

**mimagyc** · 20/12/2008, 15h25

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

**Mescaline** · 22/12/2008, 10h56

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 ...

**le_chomeur** · 22/12/2008, 10h59

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

**mimagyc** · 22/12/2008, 11h26

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 :

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

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 :

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
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

.

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

Code :

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

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!

[POO] [MENU] UL LI

JavaScript

Vue hybride

Discussions similaires

Partager

Partager