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

Question

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

整个网站是通过 javascript 加载的(我猜现在很流行)。大量 HTML 被动态加载，这会导致对话框出现定位问题。以前，该网站使用自定义 CSS position:relative来确保所有对话框都定位正确。

对话框的设置如下:

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

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

Don't change DOM position on open

Dialogs no longer get moved around in the DOM when they are opened. The only time the dialog is moved now is during initialization when it is appended to the body. This fixes a slew of problems, such as form elements being reset, iframes reloading, etc.

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

我在想的是 Hook 对话框打开事件 http://jqueryui.com/demos/dialog/#event-open并在模式窗口实际打开之前重置位置。

所以我可以通过对话框找到所有元素，然后通过$( ".selector" ).bind( "dialogopen"绑定(bind)等等或全局 Hook 事件(首选)。我要么需要一种方式来表示“给我附加对话框的所有元素”，要么“在打开事件发生时始终执行此代码。

有什么想法吗？

Answer 1

Either I need a way to say "give me all the elements with a dialog attached" or "always do this code when the open event happens.

我认为您的第一个想法是使用选择器来选择具有与其关联的对话框小部件的所有元素。这应该相对容易 - 将 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");  
});

希望有帮助。