jQuery 对话框标题栏宽度问题

发布于 2024-12-12 13:35:22 字数 1150 浏览 0 评论 0原文

当我在打开对话框后增加对话框的大小时,对话框的高度和宽度会增加,但对话框标题栏的宽度不会增加。我只是不明白为什么会发生这种情况。

这是我的代码:

<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 技术交流群。

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

发布评论

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

评论(2

陌伤浅笑 2024-12-19 13:35:22

您应该使用 option 方法来增加对话框大小:

$( "#dialog" ).dialog('option', 'width', 600);

you should use the option method to increase the dialog size:

$( "#dialog" ).dialog('option', 'width', 600);
云裳 2024-12-19 13:35:22

例如,使用 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...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文