我喜欢jQueryUI的对话框。但是,似乎没有办法动态加载内置内容。我想我必须使用其他一些方法来实现这一目标? iframe会在内容可见时加载内容吗?这是正确的方法吗?
如果它们更适合在首次打开内容时加载内容,我会对其他对话框机制开放。
答案 0 :(得分:31)
这并不难做到 - 我不会因此而开始搞乱iframe。这样的事情怎么样?
$( ".selector" ).dialog({
open: function(event, ui) {
$('#divInDialog').load('test.html', function() {
alert('Load was performed.');
});
}
});
基本上,您创建对话框,当它打开时,会从您的服务器加载一个html文件,替换<div id="divInDialog"></div>
的内容,这些内容应位于对话框<div class="selector"/>
内。
答案 1 :(得分:14)
您可以在页面上创建一个空div
<div id="dialog-confirm"><div>
使用 autoopen = false 设置 jquery ui对话框;
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
height:140,
modal: true,
buttons: {
'Delete all items': function() {
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
然后当你想加载动态页面时,使用jquery ajax调用动态地将html放入div中,然后在该div上调用对话框打开。下面是一个示例,在点击按钮上加载动态页面。
$("#someButton").click(function()
{
$.post("Controller/GetPage", function(data){
$('#dialog-confirm').html(data);
$('#dialog-confirm').dialog('open');
}, "html")};
}
另外,如果你的页面需要一段时间来加载ajax调用,你可能想要使用一些加载图像或jquery blockui plugin来显示正在加载的东西
答案 2 :(得分:1)
我个人会创建一个&#34;视图&#34;对于您的对话框,然后扩展到正在生成的对话框。对于测试用例,我使用了以下&#34; view&#34;:
var dialog = {
title: 'Dialog WITHOUT Modal',
modal: false,
height: 300
};
然后延伸到一个对话框:
$('#modal-btn-btns').click(function(){
$('#dialog-modal-btns')
.dialog($.extend(dialog, {
modal: true,
width: 500,
title: "Dialog with modal AND buttons",
buttons: {
"Trigger ALERT": function(){alert("NICE CLICK!@!@!")},
"Cancel": function(){$(this).dialog('close');}
}
}))
.html('This form has buttons!');
});