javascript - 使用 jQuery 自动调整所有对话框的大小

Question

我在 Stackoverflow 上的另一篇文章中找到了一些代码，用于在 IE 中自动调整 jQuery 对话框的大小，并确保它们不会简单地调整到屏幕的宽度......即使在 IE7 上，它也能很好地工作!

$("#item-popup").dialog({
    autoOpen: false,
    resizable: false,
    autoResize: true,
    width: 'auto',
    modal: true
}).bind("dialogopen", function(event, ui) {
    // only run on IE
    if ($.browser.msie) {
        // fix for width:auto in IE  
        var contentWidth = $(this).width();
        $(this).parent().find('.ui-dialog-titlebar').each(function() {
            $(this).width(contentWidth);
        });
    }
}).bind("dialogclose", function(event, ui) {
    // only run on IE
    if ($.browser.msie) {
        //fix for width:auto in IE 
        $(this).parent().css("width", "auto");
    }
});

我现在想做的是将相同的代码应用于我页面上的所有其他对话框，而不必一遍又一遍地重复它。我已经尝试了一系列逻辑变体，但我似乎无法做到正确。我可以触发dialogopen代码，但它根本不会像我将它直接绑定(bind)到对话框时那样调整对话框的大小。

$('.ui-dialog').bind("dialogopen", function(event, ui) {
    // only run on IE
    if ($.browser.msie) {
        // fix for width:auto in IE  
        var contentWidth = $(this).width();
        $(this).parent().find('.ui-dialog-titlebar').each(function() {
            $(this).width(contentWidth); // <-- Does not resize the dialog
        });
    }
}).bind("dialogclose", function(event, ui) {
    // only run on IE
    if ($.browser.msie) {
        //fix for width:auto in IE 
        $(this).parent().css("width", "auto");
    }
});

经过多次故障排除后，我发现问题出在获取 contentWidth 的代码行中。当直接绑定(bind)到对话框时，它仅返回对话框的宽度(即 435)，但是当我将它放在这个通用处理程序中时，它返回窗口宽度(即 1150)。

我在通用 ui-dialog 处理程序中是否错误地引用了对话框？

var contentWidth = $(this).width();

Answer 1

是的，您是对的，您的引用资料不正确。为了绑定(bind)到相同的对话框元素，您应该引用 $(".ui-dialog-content").bind("dialogopen", ...