css - 将一个弹出窗口绑定(bind)到另一个可拖动的弹出窗口

Question

我使用 jQuery UI 对话框，其中有另一个弹出窗口。

$("#dialog").dialog({
    autoOpen: false,
    show: "blind",
    hide: "explode"
});

$("#opener").click(function() {
    $("#dialog").dialog("open");
    return false;
});

// BUTTONS
$('.fg-button').hover(function() {
    $(this).removeClass('ui-state-default').addClass('ui-state-focus');
}, function() {
    $(this).removeClass('ui-state-focus').addClass('ui-state-default');
});

// MENUS        
$('#hierarchybreadcrumb').menu({
    content: $('#hierarchybreadcrumb').next().html(),
    backLink: false
});

查看现场版本:http://jsfiddle.net/nrWug/1

如果我打开 iPod 菜单然后拖动对话框，iPod 菜单就会移位。如何绑定(bind)这两个以使对话框可拖动且可调整大小？

Answer 1

要使其工作，您必须使用 jQuery 对话框中的“拖动”事件并调整菜单的位置。

如果您想将自定义回调函数添加到 iPod 风格菜单中，请进入 fg.menu.js 第 244 行并添加您的自定义函数。

如果您来这里是因为简洁的 iPod 风格菜单，请等待 jQuery UI 更新到版本 1.9。该功能将直接从 Filament Group(主要贡献者)集成。您可以查看实际状态并下载1.9版本。这是当前的demo其中还不包括 iPod 风格的菜单。

我决定不使用该菜单，因为如果与 jQuery UI(尤其是对话框)一起使用，该菜单会存在重大的跨浏览器兼容性问题。如果 jQuery UI 在 1.9 稳定版中接管了该功能，毫无疑问，这种节省空间的菜单/选择框将在网络上更频繁地出现。