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

我现在要做的是将相同的代码应用到我页面上的所有其他对话框，而不必反复重复。我尝试过一系列逻辑变体，但我似乎无法做到正确。我可以触发对话框开启的代码，但它不会像我将对象直接绑定到对话框时那样调整对话框的大小。

$('.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的代码行中。当直接绑定到对话框时，它只返回对话框的宽度（即435），但是当我在这个通用处理程序中有它时，它返回窗口宽度（即1150）。

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

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

Answer 1

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

使用jQuery自动调整所有对话框

1 个答案: