代码之家 › 专栏 › 技术社区 › red-X

手动使jquery对话框检查是否需要调整大小

autoresize jquery-ui jquery

red-X · 技术社区 · 15 年前

我有一个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插件中了。

3 回复 | 直到 15 年前

NimChimpsky 15 年前

将HTML代码放在webapge上的实际DIV中,然后在该DIV上使用dialog。或者在初始化后更改高度(和其他选项)。从 jquery docs :

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

red-X 15 年前

JSFiddle 例子。

不是我所希望的那种优雅的解决方案,但到目前为止它似乎有效。

如果有人有更好的解决办法,我会很高兴听到的。

Andy Rose 15 年前

在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一起设置。将其设置为高度到自动应该注意这一点。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前