Question

我正在使用jQuery UI库中的Dialog组件。我想在标题栏中显示一个简单的下拉列表（<select>）。该组件允许（任何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/

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

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

当鼠标悬停在下拉列表中时，它将禁用拖动，让您选择对象。当它离开下拉列表时，它应该重新初始化拖动功能。希望有帮助或至少为您提供一些工作的想法!!!

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

2 个答案: