5

我有一个 div，我希望它是其父对话框的 100% 宽度。

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

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

这同样适用于身高。

这是一个很好的jsFiddle，它更好地解释了这个问题。

我怎样才能让 div 保持它的比例？

jQuery 如何更新宽度和高度（当我手动调整大小时）保持比例？

编辑：

无论如何，我希望灰色背景填充整个对话框。这是我更新的 jsfiddle 演示：http: //jsfiddle.net/Esh5h/1/

编辑2：

我找到了一种实用但非常丑陋的方式来完成它：JSFIDDLE

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

编辑 3：

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

4

4 回答 4

5

我再次查看并检查了元素，现在我很清楚发生了什么。

一旦您手动调整对话框的大小，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>

然后，当您对其进行动画处理时，样式会干扰您的预期结果。

在动画之前删除style属性似乎是有效的，类似于：

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

演示- 移动到底left部top

编辑

该style属性将不断给您带来问题。删除它后，当再次手动调整大小时，它会再次注入它们，从而弄乱您的预期结果。

我发现解决这个问题的唯一方法是在调整大小时继续删除它们：

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

编辑

无论如何，我希望灰色背景填充整个对话框。

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

改变这个：

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

对此：

.ui-dialog {
    background : #cacaca;
}

此外，您仍然存在注入样式属性会弄乱您想要的样式并使用上述代码的问题，这些代码会在重新调整大小以及动画修复该样式时删除样式属性。

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

DEMO - 与上面相同，但没有empty-container元素

于 2013-03-16T23:16:16.847 回答
0

除非您试图实现的不仅仅是移动和调整对话框大小，否则我认为您不需要在单击事件上重新初始化对话框。请注意 jQuery UI 如何将您的原始 div 包装在几个新的 div 中，所以我抓住了最外层的元素。尝试在你的 Javascript 中做这样的事情：

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

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

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

});
于 2013-03-16T23:43:12.990 回答
0

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

我不知道为什么，但它在第二次点击时正常工作，但在第一次时却不行。这个例子有一个setTimeout()作品（有一点延迟）。

于 2013-03-17T00:14:38.110 回答
0

您可以向 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 演示

于 2013-03-17T00:24:19.550 回答