organiser son code en modules
Bonjour,
J'essaie de me mettre activement au javascript, et j'ai découvert un article "organiser osn code en modules"
J'essaie alors de créer un menu déroulant en séparant HTML et js.
Malheureusement mon code ne fonctionne pas. Auriez-vous une piste ? Merci
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
| <!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=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
var SITE = function(){
return {
addLoadEvent : function(e){
if(window.addEventListener)
window.addEventListener('load', e, false);
else if(window.attachEvent)
window.attachEvent('onload',e);
},
menu : function(){
return {
init : function(){
var menu = document.getElementById('menu');
var dls = menu.getElementsByTagName('dl');
for(i=0;i<dls.length;i++){
cacheSousMenu(dls[i].getElementsByTagName('dd')[0]);
}
this.setMouseOver();
},
setMouseOver : function(){
}
};
function cacheSousMenu(el){
el.style.display = 'none';
}
}()
}
}();
SITE.addLoadEvent(function(){
SITE.menu.init();
});
</script>
</head>
<body>
<div id="menu">
<dl>
<dt><a href="#">item 1</a></dt>
<dd>
<ul>
<li><a href="#">sous item 1</a></li>
<li><a href="#">sous item 2</a></li>
<li><a href="#">sous item 3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">item 2</a></dt>
<dd>
<ul>
<li><a href="#">sous item 1</a></li>
<li><a href="#">sous item 2</a></li>
<li><a href="#">sous item 3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">item 3</a></dt>
<dd>
<ul>
<li><a href="#">sous item 1</a></li>
<li><a href="#">sous item 2</a></li>
<li><a href="#">sous item 3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#">item 4</a></dt>
<dd>
<ul>
<li><a href="#">sous item 1</a></li>
<li><a href="#">sous item 2</a></li>
<li><a href="#">sous item 3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html> |
nb: après correction, la fonction init fonctionne bien. Mais j'aimerai afficher un sous menu au passage de la souris sur un dt. Comment faire ?
