Настройка фокуса jQuery

Question

Проблема

Я пытаюсь создать эффект, когда всплывающее окно появляется, когда пользователь наводит мышью.Фокус затем устанавливается на это всплывающее окно.Когда пользователь делает фокус на указанном всплывающем окне, оно исчезает.

Пример

Вы можете просмотреть рабочий пример ниже, но вам нужно будет войти как"testuser" в полях имени пользователя и пароля.Наведите курсор на окно входа в систему после входа в систему, и появится всплывающее окно, сообщающее, что вы уже вошли в систему.

http://www.steelfrog.com

Я хочу, чтобы это всплывающее окно исчезло послепользователь удалил с него фокус, поскольку он содержит кнопку выхода из системы.

В настоящее время ...

Что у меня есть:

$('.disabled').hover (
    function () { $('#bubble_logged').fadeIn(300); },
    function() { $('#bubble_logged').focus(); }
    );

$('#bubble_logged').focusout ( function () { $('#bubble_logged').fadeOut(300); } );

Видимо, это недопустимо, или я что-то неправильно понимаю.Я очень новичок в jQuery, так что просветление было бы здорово!

[РЕДАКТИРОВАТЬ] Если у вас есть лучший способ сделать это, я, кстати, все уши!

Answer 1

Вам необходимо использовать собственный метод javascript focus().Вы не можете использовать это непосредственно для объекта jQuery, потому что этот объект не ссылается только на элемент DOM.

Селектор $('#bubble_logged') вернет объект jQuery, который содержит все элементы с идентификатором 'bubble_logged.Должен быть только один, но jQuery не волнует.Итак, нам нужно найти первый (и единственный) элемент в этой коллекции.Вы можете сделать это, используя $('#bubble_logged').get(0) или $('#bubble_logged')[0].Как только вы это сделаете, у вас будет ссылка на элемент DOM, который вы искали.

Итак, мы добавляем .focus(), чтобы переместить фокус на этот элемент.$('#bubble_logged').get(0).focus(); Обратите внимание, что это попытается сфокусировать элемент #bubble_logged.Если это div, это ничего не даст.Если вы пытаетесь сфокусировать элемент внутри этого контейнера, вам нужно вместо этого вызвать focus.

Для метода .hover() jQuery вы предоставляете ему две анонимные функции.Первый - это обработчик события hoverIn, а второй - обработчик события hoverOut.Я считаю, что вы хотите, чтобы всплывающее окно исчезло, а затем установите фокус.Для этого поместите обе эти логические части в первый обработчик событий.

$('.disabled').hover (
    function () { 
        $('#bubble_logged').fadeIn(300, function(){
            //this is executed once the fadein is complete
            $('#bubble_logged')[0].focus();
        }); 
    },
    ...
);

Затем, когда вызывается метод hoverOut, вы, вероятно, захотите fadeOut всплывающего окна.Просто добавьте следующее.

$('.disabled').hover (
    ...
    function () { 
        $('#bubble_logged').fadeOut(300);
    }
);

Окончательный сценарий будет выглядеть следующим образом.

$('.disabled').hover (
    function () { 
        $('#bubble_logged').fadeIn(300, function(){
            //this is executed once the fadein is complete
            $('#bubble_logged')[0].focus();
        }); 
    },
    function () { 
        $('#bubble_logged').fadeOut(300);
    }
);

Answer 2

Я бы, наверное, написал это как:

$('.disabled').mouseenter(function()
{
 $('#bubble_logged').fadeIn(300);
 $('#bubble_logged').focus();
}); 

$('#bubble_logged').focusout(function () 
{ 
  $(this).fadeOut(300); 
}); 

альтернатива: (фокус после завершения fadein)

$('.disabled').mouseenter(function() 
{ 
 $('#bubble_logged').fadeIn(300, function()
 {
   $('#bubble_logged').focus(); 
 });
});  

$('#bubble_logged').focusout(function ()  
{  
  $(this).fadeOut(300);  
});  

РЕДАКТИРОВАТЬ2: Иногда я также видел это как:

$('#bubble_logged').blur(function ()   
{   
  $(this).fadeOut(300);
  $(this).hide();
});

Answer 3

Попробуйте изменить focusout на blur.