问题描述
将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会在鼠标悬停时更改选项卡之前强制延迟的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!