jQuery 对话框标题栏宽度问题

Question

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

这是我的代码:

<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);

我需要在代码中添加什么，以便结果对话框标题宽度随着对话框宽度而增加？

谢谢

Answer 1

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

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