jQuery UI選項卡在更改鼠標懸停之前強制延遲

Question

使用jQuery UI選項卡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

您可以創建自己的事件，覆蓋鼠標懸停並觸發新事件。

我發現了一個博客post about it here

Answer 2

既然你是在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()在全球範圍內運行）。