Savoir sur quel élément l'utilisateur a cliqué
Bonjour,
Au vu du titre, on se dit surement "wow le noob, strop facile"... Pourtant je galère pas mal à trouver ne serait-ce qu'un exemple qui fasse ce dont j'ai envie.
Je vous copie-colle ci-dessous mon code actuel qui fonctionne parfaitement mais dont il me manque une fonctionnalité que j'aimerai rajouter (désolé pour le code html, quand je le copie-colle le serveur ne poste pas le message).
test.html
Code:
1
2
|
input type="button" onclick="msgbox(2, 'Alors ? oui ou non ?');" value="tester" |
msgbox.js
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
129
130
131
132
133
134
135
136
137
138
139
|
function msgbox( level, texte )
{
grayOut( true );
afficherMsgbox( level, texte);
}
function grayOut( vis )
{
var dark = document.getElementById( 'msgbox_darkScreen' );
if ( ! dark )
{
var tbody = document.getElementsByTagName( 'body' )[0];
var tnode = document.createElement( 'div' );
tnode.style.display = 'none';
tnode.id = 'msgbox_darkScreen';
tbody.appendChild( tnode );
dark = document.getElementById( 'msgbox_darkScreen' );
}
if ( vis )
{
var pageWidth = '100%';
var pageHeight = '100%';
dark.style.width = pageWidth;
dark.style.height = pageHeight;
dark.style.display = 'block';
}
else
{
dark.style.display = 'none';
}
}
function afficherMsgbox( level, texte )
{
var msgbox = document.getElementById( 'msgbox' );
if ( ! msgbox )
{
var tbody = document.getElementsByTagName( 'body' )[0];
var msgbox = document.createElement( 'div' );
msgbox.id = 'msgbox';
tbody.appendChild( msgbox );
var marginLeft = ( ( document.body.clientWidth - msgbox.offsetWidth ) / 2 ) + 'px';
msgbox.style.marginLeft = marginLeft;
}
var oui = document.createElement( 'img' );
oui.setAttribute( 'id','oui' );
oui.src = "oui.png";
oui.marginTop = "200px";
oui.align = "left";
var non = document.createElement( 'img' );
non.setAttribute( 'id','non' );
non.src = "non.png";
non.align = "right";
var fermer = document.createElement( 'img' );
fermer.setAttribute( 'id','fermer' );
fermer.src = "fermer.png";
fermer.align = "right";
var contenu = document.createElement( 'div' );
contenu.setAttribute( 'id','contenu' );
contenu.innerHTML = texte;
/*
* Redéfinition des événements
*/
var err;
fermer.onclick = function( )
{
fermerMsgbox( msgbox );
}
oui.onclick = function( )
{
fermerMsgbox( msgbox );
}
non.onclick = function( )
{
fermerMsgbox( msgbox );
}
/*
* Gestion des niveaux d'erreur
*/
switch ( level )
{
case 1:
msgbox.className = 'error';
document.body.appendChild( msgbox );
var idBoite = document.getElementById( 'msgbox' );
idBoite.appendChild( fermer );
idBoite.appendChild( contenu );
break;
case 2:
msgbox.className = 'question';
document.body.appendChild( msgbox );
var idBoite = document.getElementById( 'msgbox' );
idBoite.appendChild( contenu );
idBoite.appendChild( oui );
idBoite.appendChild( non );
break;
case 3:
msgbox.className = 'info';
document.body.appendChild( msgbox );
var idBoite = document.getElementById( 'msgbox' );
idBoite.appendChild( fermer );
idBoite.appendChild( contenu );
break;
case 4:
msgbox.className = 'success';
document.body.appendChild( msgbox );
var idBoite = document.getElementById( 'msgbox' );
idBoite.appendChild( fermer );
idBoite.appendChild( contenu );
break;
default:
alert( "[ERROR] msgbox.js : Le niveau d'erreur 'level' n'existe pas" );
fermerMsgbox( msgbox );
return 0;
break;
}
}
function fermerMsgbox( msgbox )
{
document.body.removeChild( msgbox );
grayOut( false );
} |
msgbox.css
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
|
#msgbox_darkScreen
{
-moz-opacity : 0.2;
-ms-filter : 'alpha(opacity=20)';
background-color : #000000;
filter : alpha(opacity=20);
left : 0px;
opacity : 0.2;
overflow : hidden;
position : absolute;
top : 0px;
z-index : 90;
}
#msgbox
{
background-position : 10px center;
background-repeat : no-repeat;
border : 1px solid;
display : block;
filter : alpha(opacity=100);
font-family : Arial;
font-size : 13px;
margin : 150px 0px 0px 0px;
Moz-opacity : 1;
opacity : 1;
overflow : hidden;
padding : 15px 10px 15px 50px;
position : absolute;
width : 400px;
z-index : 91;
}
#msgbox.info
{
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
#msgbox.success
{
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
#msgbox.question
{
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
#msgbox.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
} |
L'objectif de ces 3 fichiers est de griser l'écran et faire apparaitre une boite de dialogue que l'utilisateur doit valider. Aucune autre action ne peut être entreprise par l'utilisateur sur l'application (bien sûr, précédente et actualiser fonctionnent encore même si je n'aime pas ça).
Le level indique le niveau d'erreur de 1 à 4 (du plus au moins grave dirons-nous). Je me suis inspiré ici-même d'un tuto sur les css concernant les messages personnalisés.
Tout ceci fonctionne parfaitement. Mon problème se trouve sur le level 2. Je me suis dit que tant qu'à faire une jolie boite pour prévenir l'utilisateur d'un événement quelconque, je pourrai très bien lui demander d'autoriser ou non une action. Je rajoute donc une paire de bouton oui/non.
Mon problème est de savoir sur quel bouton mon utilisateur a cliqué pour effectuer l'action nécessaire si il répond oui (pour le non, on ignore et ça roule). Je sais que ça se passe en gros dans le oui.onclick = function() { blablabla }. Pourtant, je n'arrive pas à m'en sortir.
Je pense que ce bout de code est intéressant et si jamais j'arrive à le faire fonctionner je le poserai, avec les fichiers accompagnants, dans les "trucs et astuces" de developpez.com
Je suis bien sur ouvert à toute proposition permettant d'améliorer ce code (notamment les chemins vers les fichiers images qu'il faudrait rendre "paramétrables").
Merci
