jQueryUI - AJAX加载后调整对话框大小

Question

我正在尝试编写一个快速插件，它将把一些AJAX内容加载到jQuery UI对话框中，并相应地调整对话框的大小和居中位置。以下是它的主要功能：

$(mySelector).html('Loading...').load(options.url, function() {

    element = $(mySelector);

    element.dialog('option', 'height', element.height() + 50);
    element.dialog('option', 'width', element.width());
    element.dialog('option', 'position', 'center');

});

高度看起来还不错（加上一些填充对话框），但是无论如何宽度始终为274。我认为对话框本身设置了其大小限制。如何将其设置为加载内容的自然宽度？

编辑/添加：它返回模态框的默认大小。因为即使它包含更宽的内容（比如500像素的图像），父容器（mySelector）可能没有那么宽（至少在FF中），所以它始终是默认值（300-填充=274）。有没有办法自动检测返回内容的最小宽度，而不需要滚动？

- Ryan

Answer 1

我曾经也遇到过同样的问题。如果我没记错的话，你需要先加载对话框，然后再加载其中的内容。这样，对话框就会自动调整大小以适应其内容（宽度为auto）。

大致上是这样的（已经测试过）：

var $dialog; //Must be at the global scope
function dialog(url) {
    $dialog.dialog("option", "width", "auto");
    $dialog.dialog("option", "height", "auto");
    $.get(url,{},function(html) {
        $dialog.html(html);
        $dialog.dialog("open");
    });
}

$(function() {
    //Initialize (without showing it)
    var $dialog = $('<div id="dialog" title=""></div>').dialog({
        autoOpen: false,
        modal: true
    });
});

然后你可以这样做：

dialog(someURL);

- lepe

---

你的意思是先加载内容再初始化对话框吗？因为我目前是先创建对话框，然后再加载内容。如果有一个自动调整大小的方法就太好了，但我找不到类似的东西。 - Ryan

我更新并测试了代码。只需包含JQuery-ui和dialog文件即可。它可以正常工作 :) 这样做的一个优点是，您可以更改URL（即使对话框已打开），它也会自动调整大小。不需要再添加代码了。 - lepe

谢谢，这让我走上了正确的轨道...关键是在您完成 $.get 之后，在回调函数中再次调用 open（在我的情况下）。我的解决方案实际上会有一些其他要求不同于您的...完成后我会在这里发布它。再次感谢！ - Ryan

Answer 2

关键是在内容加载完成后再次调用open函数，然后重新居中。这将导致对话框进行魔法般的调整，正确地重新调整大小和居中。一旦我整理好了插件，我会在这里发布。

- Ryan

Answer 3

有点晚了，但这是我的工作解决方案：

$("#dialog" ).dialog({
        autoOpen: false,
        modal: true,
        width: 'auto',
        height: 'auto',

        create: function(){
                var content = '<h1>This is some Content</h1>';
                $('.content', this).replaceWith(content);

        buttons: {
            Ok: function(){
                    $(this).dialog("close");
            }
        }
    });

技巧是在“create”处理程序中插入对话框内容。

- Andreas