jQuery UI Tabs会在鼠标悬停时更改选项卡之前强制延迟 [英] jQuery UI Tabs force delay before changing tab on mouseover

问题描述

将jQuery UI Tabs 1.7.2与jQuery 1.4.2结合使用，是否有办法做到这一点，以便当您将鼠标悬停在某个选项卡上时，在选项卡切换之前会有延迟吗?

Using the jQuery UI Tabs 1.7.2 with jQuery 1.4.2, is there a way to make it so that when you mouseover a tab, there is a delay before the tab switches?

我一直在研究使用 hoverIntent 插件来执行此操作，但无法确定它的适用范围.

I've been looking into using the hoverIntent plugin to do this, but cannot figure out how it would fit in.

现在我的代码如下:

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

我尝试在show事件上使用回调，但是我认为我做错了或者不清楚何时发生回调:

I've tried playing around with a callback on the show event, but I think I'm doing it wrong or not clear on when the callback happens:

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

任何帮助将不胜感激.

推荐答案

从1.4.2开始，您可以使用自定义事件和 .delegate() 可以做到这一点:

Since you're on 1.4.2 you can use a custom event and .delegate() to do this:

$("#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事件.

This works by setting the event option to listen for our custom event, mousedelay. Then in .delegate(), we're listening for the mouseover event on the anchors, clearing a timeout if there is one (we hovered over 2 tabs rapidly), and setting another. When that timeout finishes all we're doing is triggering the mousedelay event on that anchor (the tab).

$.proxy() 只是获得this引用的一种简便方法到我们鼠标悬停的锚点，而不是window(因为 setTimeout() 运行在全局范围内)执行.

The $.proxy() piece is just a short way to have this reference to the anchor we moused-over, not window (since setTimeout() runs in a global context) when it executes.

这篇关于jQuery UI Tabs会在鼠标悬停时更改选项卡之前强制延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！