Проблемы с отображением выпадающего меню в заголовке диалога jquery-ui - PullRequest
0 голосов
/ 06 февраля 2012

Я использую компонент Dialog из библиотеки jQuery UI.Я хотел бы показать простой выпадающий список (<select>) в строке заголовка.Компонент допускает это (любой HTML может быть помещен в строку заголовка), но у него есть проблемы: при перемещении мыши в Opera сильно вспыхивает выпадающий список, а в других браузерах (Chrome, IE9) раскрывающийся список не открывается.

Я пытался добавить обработчики событий к как можно большему количеству событий и отменить всплывание на них.Более конкретно, я отключил следующие события: onclick, onmousedown, onmouseup, onmouseover, onmouseout, onmouseenter, onmouseleave.Это делает его лучше в Chrome / IE9, но Opera по-прежнему сильно мерцает, поэтому я предполагаю, что что-то все еще не так.Кроме того, это кажется каким-то ... неправильным.

Есть какие-нибудь идеи о том, как правильно работать с выпадающим меню?

Ответы [ 2 ]

3 голосов
/ 17 января 2014

Почти два года спустя, чтобы ответить на этот вопрос, но у меня возникла та же проблема, и я нашел простое решение, которым хотел поделиться.

Диалог пользовательского интерфейса jQuery по умолчанию игнорирует .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'
                });
            }
        });

Я добавляю раскрывающийся список в метод open, поэтому я решил изменить отмену там.Также обратите внимание, что мой код опирается на пользовательское имя класса, назначенное диалоговому окну, которое установлено с параметром dialogClass.

Еще одно примечание, если имена классов, предварительно определенные диалогом, когда-либо изменяются (.ui-dialog-content и .ui-dialog-titlebar-close), отмена больше не будет работать с этими элементами.

API для jQuery UI Dialog: http://api.jqueryui.com/dialog/

2 голосов
/ 07 февраля 2012

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

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

...