boutons personnalisés boite de dialogue JS

mac&cheese · 25/03/2011, 19h52

Bonsoir à tous,

Allez je me lance comme je ne trouve pas ce que je veux sur notre ami Google... Voilà dans mon projet actuel, j'ai besoin d'un boite de dialogue de type confirm mais avec 3 boutons (Annuler, Ajouter à A, Ajouter à B) et traiter l'évènement en fonction du bouton cliqué.
Alors comme je vois du tout et du n'importe quoi sur internet et surtout beaucoup de résultats concernent la personnalisation esthétique et bien compliqué d'une boite de dialogue, je voulais savoir si l'un de vous aurait une solution simple et efficace?

Je vous remercie par avance et vous souhaite un très bon weekend,

M&C

ABCIWEB · 26/03/2011, 20h44

Avec le if confirm de javascript tu n'auras que deux possibilités.

Donc je ferais un bloc caché qui contiendrais mes trois propositions associées aux trois fonctions javascript. Tu affiche ton bloc suivant la condition voulue et Onclick sur une réponse tu effectue le code puis tu cache ton block.

javatwister · 27/03/2011, 10h34

voici un ptit exemple un peu lourd mais bon:

http://javatwist.imingo.net/confirmez.htm

en admettant que tu veuilles soumettre un formulaire (c'est mon exemple),

- tu fais apparaître la fenêtre avec 3 boutons qui correspondent chacun à une "action" (une adresse quoi...); l'adresse est définie dans l'id des boutons;
- si tu ne choisis rien, la fenêtre reste ouverte mais tu peux la mettre où tu veux (elle se déplace) et choisir plus tard;
- si la fenêtre t'emmerde parce qu'elle est pas belle, tu la fermes en cliquant sur la croix et elle disparaît sans que le form soit soumis;

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
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<title>...</title>
 
<style type="text/css">
 
ul {	
	display:none;
	list-style-type:none;
	padding:25px;
	position:absolute;height:100px;
	border:double 10px black;
	background-color:grey;
	z-index:2;
	cursor:move;
}
 
li {	display:inline;
	background-color:silver;
	border:outset 2px;
	cursor:default;
	z-index:2;
	font-weight:bold;
	padding:5px;
}
 
#off {	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:25px;
	color:white;
	cursor:default;
	border:2px black solid;
	background-color:red;
	width:25px;
	text-align:center;
	font-size:20px;
}
 
 
</style>
 
</head>
<body>
 
 
<form id="formu" action="">
<div>
	<p><label for="un">champ 1</label> <input type="text" name="un" id="un" /></p>
	<p><label for="deux">champ 2</label> <input type="text" name="deux" id="deux" /></p>
</div>
 
<p><input type="button" id="go" value="en faire ce que tu veux" /></p>
 
</form>
 
<ul id="table" style="top:250px;left:100px">
	<li id="modifier">Modifier</li>
	<li id="supprimer">Supprimer</li>
	<li id="envoyer">Envoyer</li>
	<li id="off" title="fermez-moi"> X </li>
</ul>
 
<script type="text/javascript"> 
 
function b(q){return document.getElementById(q)}
 
 
b("go").onclick=function(){
	b("table").style.display="block";
}
 
for(i in b("table").getElementsByTagName("li")){
	b("table").getElementsByTagName("li")[i].onclick=function(){
		if(this.id!="off"){
			b("formu").action=this.id+".php";
			b("formu").submit();
		}
		else{
			b("table").style.display="none";
		}
	}
}
 
 
var capt;
 
b("table").onmousedown=function(e){
	capt=this;	
	ev=e||event;
	evx=ev.clientX;
	evy=ev.clientY;
	posx=evx-parseInt(this.style.left)+document.documentElement.scrollLeft;
	posy=evy-parseInt(this.style.top)+document.documentElement.scrollTop;
}
 
b("table").onmouseup=function(){capt=false}
 
document.onmousemove=function(e){
	if(capt){
		ev=e||event;
		evx=ev.clientX;
		evy=ev.clientY;
		capt.style.left=evx-posx+document.documentElement.scrollLeft+"px";
		capt.style.top=evy-posy+document.documentElement.scrollTop+"px";
	}
}
 
 
function no(e){
el= e ? e.target : event.srcElement;
if(el.type!="text"){return false}
}
 
document.onmousedown=no;
document.onmouseup=no;
if(typeof document.onselectstart!="undefined"){document.onselectstart=no}
 
</script>
 
</body>
</html>

25/03/2011, 19h52	#1
mac&cheese Membre du Club Étudiant Inscription : mars 2008 Messages : 95 Détails du profil Informations personnelles : Âge : 23 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mars 2008 Messages : 95 Points : 64 Points : 64	boutons personnalisés boite de dialogue JS Bonsoir à tous, Allez je me lance comme je ne trouve pas ce que je veux sur notre ami Google... Voilà dans mon projet actuel, j'ai besoin d'un boite de dialogue de type confirm mais avec 3 boutons (Annuler, Ajouter à A, Ajouter à B) et traiter l'évènement en fonction du bouton cliqué. Alors comme je vois du tout et du n'importe quoi sur internet et surtout beaucoup de résultats concernent la personnalisation esthétique et bien compliqué d'une boite de dialogue, je voulais savoir si l'un de vous aurait une solution simple et efficace? Je vous remercie par avance et vous souhaite un très bon weekend, M&C __________________ World's greatest inventors: Franklin, Edison and this REESE guy.
	00

26/03/2011, 20h44	#2
ABCIWEB Membre Expert Inscription : septembre 2010 Messages : 1 242 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 1 242 Points : 1 564 Points : 1 564	Avec le if confirm de javascript tu n'auras que deux possibilités. Donc je ferais un bloc caché qui contiendrais mes trois propositions associées aux trois fonctions javascript. Tu affiche ton bloc suivant la condition voulue et Onclick sur une réponse tu effectue le code puis tu cache ton block. __________________ - Réalisations - Interface graphique : génération en javascript d'objets défilants, texte et/ou images, mode horizontal ou vertical.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email