UI Dialog, comment puis-je déplacer mes boutons de validation en haut à droite dans la barre de titre

**pixworld** · 20/06/2011, 11h17

bonjour,
je cherche à déplacer mes boutons de validation en haut à droite dans la barre de titre de la boite UI Dialog.

J'ai essayé ceci.

Code :

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

1
2
var button = $('#dialog-form').parent().find('.ui-dialog-buttonpane');	
	$(".ui-dialog-titlebar").append(button);

Les boutons sont bien présent à droite de mon titre dans la barre du haut, mais je n'ai aucune action lorsque je clique dessus.

Comment puis-je leur réattribuer une action ?
Ou bien faut-il mieux les déplacer en CSS pour conserver l'action au click ?

**Kouala** · 20/06/2011, 11h30

Bonjour,
Peut-on voir les déclaration des actions ?

**pixworld** · 20/06/2011, 12h12

voici le code :

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
$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 600,
			width: 600,
			modal: true,
			overlay: { backgroundColor: "#000", opacity: 0.5 },			
			buttons: {
 
				"Valider": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );
 
					bValid = bValid && checkLength( Daterealisation, "Date", 8, 50 );
					bValid = bValid && checkLength( Libelle, "Libellé", 1, 150 );
 
					if ( bValid ) {
						$(".ajax").trigger('submit');
					}
				},
				"Annuler": function() {
					$("#dialog-form").dialog('close');
					$("#Daterealisation").val(''); //reinitialise le champ du formulaire
					$("#Libelle").val('');//reinitialise le champ du formulaire	
					$("#Contenu").val('');//reinitialise le champ du formulaire
				}
			},
			close: function() {
				$("#Daterealisation").val(''); //reinitialise le champ du formulaire
				$("#Libelle").val('');//reinitialise le champ du formulaire	
				$("#Contenu").val('');//reinitialise le champ du formulaire
			}
		});

**danielhagnoul** · 20/06/2011, 23h57

Bonsoir

Le dialogue est composé de trois divisions, on peut les changer de place, mais si l'on insère une division dans une autre le résultat est ingérable.

Exemple sur http://jqueryui.com/demos/dialog/#modal-form :

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* -- */
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>
 
	<form>
		<fieldset>
			<label for="name">Name</label>
			<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
			<label for="email">Email</label>
			<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
			<label for="password">Password</label>
			<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
		</fieldset>
	</form>
</div>
 
 
<div id="users-contain" class="ui-widget">
	<h1>Existing Users:</h1>
	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
				<th>Email</th>
				<th>Password</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john.doe@example.com</td>
				<td>johndoe1</td>
			</tr>
		</tbody>
	</table>
</div>
 
<button id="create-user">Create new user</button>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-06-21T00:01:00.000+02:00" pubdate>2011-06-21</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2rc1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		$(function(){
 
var name = $( "#name" ),
	email = $( "#email" ),
	password = $( "#password" ),
	allFields = $( [] ).add( name ).add( email ).add( password ),
	tips = $( ".validateTips" );
 
function updateTips( t ) {
	tips
		.text( t )
		.addClass( "ui-state-highlight" );
	setTimeout(function() {
		tips.removeClass( "ui-state-highlight", 1500 );
	}, 500 );
}
 
function checkLength( o, n, min, max ) {
	if ( o.val().length > max || o.val().length < min ) {
		o.addClass( "ui-state-error" );
		updateTips( "Length of " + n + " must be between " +
			min + " and " + max + "." );
		return false;
	} else {
		return true;
	}
}
 
function checkRegexp( o, regexp, n ) {
	if ( !( regexp.test( o.val() ) ) ) {
		o.addClass( "ui-state-error" );
		updateTips( n );
		return false;
	} else {
		return true;
	}
}
 
$( "#dialog-form" ).dialog({
	autoOpen: false,
	height: 300,
	width: 350,
	modal: true,
	buttons: {
		"Create an account": function() {
			var bValid = true;
			allFields.removeClass( "ui-state-error" );
 
			bValid = bValid && checkLength( name, "username", 3, 16 );
			bValid = bValid && checkLength( email, "email", 6, 80 );
			bValid = bValid && checkLength( password, "password", 5, 16 );
 
			bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
			// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
			bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
			bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
 
			if ( bValid ) {
				$( "#users tbody" ).append( "<tr>" +
					"<td>" + name.val() + "</td>" + 
					"<td>" + email.val() + "</td>" + 
					"<td>" + password.val() + "</td>" +
				"</tr>" ); 
				$( this ).dialog( "close" );
			}
		},
		Cancel: function() {
			$( this ).dialog( "close" );
		}
	},
	close: function() {
		allFields.val( "" ).removeClass( "ui-state-error" );
	}
});
 
// Mettre les boutons sous la barre de titre
$("div.ui-dialog-buttonpane").insertAfter("div.ui-dialog-titlebar");
 
// Non ! Le résultat est horrible et impossible à gèrer
// $("div.ui-dialog-buttonpane").appendTo("div.ui-dialog-titlebar");
 
$( "#create-user" ).button().click(function() {
	$( "#dialog-form" ).dialog( "open" );
});
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>

**pixworld** · 21/06/2011, 12h25

bonjour,
j'ai repris votre solution et voici la ligne de code pour 1 boite de dialogue dans la page.

Code :

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

$('#dialog-form').parent().find('.ui-dialog-buttonpane').insertAfter( '.ui-dialog-titlebar' );

Par contre, comment faire lorsque j'ai 3 boites de dialogue dans la même page, si je reprends l'exemple du dessus, il me mets 3 fois les boutons sous mon titlebar.

J'ai essayé les éléments :first :last :parent.

Code :

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

1
2
3
4
5
 
//Boite form 1		
$('#dialog-form').parent().find('.ui-dialog-buttonpane').insertAfter( '.ui-dialog-titlebar:parent' );	  
//Boite form 2
$('#dialog-form-reponse').parent().find('.ui-dialog-buttonpane').insertAfter('.ui-dialog-titlebar:parent');

Merci.

**danielhagnoul** · 23/06/2011, 00h27

Bonsoir

Code :

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

1
2
3
$("div.ui-dialog-buttonpane").each(function(i, item){
	$(item).insertAfter($(item).prevAll("div.ui-dialog-titlebar"));
});

UI Dialog, comment puis-je déplacer mes boutons de validation en haut à droite dans la barre de titre

jQuery

Discussions similaires

Partager

Partager