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

Question

在jQuery 1.4.2中使用jQuery UI标签1.7.2，有没有办法让你在鼠标移到标签上时，在标签切换之前有一个延迟？

我一直在研究使用hoverIntent插件来做这件事，但我不知道它是如何适应的。

现在我的代码看起来像这样：

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

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

$( ".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()中，我们监听锚点上的mouseover事件，如果有一个超时则清除(我们快速悬停在两个选项卡上)，并设置另一个。当超时时间结束时，我们所要做的就是触发该锚(选项卡)上的mousedelay事件。

$.proxy()片段只是让this引用我们鼠标移过的锚点的一种简单方法，而不是window (因为setTimeout()在全局上下文中运行)。

Answer 2

您可以创建自己的事件，覆盖鼠标悬停并触发一个新事件。

我找到了一个博客post about it here