在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對話框標題內顯示下拉的問題

回答

相關問題