手动创建 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");
    }
});

当它打开时，它不会保持其最大高度，直到您调整对话框的大小。将内容添加到对话框后，是否可以调用某种resize方法？

我不想手动确定是否需要调整大小以及调整多高，因为它几乎已经内置在 ui 插件中。

Answer 1

将 html 代码放在 webapge 上的实际 div 中，然后在该 div 上使用对话框。
或者在初始化后更改高度（和其他选项）...来自 jquery docs ：

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

Answer 2

JSFiddle 示例。

这并不完全是我所希望的优雅解决方案，但到目前为止它似乎有效。

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

Answer 3

在 open 函数中设置 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 设置高度，同时考虑到对话框标题 div 的高度。将其高度设置为自动应该可以解决这个问题。