對未選定的標籤定位器應用效果

Question

有沒有辦法在選項卡條的未選定選項卡上應用jQuery UI效果，如pulsate效果（如描述here），而不會選中該選項卡？

我試圖獲得是告訴用戶在片X注意，而他的工作的一個選項卡Y方向，因爲一些動作引起了標籤X重新加載其內容。

Answer 1

您可以創建自定義tabs小部件內置到它的通知行爲：

$.widget("app.tabs", $.ui.tabs, { 

    // Applies the "ui-state-highlight" class 
    // to the given tab index. 
    notify: function(index) { 
     if (this.active.index() === index) { 
      return;  
     } 
     this.tabs.eq(index) 
      .addClass("ui-state-highlight"); 
    }, 

    // Removes the "ui-state-highlight" class 
    // from the given tab index. 
    unnotify: function(index) { 
     this.tabs.eq(index) 
      .removeClass("ui-state-highlight");  
    }, 

    // Make sure active tabs don't have the 
    // "ui-state-highlight" class applied. 
    _toggle: function(e, ui) { 
     this._super(e, ui); 
     this.unnotify(ui.newTab.index()); 
    } 

}); 

$(function() { 
    $("#tabs").tabs() 
     .tabs("notify", 1); 
}); 

你基本上只是增加了兩個新的方法，以小部件 - notify()和unnotify()。我們在這裏覆蓋的_toggle()方法只是確保當我們導航到已通知的選項卡時，我們通過調用unnotify()關閉通知。

此代碼只是將ui-state-highlight類添加爲通知機制，但可以輕鬆地將其替換爲其他效果。這是原來的fiddle。