如何增加jquery对话框高度&宽度动态地具有一定的效果

发布于 12-12 11:35 字数 453 浏览 1 评论 0原文

当我显示我的对话框时,我的对话框高度为 100,宽度为 100,

$("#dialog").dialog({
    autoOpen: true,
    height: 100,
    width: 100,
    modal: false,
    draggable: false,
    resizable: false,
});

在后台加载数据,当数据完全加载时,因为 jquery ajax 有成功选项,从那里我们可以确定数据已加载,然后我会将这些数据显示到我的对话。假设我想在对话框中显示的数据需要更多空间,例如高度应该是 300,宽度应该是 300。那么当我将大数据放入对话框中时,对话框是否会自动调整大小?

如果没有,那么我如何以编程方式增加对话框的高度和宽度,一些效果,例如逐渐增加高度和宽度,并且数据将出现在带有淡入效果的对话框中......如何实现它。需要一些代码的帮助。谢谢

when i am showing my dialog then my dialog height is 100 and width is 100 like

$("#dialog").dialog({
    autoOpen: true,
    height: 100,
    width: 100,
    modal: false,
    draggable: false,
    resizable: false,
});

and loading data in background and when data is fully loaded because jquery ajax has success option and from there we can determine data is loaded then i will show those data into my dialog. suppose the data which i want to show into dialog that data need more space like height should be 300 and width should be 300. so when i will pace that big data into dialog then dialog will be re-size automatically or not?

if not then how can i programatically increase dialog height and width some effect like gradually height and width will increase and data will appear into dialog with fadein effect....how to achieve it. need help with some code. thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

ぇ气2024-12-19 11:35:00

首先计算隐藏对话框元素的高度。之前将宽度设置为 300px,但没有高度并添加类 ui-widget

HTML:

<div id="dialog" class="ui-widget">...

CSS:

#dialog {
    display: none;
    width: 300px;
}

JS(16px 是对话框填充):

var iHeight = $('#dialog').height() + 16;

创建对话框后,设置对话框包装器的新宽度,如果当前高度低于计算值,则启动动画。

JS:

if ($("#dialog").height() < iHeight) {
    $("#dialog").parent().width(300 + 50);
    $("#dialog").animate({ height: iHeight, width: '300px'}, 500);
}

另请参阅我的 jsfiddle

===更新===

我更新了jsfiddle

First calculate the height of the hidden dialog element. Before set the width to 300px, but no height and add the class ui-widget.

HTML:

<div id="dialog" class="ui-widget">...

CSS:

#dialog {
    display: none;
    width: 300px;
}

JS (16px are the dialog padding):

var iHeight = $('#dialog').height() + 16;

After the dialog is created, set the new width for the dialog wrapper and start an animate if the current height is lower then the calculated.

JS:

if ($("#dialog").height() < iHeight) {
    $("#dialog").parent().width(300 + 50);
    $("#dialog").animate({ height: iHeight, width: '300px'}, 500);
}

Also see my jsfiddle.

=== UPDATE ===

My updated jsfiddle.

冷了相思2024-12-19 11:35:00

如果您知道高度/宽度或可以以某种方式计算它,那么您可以使用 http://api.jquery.com/动画/

$('#yourDiv').animate({height: '400px', width: '200px'});

If you know the height/width or can calculate it somehow then you can use http://api.jquery.com/animate/

$('#yourDiv').animate({height: '400px', width: '200px'});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文