Discussion :

[jbrasselet]

Bonjour,

je viens de fabriquer grâce à diverses sources un menu contextuel qui s'affiche sur un clic droit seulement si je suis dans un input.

Lorsque je sélectionne une valeur de mon menu, mon input se remplit avec la valeur et mon menu disparaît.
Ca c'est fait.

Mon souci est désormais de faire disparaitre le menu si je cliques autre part sur la page.
Mais là je ne vois pas trop comment faire

Un petit peu de code pour vous donner une idée de la solution implémentée :

Coté js:

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
 
var menuskin = "skin0"; // skin0, or skin1
var idchoisi = "" ;
var option = "" ;
 
function showmenuie5(id) {
	var rightedge = document.body.clientWidth-event.clientX;
	var bottomedge = document.body.clientHeight-event.clientY;
	if (rightedge < ie5menu.offsetWidth)
	ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
	else
	ie5menu.style.left = document.body.scrollLeft + event.clientX;
	if (bottomedge < ie5menu.offsetHeight)
	ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
	else
	ie5menu.style.top = document.body.scrollTop + event.clientY;
	ie5menu.style.visibility = "visible";
	idchoisi = id;
	return false;
}
function hidemenuie5() {
	ie5menu.style.visibility = "hidden";
}
 
function highlightie5() {
	if (event.srcElement.className == "menuitems") {
		event.srcElement.style.backgroundColor = "highlight";
		event.srcElement.style.color = "white";
}
 
function lowlightie5() {
	if (event.srcElement.className == "menuitems") {
		event.srcElement.style.backgroundColor = "";
		event.srcElement.style.color = "black";
		window.status = "";
   }
}
 
function remplir(id) {
	document.getElementById(idchoisi).value = id;
	hidemenuie5();
	document.getElementById(idchoisi).focus();
	idchoisi = "";
}

le menu en lui même (dans le body)

Code :

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

1
2
3
4
<div id="ie5menu" class="skin0" onblur="alert('test')">
	<div class="menuitems" id="REU" onclick="remplir(this.id)" onMouseover="highlightie5()" onMouseout="lowlightie5()">REU</div>
	<div class="menuitems" id="Form" onclick="remplir(this.id)" onMouseover="highlightie5()" onMouseout="lowlightie5()">Form</div>
</div>

l'appel du menu dans un input :

Code :

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

<INPUT class="InputPlanning" id="plng1.11" name="periode11"  type="text" size="1" oncontextmenu="showmenuie5(this.id); return false;">

Auriez-vous une idée ou une piste afin que le menu se referme si je ne suis plus dessus ou si je cliques autre part?

[namstou3]

j'ai pas vraiment compris le fonctionnement dans ton menu contextuel..

Mais peut être que ça pourrai t'aider: http://users.skynet.be/micdub/script03.htm#onmouseover

Bon courage

[jbrasselet]

Explications :
la fonction showmenuie5 affiche le menu en le mettant là où on a cliqué
la fonction hidemenuie5 cache le menu
la fonction highlightie5 met en surbrillance l'option du menu sur laquelle on est
la fonction lowlightie5 enlève la surbrillance
la fonction remplir ajoute la valeur de l'option sélectionnée dans mon input


En fait, pour cacher le menu si je cliques autre part j'ai mis sur le onclick du body l'appel à la fonction hidemenuie5.

Je ne sais pas si cela peut interesser que je fasse un source correct sur le sujet pour la FAQ

[namstou3]

pourquoi ne pa mettre le tous dans un div et tester le onmouseover et le onmouseout come ça tu ne sera pa obligé de cliquer ailleurs pour masquer le menu.

[jbrasselet]

Les options de mon menu sont déjà dans un div (celui d'id ie5menu)

Mais le onmouseout ne cache pas mon menu. C'est ce que j'avais tenté la première fois.
C'est pour cela que je suis venu poster ici