在jquery-ui对话框标题内显示下拉的问题

我使用jQuery UI库中的对话框组件。我想在其标题栏内显示简单的下拉菜单（<select>）。该组件允许（任何HTML可以放置在标题栏中），但它有问题：在Opera中移动鼠标会在很多浏览器中闪烁，而在其他浏览器（Chrome，IE9）中，无法打开下拉菜单。在jquery-ui对话框标题内显示下拉的问题

我尝试添加事件处理程序，尽可能多的事件，我可以想象和取消冒泡他们。更具体地说，我禁用了以下事件：onclick，onmousedown，onmouseup，onmouseover，onmouseout，onmouseenter，onmouseleave。这使得它在Chrome/IE9中更好，但Opera仍然很多，所以我认为还是有些问题。此外，这似乎有点......错了。

关于如何使下拉在那里正常工作的任何想法？

来源

2012-02-06 Vilx-

能否请您发表您的实现？ – karim79 2012-02-06 15:56:13

Here：[http://jsfiddle.net/a9ntp/](http://jsfiddle.net/a9ntp/） – 2012-02-06 16:03:47

你不知道我在想什么。你不是心灵的。 – 2012-02-06 16:09:18

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

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

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

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

来源

2012-02-06 23:50:33

不错，值得+1。说实话，前一段我已经得出了这个结论。但我确实想保持可拖动的行为，而歌剧的怪诞并没有消失。全事件取消泡沫的事情也一样，所以我想我会保持这一点，除非有更好的事情出现。我仍然不明白为什么歌剧会使下拉菜单闪烁......而且，还有其他一些古怪的东西。但我认为Opera是我最喜欢的浏览器，并不是真正的目标浏览器，所以我可以忍受这种不完美。 – 2012-02-07 08:30:08

差不多两年后才回答这个问题，但我遇到了同样的问题，最后我想分享一个更简单的解决方案。

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

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

这是添加到标题元素的任何东西所需的相同行为。我能够通过使用下面的代码到我的下拉列表添加到拖动“删除清单”：

$(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' 
       }); 
      } 
     });

我加入我的下拉在打开的方法，这就是为什么我选择了修改取消那里。另请注意，我的代码依赖于分配给对话框的自定义类名，该对话框使用dialogClass选项设置。

还有一点需要注意，如果对话框预先定义的类名不断变化（.ui-dialog-content和.ui-dialog-titlebar-close），取消将不再适用于这些元素。

的jQuery用户界面对话框API：http://api.jqueryui.com/dialog/

来源

2014-01-16 21:27:41 Migs

在jquery-ui对话框标题内显示下拉的问题

回答

相关问题