如何附加到所有Jquery.UI.dialog打开事件以在打开时动态调整对话框大小？

Question

我正在使用大量现有代码库,其中包含大量遗留代码,我无法更改.我的任务是升级到UI库的1.8版本.我遇到了jquery.ui.dialog()元素定位的问题.

整个网站都是通过javascript加载的(我猜这是现在的风靡).大量的HTML被动态加载,导致对话框出现定位问题.以前该网站使用自定义css位置:相对以确保所有对话框都定位正常.

对话框的设置如下:

    $('#deletingDialog').dialog({ autoOpen: false, modal: true, position: 'center' });

在UI 1.8中,dialog()的工作方式发生了变化,从而破坏了这种行为:http: //jqueryui.com/docs/Upgrade_Guide/1.8.6

不要在打开时更改DOM位置

打开时,对话框不再在DOM中移动.现在移动对话框的唯一时间是在初始化时将其附加到正文.这解决了一系列问题,例如重置表单元素,iframe重新加载等.

所有的dialog()设置代码都很早就绑定到html元素,并且位于几个不同的地方.在一个完美的世界中,我能够进入那里并将所有对话框调用更改为后期绑定,并且只在对话框打开之前进行设置.这很可能解决了这个问题.不幸的是,改变所有这些代码是非常令人望而却步的,并且绝对不是一种选择

我正在考虑的是挂钩对话框打开事件http://jqueryui.com/demos/dialog/#event-open并在模态窗口实际打开之前重置位置.

所以要么我可以找到带有对话框的所有元素,然后通过$( ".selector" ).bind( "dialogopen"等等绑定或者挂钩到全局事件(首选).要么我需要一种方式来说"给我带有附加对话框的所有元素"或"在开放事件发生时始终执行此代码.

有任何想法吗？

Answer 1

要么我需要一种方式来说"给我带有附加对话框的所有元素"或"在开放事件发生时始终执行此代码.

我认为您首先想到使用选择器来选择具有与之关联的对话框窗口小部件的所有元素.这应该相对容易 - 将a class ui-dialog-content应用于应用对话框窗口小部件的每个元素(div在内容周围插入包装器).所以你的代码是:

$(".ui-dialog-content").bind("dialogopen", function() {
    // Reposition dialog, 'this' refers to the element the even occurred on.
    $(this).dialog("option", "position", "top");  
});

希望有所帮助.