Проблемы с отображением выпадающего меню в заголовке диалога jquery-ui

Question

Я использую компонент Dialog из библиотеки jQuery UI. Я хотел бы показать простой выпадающий список (<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), отмена больше не будет работать с этими элементами.

API для JQuery UI Dialog: 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);
    }
);

Когда мышь находится в раскрывающемся списке, она отключает перетаскивание, позволяя вам выбрать объект. Когда он покидает выпадающий список, он должен повторно инициализировать функцию перетаскивания. Надеюсь, что это помогает или, по крайней мере, дает вам некоторые идеи для работы!