Script menu contextuel firefox

Version imprimable

10/01/2006, 21h27
nek_kro_kvlt

Script menu contextuel firefox

Bonjour, je cherche un script(javascript) de menu contextuel compatible M$ et firefox, ou, au cas échéant, comment en faire un(quelles balises utiliser, quelles balises ne pas utiliser...).
Est-il possible en javascript d'utiliser et de modifier des attributs visibility, left, top sur des div sous firefox?

Merci d'avance!
11/01/2006, 08h43
SpaceFrog

un bon vieux div en display:none et position:absolute avec un z-index bien choisi...
suffit ensuite de modifier par javascript son display et son left et right ...

pour la conception du menu escamotable sur clic droit, le principe est là:
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 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>...</title> </head> <body> <div id="menu" style="display:none">ceci est un menu</div> <script type="text/javascript"> function on(e){ m=document.getElementById("menu").style; if(e){ if(e.which>1){ m.display="block"; return false; } else{ m.display="none"; }; } else { if(m.display=="block" && event.type=="click"){ m.display="none"; } else if(event.type!="click"){ m.display="block" }; return false } } document.onclick=on; document.oncontextmenu=on; </script> </body> </html>
toutes les propriétés de style de n'importe quel élément html sont accessibles par javascript sur les principaux navigateurs;

après, pour ce qui est de définir l'emplacement du menu à chaque appel, j'ai pas envie de te détailler le truc :)

vite fait alors JT ...

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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
<style type='text/css'>
li {cursor:pointer;}
</style>
</head>
 
<body>
 
<div id="menu" style="display:none; position:absolute; border:outset 2px whitesmoke; background-color:whitesmoke;padding: 5px;font-family:verdana;font-size:11px;">
	<li>choix 1</li/>
	<li>choix 1</li/>
	<li>choix 2</li/>
	<li>choix 3</li/>
</div>
 
<script type="text/javascript">
 
function on(e){
m=document.getElementById("menu").style;
 
var mouseY =(document.all)? window.event.x:e.screenX; 
var mouseX =(document.all)? window.event.y:e.screenY-200; 
 
if(e){
   if(e.which>1){
      m.display="block";
      m.top=mouseX+"px";
      m.left=mouseY+"px"
      return false;
   }
   else{
      m.display="none";
   };
}
else {
   if(m.display=="block" && event.type=="click"){
      m.display="none";
   }
   else if(event.type!="click"){      
      m.display="block"
      m.top=mouseX+"px";
      m.left=mouseY+"px"
 
   };
   return false
}
 
}
 
document.onclick=on;
document.oncontextmenu=on;
 
</script>
 
</body>
</html>

11/01/2006, 12h58
nek_kro_kvlt

Merci a tous ! Je vais voir tout ça :)