Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Tabs: Ticket #4386 Fix enable and disable methods when index is undefined. #162

Merged
merged 1 commit into from

2 participants

@petersendidit
Collaborator

.tabs("disable") and .tabs("enable") doesn't work. This change fixes the 2 methods so that when index is undefined it disables/enables all tabs (expect for the current selected tab).

It also sets option.disabled to true/false when the tabs are fully enabled/disabled.

And per decision with Scott (and forum post http://forum.jquery.com/topic/tabs-api-redesign#14737000002089057) you can disabled the selected tab now.

Also added some tests for this.

http://bugs.jqueryui.com/ticket/4386

@petersendidit petersendidit Tabs: Fix disable and enable methods to correctly handle when index i…
…s undefined. Use boolean when fully enabled/disabled. Allow selected tab to be disabled.Fixes #4386
710d762
@scottgonzalez scottgonzalez merged commit 710d762 into from
@scottgonzalez

Thanks, merged into master.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 21, 2011
  1. @petersendidit

    Tabs: Fix disable and enable methods to correctly handle when index i…

    petersendidit authored
    …s undefined. Use boolean when fully enabled/disabled. Allow selected tab to be disabled.Fixes #4386
This page is out of date. Refresh to see the latest.
View
2  tests/unit/tabs/tabs_defaults.js
@@ -9,7 +9,7 @@ var tabs_defaults = {
collapsible: false,
cookie: null,
disable: null,
- disabled: [],
+ disabled: false,
enable: null,
event: "click",
fx: null,
View
46 tests/unit/tabs/tabs_methods.js
@@ -73,16 +73,32 @@ test('destroy', function() {
});
test('enable', function() {
- expect(2);
+ expect(8);
el = $('#tabs1').tabs({ disabled: [ 0, 1 ] });
el.tabs("enable", 1);
ok( $('li:eq(1)', el).is(':not(.ui-state-disabled)'), 'remove class from li');
- same(el.tabs('option', 'disabled'), [ ], 'update property');
+ same(el.tabs('option', 'disabled'), [ 0 ], 'update property');
+
+ // enable all tabs
+ el.tabs({ disabled: [ 0, 1 ] });
+ el.tabs("enable");
+ ok( !$('li.ui-state-disabled', el).length, 'enable all');
+ same(el.tabs('option', 'disabled'), false, 'update property');
+
+ el.tabs('destroy');
+ // enable all tabs one by one
+ el.tabs({ disabled: [ 1, 2 ] });
+ el.tabs("enable", 1);
+ ok( $('li:eq(1)', el).is(':not(.ui-state-disabled)'), 'remove class from li');
+ same(el.tabs('option', 'disabled'), [ 2 ], 'update property');
+ el.tabs("enable", 2);
+ ok( $('li:eq(2)', el).is(':not(.ui-state-disabled)'), 'remove class from li');
+ same( el.tabs('option', 'disabled'), false, 'set to false');
});
test('disable', function() {
- expect(4);
+ expect(12);
// normal
el = $('#tabs1').tabs();
@@ -90,10 +106,28 @@ test('disable', function() {
ok( $('li:eq(1)', el).is('.ui-state-disabled'), 'add class to li');
same(el.tabs('option', 'disabled'), [ 1 ], 'update disabled property');
- // attempt to disable selected has no effect
+ // disable selected
el.tabs('disable', 0);
- ok( $('li:eq(0)', el).is(':not(.ui-state-disabled)'), 'not add class to li');
- same(el.tabs('option', 'disabled'), [ 1 ], 'not update property');
+ ok( $('li:eq(0)', el).is('.ui-state-disabled'), 'add class to selected li');
+ same(el.tabs('option', 'disabled'), [ 0, 1 ], 'update disabled property');
+
+ // disable all tabs
+ el.tabs('disable');
+ same( $('li.ui-state-disabled', el).length, 3, 'disable all');
+ same(el.tabs('option', 'disabled'), true, 'set to true');
+
+ el.tabs("destroy");
+ // disable all tabs one by one
+ el.tabs();
+ el.tabs('disable', 0);
+ ok( $('li:eq(0)', el).is('.ui-state-disabled'), 'add class to li');
+ same(el.tabs('option', 'disabled'), [ 0 ], 'update disabled property');
+ el.tabs('disable', 1);
+ ok( $('li:eq(1)', el).is('.ui-state-disabled'), 'add class to li');
+ same(el.tabs('option', 'disabled'), [ 0, 1 ], 'update disabled property');
+ el.tabs('disable', 2);
+ ok( $('li:eq(2)', el).is('.ui-state-disabled'), 'add class to li');
+ same(el.tabs('option', 'disabled'), true, 'set to true');
});
test('add', function() {
View
7 tests/unit/tabs/tabs_options.js
@@ -67,17 +67,16 @@ test('disabled', function() {
expect(4);
el = $('#tabs1').tabs();
- same(el.tabs('option', 'disabled'), [ ], "should not disable any tab by default");
+ same(el.tabs('option', 'disabled'), false, "should not disable any tab by default");
el.tabs('option', 'disabled', [ 1 ]);
same(el.tabs('option', 'disabled'), [ 1 ], "should set property"); // everything else is being tested in methods module...
- // FIXME bug... property needs to be [ 1 ], since selected tab cannot be disabled!
el.tabs('option', 'disabled', [ 0, 1 ]);
- same(el.tabs('option', 'disabled'), [ 1 ], "should disable given tabs but not selected one"); // ...
+ same(el.tabs('option', 'disabled'), [ 0, 1 ], "should disable given tabs, even selected one"); // ...
el.tabs('option', 'disabled', [ ]);
- same(el.tabs('option', 'disabled'), [ ], "should not disable any tab"); // ...
+ same(el.tabs('option', 'disabled'), false, "should not disable any tab"); // ...
});
test('event', function() {
View
62 ui/jquery.ui.tabs.js
@@ -32,7 +32,7 @@ $.widget( "ui.tabs", {
cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
collapsible: false,
disable: null,
- disabled: [],
+ disabled: false,
enable: null,
event: "click",
fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }
@@ -194,15 +194,12 @@ $.widget( "ui.tabs", {
// Take disabling tabs via class attribute from HTML
// into account and update option properly.
- // A selected tab cannot become disabled.
- o.disabled = $.unique( o.disabled.concat(
- $.map( this.lis.filter( ".ui-state-disabled" ), function( n, i ) {
- return self.lis.index( n );
- })
- ) ).sort();
-
- if ( $.inArray( o.selected, o.disabled ) != -1 ) {
- o.disabled.splice( $.inArray( o.selected, o.disabled ), 1 );
+ if ( $.isArray( o.disabled ) ) {
+ o.disabled = $.unique( o.disabled.concat(
+ $.map( this.lis.filter( ".ui-state-disabled" ), function( n, i ) {
+ return self.lis.index( n );
+ })
+ ) ).sort();
}
// highlight selected tab
@@ -233,6 +230,10 @@ $.widget( "ui.tabs", {
o.selected = this.lis.index( this.lis.filter( ".ui-tabs-selected" ) );
}
+ if ( !o.disabled.length ) {
+ o.disabled = false;
+ }
+
this.element.toggleClass( "ui-tabs-collapsible", o.collapsible );
// set or update cookie after init and add/remove respectively
@@ -242,8 +243,7 @@ $.widget( "ui.tabs", {
// disable tabs
for ( var i = 0, li; ( li = this.lis[ i ] ); i++ ) {
- $( li ).toggleClass( "ui-state-disabled",
- $.inArray( i, o.disabled ) != -1 && !$( li ).hasClass( "ui-tabs-selected" ) );
+ $( li ).toggleClass( "ui-state-disabled", $.inArray( i, o.disabled ) != -1 );
}
// reset cache if switching from cached to not cached
@@ -533,30 +533,50 @@ $.widget( "ui.tabs", {
},
enable: function( index ) {
+ if ( index === undefined ) {
+ for ( var i = 0, len = this.lis.length; i < len; i++ ) {
+ this.enable( i );
+ }
+ return this;
+ }
index = this._getIndex( index );
var o = this.options;
- if ( $.inArray( index, o.disabled ) == -1 ) {
+ if ( !o.disabled || ($.isArray( o.disabled ) && $.inArray( index, o.disabled ) == -1 ) ) {
return;
}
this.lis.eq( index ).removeClass( "ui-state-disabled" );
- o.disabled = $.grep( o.disabled, function( n, i ) {
- return n != index;
- });
+ o.disabled = this.lis.map( function( i ) {
+ return $(this).is( ".ui-state-disabled" ) ? i : null;
+ }).get();
+
+ if ( !o.disabled.length ) {
+ o.disabled = false;
+ }
this._trigger( "enable", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
return this;
},
disable: function( index ) {
+ if ( index === undefined ) {
+ for ( var i = 0, len = this.lis.length; i < len; i++ ) {
+ this.disable( i );
+ }
+ return this;
+ }
index = this._getIndex( index );
- var self = this, o = this.options;
- // cannot disable already selected tab
- if ( index != o.selected ) {
+ var o = this.options;
+ if ( !o.disabled || ($.isArray( o.disabled ) && $.inArray( index, o.disabled ) == -1 ) ) {
this.lis.eq( index ).addClass( "ui-state-disabled" );
- o.disabled.push( index );
- o.disabled.sort();
+ o.disabled = this.lis.map( function( i ) {
+ return $(this).is( ".ui-state-disabled" ) ? i : null;
+ }).get();
+
+ if ( o.disabled.length === this.anchors.length ) {
+ o.disabled = true;
+ }
this._trigger( "disable", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
}
Something went wrong with that request. Please try again.