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。我认为对话框本身正在对其设置大小限制。如何将其设置为加载内容的自然宽度？

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

Answer 1

我以前也遇到过同样的问题。如果我记得的话，您需要首先加载对话框，然后加载其中的内容。这样，对话框将自动调整其内容大小(宽度=自动)。

更像这样(经过测试):

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);