Невозможно изменить активное состояние кнопки закрытия диалогового окна jQueryUI

#jquery #jquery-ui #jquery-plugins #jquery-ui-dialog

#jquery #jquery-пользовательский интерфейс #jquery-плагины #jquery-ui-dialog

Вопрос:

Я хочу изменить активное состояние кнопки закрытия (в строке заголовка) в диалоговом окне jQueryUI. Я изменил его нормальное и: состояние наведения. Но состояние :active, похоже, никогда не срабатывает.

Есть ли что-то в плагине, что мешает работе :active state в ссылке кнопки закрытия? Можно ли это изменить, чтобы оно работало?

Вот пример проблемы: посмотреть пример

1. не могли бы вы дать нам несколько примеров того, что вы сделали, что работает, а что не работает, пожалуйста?

2. работает для меня на последней версии Mac Chrome. Я нажимаю (и удерживаю) на нее, и она становится черной, как указано в CSS на странице, так и должно быть.

3. Действительно? Я использую FF7 и IE9, и это не работает на них.

4. также работает в Safari.. Версия 5.1 (7534.48.3) — версия Chrome 14.0.835.202

5. ОК. Что ж, интересно, что webkit работает именно так. Однако браузеры, которые я использую, этого не делают 🙂

Ответ №1:

Это следствие отключения выбора для заголовка диалогового виджета в браузере, который не поддерживает событие ‘selectstart’. Для этих браузеров вместо этого отключается событие mousedown.

строка 145: jquery.ui.dialog.js

         uiDialogTitlebar.find( "*" ).add( uiDialogTitlebar ).disableSelection();

строка 120: jquery.ui.core.js

     disableSelection: function() {
    return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" )  
        ".ui-disableSelection", function( event ) {
            event.preventDefault();
        });
},

enableSelection: function() {
    return this.unbind( ".ui-disableSelection" );
}

таким образом, вы можете использовать enableSelection() или отменить его самостоятельно

Ответ №2:

:active Состояние запускается только при нажатии на него. В этот момент ваш диалог немедленно закроется, поэтому я сомневаюсь, что вы сможете увидеть его состояние. Можете ли вы привести пример, если это не отвечает на ваш вопрос?

1. Функция «закрыть» не вызывается до тех пор, пока не будет отпущена кнопка мыши.

2. Находится ли :hover перед :after ? :after должно быть после: наведите курсор в css.

3. Проблема не в CSS. Это какое-то событие, связывающее код диалога. Если вы отмените привязку всех событий в строке заголовка диалогового окна, активное состояние будет работать. Я просто не знаю, в каком именно событии проблема.

Ответ №3:

Учитывая комментарии @Bizniztime, почему бы не сделать это на javascript?

 $(".ui-dialog-titlebar-close").mousedown(function() {
    $(this).css("background", "#000");
}).mouseover(function() {
    $(this).css("background", "#0F0");    
}).mouseout(function() {
    $(this).css("background", "#F00");    
});

Вы также можете добавлять / удалять классы…