代码之家 › 专栏 › 技术社区 › Twinone

jQuery调整其父项大小后不工作的宽度(百分比)

autoresize jquery-ui-dialog width jquery-ui css

Twinone · 技术社区 · 12 年前

我有一个div,我想它的父对话框的宽度是100%。

#content {
    width: 100%;
    color:white;
    background: red;
}

如果我手动调整对话框的大小,它应该是这个属性,但是在手动调整大小之后,如果我使用 animate() 在对话框上,它将保留原来调整大小的宽度。

高度也是如此。

HERE 是一个很好的jsFiddle,可以更好地解释问题。

如何使div保持其比例?

jQuery如何更新宽度和高度(当我手动调整大小时)以保持比例?

编辑:

不管怎样,我都希望灰色的背景能填满整个对话框。以下是我更新的jsfiddle演示: http://jsfiddle.net/Esh5h/1/

编辑2:

我发现了一种实用但非常丑陋的方法来实现它: JSFIDDLE

诀窍是调整对话框及其 .children(".ui-dialog-content")

编辑3:

我不能复制jQuery用来调整大小的完全相同的函数吗?

4 回复 | 直到 12 年前

Nope landerton 12 年前

我又看了一遍,检查了一下元素,现在我清楚地知道发生了什么。

一旦手动重新调整对话框的大小,jQuery就会注入 style 具有固定值的属性,类似于此:

<div id="dialog" style="width: 376px; min-height: 99px; height: 282px;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
</div>

然后,当你设置它的动画时,样式会干扰你想要的结果。

正在删除 风格 设置动画之前的属性似乎正在工作,类似于以下内容:

$("#content").click(function () {
    $("#dialog").attr("style", "").dialog("widget").animate({
        width: $(document).width() -100,
        height: $(document).height() -100,
        left: 0,
        top: 0
    }, 150);
});

DEMO -正在移动 left 和 top 到底部

编辑

那个 风格 属性会不断给你带来问题。删除后,当再次手动重新调整大小时,它会再次注入它们,扰乱您的预期结果。

我发现解决这个问题的唯一方法是在调整大小时不断重新调整它们:

$("#dialog").on("dialogresize", function(){
    $(this).attr("style", "");
});

编辑

不管怎样,我都希望灰色背景能填满整个对话框什么

这似乎是CSS选择器的问题。

更改此项:

.ui-dialog .ui-dialog-content {
    background : #cacaca;
}

对此:

.ui-dialog {
    background : #cacaca;
}

此外,您仍然存在这样的问题,即注入的样式属性会打乱您想要的样式,并且使用上面提到的在重新调整大小时删除样式属性的代码以及在设置动画时修复了这一问题。

DEMO -始终删除灰色背景填充对话框和注入的样式属性

DEMO -与上面相同,但没有 empty-container 要素

Jacob VanScoy 12 年前

除非您试图实现除了移动和调整对话框大小之外的其他功能,否则我认为您不需要在单击事件时重新初始化对话框。注意jQueryUI是如何将原始div封装在几个新的div中的,所以我要获取最外层的元素。尝试在您的Javascript中执行以下操作:

$("#dialog").dialog();

$("#content").click(function () {

    $(".ui-dialog").animate({
        left: 0,
        top: 0,
        width: $(document).width() -100,
        height: $(document).height() -100
    }, 150);

});

Twinone 12 年前

animate({complete:function()}) 是解决方案。 this jsfiddle 现在正在工作。

我不知道为什么,但它在第二次点击时是正确的,但在第一次点击时不是。 this example 用一个 setTimeout() 工作(有点延迟)。

mutil 12 年前

您可以向animate函数添加回调:

$("#content").click(function () {
    $("#dialog").dialog("widget").animate({
        width: $(document).width() -100,
        height: $(document).height() -100,
        left: 0,
        top: 0
    }, 150, function() { 
        $("#dialog").width($('.ui-dialog').width()); 
    });
});

JsFiddle Demo