在 jquery-ui 对话框标题中显示下拉列表时出现问题

Question

我正在使用 jQuery UI 库中的对话框组件。我想在其标题栏中显示一个简单的下拉菜单（）。该组件允许（任何 HTML 都可以放置在标题栏中），但它有问题：在 Opera 中移动鼠标会使下拉列表频繁闪烁，而在其他浏览器（Chrome、IE9）中，下拉列表无法打开。

我尝试向尽可能多的事件添加事件处理程序，并取消它们的冒泡。更具体地说，我禁用了以下事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave。这使得它在 Chrome/IE9 中变得更好，但 Opera 仍然闪烁很多，所以我认为仍然有问题。而且，这似乎有点……错误。

关于如何让下拉菜单正常工作有什么想法吗？

Answer 1

几乎晚了两年才回答这个问题，但我遇到了同样的问题，最终得到了一个我想分享的更简单的解决方案。

默认情况下，jQuery UI 对话框在拖动时会忽略 .ui-dialog-content （对话框的内容）和 .ui-dialog-titlebar-close （标题元素中的右上角关闭按钮）。这是通过以下代码完成的：

this.uiDialog.draggable({
        cancel: ".ui-dialog-content, .ui-dialog-titlebar-close",
        ...
    });

这与添加到 title 元素的任何内容所需的行为相同。我可以使用以下代码将下拉列表添加到可拖动的“取消列表”中：

$(dialog).appendTo('body').showDialog({
            ...
            dialogClass: 'dialog-quick-select',
            open: function(event, ui) {
                var dropdownHtml = '<select id="market-set-dropdown"></select>';
                var $currentDialog = $('.dialog-quick-select');

                $('.ui-dialog-titlebar', $currentDialog).append(dropdownHtml);

                //this is needed to allow the dropdown to be opened.
                $currentDialog.draggable({
                    cancel: '.ui-dialog-content, .ui-dialog-titlebar-close, #market-set-dropdown'
                });
            }
        });

我在 open 方法中添加下拉列表，这就是我选择在那里修改取消的原因。另请注意，我的代码依赖于分配给对话框的自定义类名称，该名称是使用dialogClass选项设置的。

另请注意，如果对话框预定义的类名发生更改（.ui-dialog-content 和 .ui-dialog-titlebar-close），则取消将不再对这些元素起作用。

jQuery UI 对话框的 API：http://api.jqueryui.com/dialog/

Answer 2

http://jsfiddle.net/a9ntp/13/

我已经弄乱了它几分钟现在，我想我可能会给你一个解决方案。这是我第一次使用小提琴，所以如果它不起作用请告诉我。据我所知，出现这个问题是因为 dialgo 弹出窗口上的标题栏是可拖动的。

var popup = $('<div>Hello world!</div>');

$(popup).dialog({title: 'Text <select id="dropDown"><option>A</option><option>B</option><option>C</option><option>D</option></select>', draggable: false});

$('#dropDown').hover(
    function(){
        $(popup).dialog('option', 'draggable', true);
    },
    function(){
        $(popup).dialog('option', 'draggable', false);
    }
);

当鼠标悬停在下拉列表上时，它将禁用拖动来选择对象。当它离开下拉列表时，它应该重新初始化拖动功能。希望对您有帮助或至少给您一些想法！