Html Jquery-UI 对话框 - 没有 DIV 的动态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5355178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery-UI Dialog - on the fly without DIV
提问by JTC
I have what I suspect to be a simple question and after search I suspect the answer to my question to be no, but to double check...
我怀疑是一个简单的问题，经过搜索，我怀疑我的问题的答案是否定的，但要仔细检查...
Is it possible to use the Jquery ui dialog with out setting up a DIV?
是否可以在不设置 DIV 的情况下使用 Jquery ui 对话框？
ie rather than..
即而不是..
$(function() { $( "#dialog" ).dialog();});...
$(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>
<div id="dialog" title="Do I really need this?">This is a lot of typing just to pass on a simple message</div>
Is it possible just to have something like...
是否有可能只是拥有类似...
$(function(quickly) { $( "#dialog" ).dialog('this would be much easier');});...
$(function(quickly) { $( "#dialog" ).dialog('this would be much easier');});...
and call it with a quickly() type thing when needed.
并在需要时使用 quick() 类型的东西调用它。
You may note that I muddle may way through Javascript and do my best through trial and error to hit on a solution that works for me.
您可能会注意到，我可能会混淆 Javascript，并通过反复试验尽我所能找到适合我的解决方案。
I suppose, I'm asking if I can somehow use dialog in a similar fashion to...
我想，我在问我是否可以以类似的方式使用对话框......
alert("this is simple")
alert("this is simple")
...so I can call an alert to the user whenever I need to, rather than on url click or button press.
...所以我可以在需要时向用户发出警报，而不是在点击 url 或按下按钮时。
Hopefully the above make sense and I'll suspect I'll have to stick with the ugly standard alert but do let me know if there is a simple solution.
希望上述内容有意义，我怀疑我将不得不坚持使用丑陋的标准警报，但如果有一个简单的解决方案，请告诉我。
Thanks
谢谢
回答by Milox
I hope this helps somebody, you can pass html to dialog directly, like this:
我希望这对某人有所帮助，您可以直接将 html 传递给对话框，如下所示：
$("<p>Hello World!</p>").dialog();
so this way you don't have to have a pre-builded div, you could use:
所以这样你就不必有一个预先构建的 div，你可以使用：
$("<div>My div content</div>").dialog();
EDIT: changed end tag to </div>instead of </p>
编辑：将结束标记更改</div>为</p>
回答by Ffabreti
I'm using rails and didnt like to have 2 places where to write code highly dependent. So I've modified jquery-ui dialog example like code below. See executaDialogModal()
我正在使用 rails 并且不喜欢有 2 个地方可以编写高度依赖的代码。所以我修改了 jquery-ui 对话框示例，如下面的代码。参见 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>
Existing Users:
现有用户：
姓名 电子邮件 密码 John Doe [email protected] johndoe1Create new user
创建新用户
回答by zod
What about prompt
提示呢
But you think that adding a div is writing a lot
但是你觉得加个div是写了很多
you will not like these
你不会喜欢这些
http://trentrichardson.com/Impromptu/index.php
http://trentrichardson.com/Impromptu/index.php
http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
回答by Matt Robinson
This works for me. Note to avoid the body being filled with divs, I ensure the div used is removed after close:
这对我有用。请注意，为避免主体被 div 填充，我确保在关闭后删除使用的 div：
$('<div>').prop('id', '_currentDialog').text("Please enter a Comment").dialog(
{
???? title: "Input Error",
????????close: function () {
???????? $('#_currentDialog').remove();
??????? }
??? }
);
回答by Robert Levy
You can create a helper method which abstracted away the creation and configuration of the div and then called .dialog(). That would at least remove the need to duplicate code and/or create multiple divs.
您可以创建一个辅助方法，该方法将 div 的创建和配置抽象出来，然后调用 .dialog()。这至少会消除重复代码和/或创建多个 div 的需要。
