对未选择的选项卡锚点应用效果

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 class 作为通知机制，但可以很容易地用其他东西替换，比如效果。这是原文 fiddle.

对未选择的选项卡锚点应用效果

Apply effect on an unselected tab anchor

jquery-ui

jquery-ui-tabs