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

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

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

Answer 2

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

编辑：当'test'div用作对话框时，它会出现在对话框div中，并与标题div一起嵌套。因此，测试div及其包含div必须使用包含div的高度设置，并考虑对话框标题div的高度。将其高度设置为auto应该注意这一点。

Answer 3

JSFiddle示例。

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

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

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

3 个答案: