jQuery 对话框标题栏宽度问题
当我在打开对话框后增加对话框的大小时,对话框的高度和宽度会增加,但对话框标题栏的宽度不会增加。我只是不明白为什么会发生这种情况。
这是我的代码:
<style type="text/css">
.BusyStyles {
background-image: url('../images/ajax-loader.gif');
background-repeat: no-repeat; background-position: center center;
height: 80px;
width: 180px;
}
</style>
<script type="text/javascript">
$("#dialog").dialog({
autoOpen: false,
height: 80,
width: 180,
modal: false,
draggable: true,
resizable: false,
position: 'center',
show: {
effect: "fade",
duration: 2000
},
hide: {
effect: "fade",
duration: 500
}
});
$("#dialog").removeClass('ui-dialog-content ui-widget-content').addClass('BusyStyles')
$("#dialog").dialog("open");
</script>
在另一个按钮上,单击我正在增加对话框的大小,如下所示:
$(".ui-dialog").animate({
left: $(document).width() / 2 - $("#dialog").width() / 2,
top: $("#dialog").top
}, 1000);
我需要在代码中添加什么,以便结果对话框标题宽度随着对话框宽度而增加?
谢谢
When I am increasing size of dialog after opening it then dialog height and width is increasing but dialog title bar width is not increasing. I just do not understand why it is happening.
Here is my code:
<style type="text/css">
.BusyStyles {
background-image: url('../images/ajax-loader.gif');
background-repeat: no-repeat; background-position: center center;
height: 80px;
width: 180px;
}
</style>
<script type="text/javascript">
$("#dialog").dialog({
autoOpen: false,
height: 80,
width: 180,
modal: false,
draggable: true,
resizable: false,
position: 'center',
show: {
effect: "fade",
duration: 2000
},
hide: {
effect: "fade",
duration: 500
}
});
$("#dialog").removeClass('ui-dialog-content ui-widget-content').addClass('BusyStyles')
$("#dialog").dialog("open");
</script>
On another button click I am increasing size of dialog like this:
$(".ui-dialog").animate({
left: $(document).width() / 2 - $("#dialog").width() / 2,
top: $("#dialog").top
}, 1000);
What do I need to add in my code so that the result dialog title width would increase along with dialog width?
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您应该使用
option
方法来增加对话框大小:you should use the
option
method to increase the dialog size:例如,使用 FireBug 来查看哪个 div 是对话框的所有其他 div 的父容器(jQuery 对话框是由许多 div 元素构建的)。然后您将确定您正在调整正确的 div 大小。
标题栏肯定会调整大小......
Use for example FireBug to see which div is the parent container to all other divs of dialog (jQuery dialog is build from many div elements). Then you will be sure that you are resizing correct div.
And title bar will be resized for sure...