Option to select specific tab after removal in jQuery UI.TABS

One of the problems with the remove method of jquery ui.tabs is that after deleting the tab it either selects the tab on the right or if it is the last tab it selects one on the left.

My initial impression was that I could change this behavior by calling the select method in the ‘tabsremove’ event. But that does not work as the default selection takes place before the event is fired as indicated in the source below:

    remove: function( index ) {
                index = this._getIndex( index );
                var o = this.options,
                    $li = this.lis.eq( index ).remove(),
                    $panel = this.panels.eq( index ).remove();
              //DEFAULT SELECTION TAKES PLACE HERE
                // If selected tab was removed focus tab to the right or
                // in case the last tab was removed the tab to the left.
                if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) {
                    this.select( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
                }
                o.disabled = $.map(
                    $.grep( o.disabled, function(n, i) {
                        return n != index;
                    }),
                    function( n, i ) {
                        return n >= index ? --n : n;
                    });
                this._tabify();
              //EVENT FIRED HERE
                this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
                return this;
            },

So that I could better control as to what was selected after tab removal I over-rode the remove function like so:

$.extend( $.ui.tabs.prototype, {
        remove: function( index, nextIndex) {
              var o = this.options;
         
             index = this._getIndex( index );
         
          //if nextIndex passed use it or use use the default which is follows:
          //If selected tab was removed focus tab to the right or
            //in case the last tab was removed the tab to the left.
          if(nextIndex !== undefined){
             nextIndex = this._getIndex(nextIndex);
          }else{
             if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) {
                   nextIndex = index + ( index + 1 < this.anchors.length ? 1 : -1 );
             }
          };
        
            //remove this tab
          $li = this.lis.eq( index ).remove();
            $panel = this.panels.eq( index ).remove();
         
        
          //select the next tab
          this.select(nextIndex);
          //make sure to remove the removed tab index
          //from the disabled list
            o.disabled = $.map(
                $.grep( o.disabled, function(n, i) {
                    return n != index;
                }),
                function( n, i ) {
                    return n >= index ? --n : n;
                });
          this._tabify();
            this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
         
            return this;
        }
});

USAGE:
.tabs( “remove” , index, nextIndex )
Example:
$tabs.tab(“remove”, 2, 5); //This would remove tab at index 2 and then select tab at index 5

I hope it helps someone and I look forward to everyone’s feedback.

Also replicated on the jQuery Forum:
http://forum.jquery.com/topic/ui-tabs-remove-method-additional-option-to-select-sepecific-tab-after-removal

Advertisements

2 thoughts on “Option to select specific tab after removal in jQuery UI.TABS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s