jQuery UI 选项卡在鼠标悬停时更改选项卡之前强制延迟

Question

将 jQuery UI Tabs 1.7.2 与 jQuery 1.4.2 一起使用，有没有办法使当您将鼠标悬停在选项卡上时，在选项卡切换之前有一个延迟？

我一直在考虑使用hoverIntent插件可以做到这一点，但无法弄清楚它如何适应。

现在我的代码如下所示:

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

我尝试过在演出事件中使用回调，但我认为我做错了或者不清楚回调何时发生:

$( ".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));
});​​​​​​​​​​​​​​​

You can try a demo here

这可以通过设置 event option 来实现。监听我们的自定义事件，mousedelay。然后在 .delegate() ，我们正在监听 anchor 上的 mouseover 事件，如果有超时则清除超时(我们快速将鼠标悬停在 2 个选项卡上)，然后设置另一个。当超时结束时，我们要做的就是触发该 anchor (选项卡)上的 mousedelay 事件。

$.proxy() piece 只是在执行时让 this 引用我们鼠标悬停的 anchor 的一种简短方法，而不是 window (因为 setTimeout() 在全局上下文中运行)。