Question

有没有办法在选项卡条的未选定选项卡上应用jQuery UI效果，例如pulsate效果（如所述here），而不选择该选项卡？

我想要获得的是告诉用户在标签Y 上工作时，要注意标签X ，因为某些操作导致标签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()方法只是确保当我们导航到已通知的标签时，我们通过调用{{1}来关闭通知}。

此代码只是添加unnotify()类作为通知机制，但可以轻松替换为其他内容，如效果。这是原始fiddle。

对未选择的制表符锚点应用效果

1 个答案: