大佬教程收集整理的这篇文章主要介绍了jQuery UI Modal Dialog仅以SECOND加载为中心(来自外部文件的内容)？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
看起来它总是落后一步：第一次加载它无法分辨正在加载的文件的宽度/高度,然后在同一文件的后续加载中,它完美定位.
我使用以下代码作为数据表的模态编辑：
$(".editMe").button({
icons: {
priMary: 'ui-icon-document'
},text: false
}).click(function () {
var eventLink = $(this).attr("name");
var dialogopts = {
title: "Make Modifications or delete This Event",modal: true,autoOpen: false,height: "auto",width: "auto",open: function () {
//The height of the file below can vary,and in the
//JS Bin environment the dialog loads just fine blank
$("#modify").load("themes_edit.asp?id=" + eventLink);
},close: function () {
oTable.fnDraw();
}
};
$("#modify").dialog(dialogopts).dialog("open");
return false;
});
这里有一些示例HTML(尽管加载到#modify中的文件不是实时的).我也把它设置在JS Bin.
<html> <head> <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> </head> <body> <button class="editMe" name="2810">edit</button> <button class="editMe" name="2811">edit</button> <button class="editMe" name="2812">edit</button> <button class="editMe" name="2813">edit</button> <div id="modify"></div> </body> </html>
解决此问题的一种方法是打开对话框,但首先清除现有内容并在等待ajax调用响应数据时显示加载gif,然后将数据加载到对话框中.
N.b如果您在对话框调整大小时担心屏幕抖动,那么您可以将ajax响应放入屏幕上定位的div然后获取尺寸,然后在淡入新内容时很好地调整对话框的大小.
var dialogopts = { title: "Make Modifications or delete This Event",close: function () { oTable.fnDraw(); } }; var $editDialog = $('#modify').dialog(dialogopts); $(".editMe").button({ icons: { priMary: 'ui-icon-document' },text: false }).click(function () { var eventLink = $(this).attr("name"); //clear exisTing dialog content and show an ajax loader $editDialog.html('<div class="loading" />'); //show the dialog $editDialog.dialog("open"); //get dynamic content and load it into the dialog and resize $.get("themes_edit.asp?id=" + eventLink,function(responsE){ //fade out ajax loader $editDialog.find('div.loading').fadeOut(500,function(){ $editDialog.html( response ) .dialog('option','position','center'); }); }); return false; });
以上是大佬教程为你收集整理的jQuery UI Modal Dialog仅以SECOND加载为中心(来自外部文件的内容)？全部内容，希望文章能够帮你解决jQuery UI Modal Dialog仅以SECOND加载为中心(来自外部文件的内容)？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。