手动制作jQuery对话框检查是否需要调整大小

Question

我有一个jQuery对话框，该对话框在打开后加载其内容槽Ajax。

看到这个 JSFIDDLE （内容没有加载ajax，而是在打开后添加，这足以证明我的问题）。

html：

<div id="test">test</div>

JS：

$("#test").dialog({
    minHeight:100,
    maxHeight:200,
    width:300,
    open: function(){
        $(this).html("test<br /><br />test<br />" +
                     "<br />test<br /><br />test" +
                     "<br /><br />test<br /><br />" +
                     "test<br /><br />test<br />" +
                     "<br />test<br /><br />test");
    }
});

开放时，它不会忠于它的 maxHeight 直到调整对话框的大小为止。有某种 resize 我可以在对话框中添加内容后可以调用的方法？

我宁愿不必手动弄清是否需要调整大小和高度，因为它已经内置在UI插件中。

Answer 1

JSFIDDLE 例子。

并不是我希望的优雅解决方案，但到目前为止，它似乎奏效了。

如果有人有更好的解决方案，我将很高兴听到它。

Answer 2

将HTML代码放入Webapge的实际DIV中，然后在该Div上使用对话框。或在初始化之后更改高度（和其他选项）... jQuery文档 :

//getter
var width = $( ".selector" ).dialog( "option", "height" );
//setter
$( ".selector" ).dialog( "option", "height", 460 );

Answer 3

在开放函数中设置MaxHeight似乎可以解决问题：

$("#test").dialog({
    minHeight:100,
    width:300,
    open: function(){
        $(this).html("test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test<br /><br />test");
        $(this).parent().css("height", "auto");
        $(this).css("maxHeight", 200);
    }
});

编辑：当使用“测试” div用作对话框时，它会与标头div一起嵌套在对话框中。结果，测试div及其包含的div都需要将其高度设置为包含DIV的高度，考虑到对话框标题DIV的高度。将其高度设置为自动应考虑。