Question

使用jQuery UI选项卡1.7.2和jQuery 1.4.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事件，如果存在，则清除超时（我们快速悬停超过2个选项卡），然后设置另一个。当超时结束时，我们正在做的就是触发该锚点（选项卡）上的mousedelay事件。

$.proxy()篇只是this引用我们所关注的锚点的简短方法，而不是window（因为setTimeout()在全局范围内运行）当它执行时。

Answer 2

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

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

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

2 个答案: