JQuery UI Tabs заставляет задержку перед сменой вкладки при наведении курсора

Question

Используя jQuery UI Tabs 1.7.2 с jQuery 1.4.2, есть ли способ сделать так, чтобы при наведении курсора на вкладку задержка перед переключением вкладки?

пытался использовать для этого плагин hoverIntent , но не могу понять, как он будет вписываться.

Сейчас мой код выглядит так:

var tabs = $('.tabs').tabs({
 event: 'mouseover'
});

IЯ пытался поиграть с обратным вызовом на событии шоу, но я думаю, что я делаю это неправильно или не ясно, когда происходит обратный вызов:

$( ".tabs" ).tabs({
 show: function(event, ui) 
 { 
  setTimeout("FUNCTION_TO_CHANGE_TAB?", 200);
 }
});

Любая помощь будет принята с благодарностью.

Answer 1

Поскольку вы используете 1.4.2, вы можете использовать пользовательское событие и .delegate(), чтобы сделать это:

$("#tabs").tabs({
  event: 'mousedelay'
}).delegate('ul.ui-tabs-nav li a', 'mouseover', function() {
  clearTimeout($(this).closest('.ui-tabs').data('timeout'));
  $(this).closest('.ui-tabs').data('timeout', setTimeout($.proxy(function() {
    $(this).trigger('mousedelay');
  }, this), 500));
});​​​​​​​​​​​​​​​

Вы можете попробовать демо здесь

Это работает путем установки опции event для прослушивания нашего пользовательского события mousedelay.Затем в .delegate() мы слушаем событие mouseover на якорях, очищаем тайм-аут, если он есть (мы быстро зависли над 2 вкладками), и устанавливаем другое.Когда этот тайм-аут заканчивается, все, что мы делаем, это запускаем событие mousedelay на этой привязке (вкладка).

Часть $.proxy() - это всего лишь короткий путь, чтобы иметь this ссылку на привязанный нами якорь, а не window (так как setTimeout() запускается в глобальном контексте) при выполнении.

Answer 2

Вы можете создать собственное событие, переопределить указатель мыши и вызвать новое событие.

Я нашел блог пост об этом здесь