您的位置:首页 > 产品设计 > UI/UE

UI Dialog 中使用 AJAX 装载内容

2011-01-26 16:19 134 查看
如何在显示 jQuery UI Dialog 中,以 ajax 方式调入 dialog 中显示的内容呢?

一种格式是:

Js代码
1.$( "#myDialog" ).load( openUrl, postData ,
2. function (responseText, textStatus, XMLHttpRequest) {
3. $("#myDialog" ).dialog( 'open' ); // 打开对话框
4. }
5.);
$("#myDialog").load( openUrl, postData ,
function (responseText, textStatus, XMLHttpRequest) {
$("#myDialog").dialog('open'); // 打开对话框
}
);

另一种 ajax 调用格式则是:

Js代码
1.$.ajax({ type: "POST" , url: openUrl , data: jsonPostData,
2. success: function (html,textStatus, XMLHttpRequest){
3. $("#myDialog" ).html(html).dialog( 'open' );
4. }
5.});
$.ajax({ type: "POST", url: openUrl , data: jsonPostData,
success: function(html,textStatus, XMLHttpRequest){
$("#myDialog").html(html).dialog('open');
}
});

其实,这只是jQuery 的 ajax 调用的两种方式,与 dialog 无关。

至于 dialog 的初始化工作,则需要在之前进行,比如:

Js代码
1.jqDialog.dialog({
2. bgiframe: true ,
3. autoOpen: false ,
4. resizable: false ,
5. width:650, Height:500,
6. modal: true ,
7. overlay: { backgroundColor: '#000' , opacity: 0.5 },
8. close: function () { ... },
9. open: function () { ... },
10. buttons: {
11. '选定当前记录' : function () {... },
12. '取消' : function () {
13. $(this ).dialog( 'close' );
14. }
15. }
16.});
jqDialog.dialog({
bgiframe: true,
autoOpen: false,
resizable: false,
width:650, Height:500,
modal: true,
overlay: { backgroundColor: '#000', opacity: 0.5 },
close: function() { ... },
open: function() { ... },
buttons: {
'选定当前记录': function() {... },
'取消': function() {
$(this).dialog('close');
}
}
});

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/ydmdzq_helloworld/archive/2010/10/13/5938343.aspx
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: