对未选定的标签定位器应用效果

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。