J'ai ce que je soupçonne d'être une question simple et après recherche, je soupçonne que la réponse à ma question est non, mais que je vérifie ...
Est-il possible d'utiliser le dialogue Jquery ui sans configurer une DIV?
c'est-à-dire plutôt que ..
$(function() { $( "#dialog" ).dialog();});...
<div id="dialog" title="Do I really need this?">This is a lot of typing just to pass on a simple message</div>
Est-il possible d'avoir quelque chose comme ...
$(function(quickly) { $( "#dialog" ).dialog('this would be much easier');});...
et appelez-le avec une chose de type quick () quand vous en avez besoin.
Vous remarquerez peut-être que je me débrouille peut-être dans Javascript et que je fais de mon mieux par essais et erreurs pour trouver une solution qui fonctionne pour moi.
Je suppose que je demande si je peux en quelque sorte utiliser le dialogue de manière similaire à ...
alert("this is simple")
... afin que je puisse appeler une alerte pour l'utilisateur chaque fois que j'en ai besoin, plutôt que sur l'URL, cliquez sur le bouton ou appuyez dessus.
Espérons que ce qui précède a un sens et je soupçonne que je devrai m'en tenir à l'alerte standard laide, mais laissez-moi savoir s'il existe une solution simple.
Merci
J'espère que cela aide quelqu'un, vous pouvez passer du langage HTML au dialogue directement, comme ceci:
$("<p>Hello World!</p>").dialog();
de cette façon, vous n'avez pas besoin d'avoir une div pré-construite, vous pouvez utiliser:
$("<div>My div content</div>").dialog();
EDIT: modification de la balise de fin en </div>
au lieu de </p>
J'utilise Rails et je n'ai pas aimé avoir 2 endroits où écrire du code très dépendant . J'ai donc modifié l'exemple de dialogue jquery-ui comme le code ci-dessous. Voir executaDialogModal ()
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css" />
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
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>
<script>
$(function() {
//------------------------------------------------------------------------
// variaveis globais
var name = email = password = allFields = tips = null;
var bValid = true;
//------------------------------------------------------------------------
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;
}
}
//------------------------------------------------------------------------
function executaDialogModal( ) {
//----TODO: verificar antes a existência de #dialog-form e destrui-lo
//----cria Form
$('body').append("\
<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>\
");
//----seta vars globais
name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
//----cria dialog
$( "#dialog-form" ).dialog({
autoOpen: true,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": function() {
allFields.removeClass( "ui-state-error" );
bValid = true;
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. [email protected]" );
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() {
removeFormModal();
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
}
//------------------------------------------------------------------------
function removeFormModal( ) {
$( "#dialog-form" ).remove();
}
//------------------------------------------------------------------------
$( "#create-user" )
.button()
.click(function() {
executaDialogModal();
});
});
</script>
Créer un nouvel utilisateur
Cela fonctionne pour moi. Remarque pour éviter que le corps ne soit rempli de divs, je m'assure que la div utilisée est supprimée après la fermeture
$('<div>').prop('id', '_currentDialog').text("Please enter a Comment").dialog(
{
title: "Input Error",
close: function () {
$('#_currentDialog').remove();
}
}
);
Qu'en est-il de Prompt
Mais vous pensez que l'ajout d'une div, c'est beaucoup d'écriture
vous n'aimerez pas ces
http://trentrichardson.com/Impromptu/index.php
http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
Vous pouvez créer une méthode d'assistance qui extrait la création et la configuration de la div puis appelée .dialog (). Cela supprimerait au moins la nécessité de dupliquer le code et/ou de créer plusieurs divs.