Применить эффект на невыбранном вкладке привязки

Question

Есть ли способ применить эффект пользовательского интерфейса jQuery, такой как эффект 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.