library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tabs: Rename selected option to active. Fixes #7135 Tabs: Rename selected option to active

Browse Source
This commit is contained in:
David Petersen 2011-03-27 16:37:43 -04:00
parent c363019590
commit 9a00fd4c5e
6 changed files with 136 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
tests/unit/tabs/tabs_deprecated.js
View File

@ -65,6 +65,55 @@ test('spinner', function() {
});
});
test('selected', function() {
expect(11);
el = $('#tabs1').tabs();
equals(el.tabs('option', 'selected'), 0, 'should be 0 by default');
el.tabs('destroy');
//set a hash in the url
location.hash = '#fragment-2';
//selection of tab with divs ordered differently than list
el = $('#tabs1').tabs();
equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');
el.tabs('destroy');
//set a hash in the url
location.hash = '#tabs7-2';
//selection of tab with divs ordered differently than list
el = $('#tabs7').tabs();
equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');
el.tabs('destroy');
el = $('#tabs1').tabs({ selected: -1 });
equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected');
equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be selected' );
equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
el.tabs('destroy');
el.tabs({ selected: null });
equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected with value null (deprecated)');
el.tabs('destroy');
el.tabs({ selected: 1 });
equals(el.tabs('option', 'selected'), 1, 'should be specified tab');
el.tabs('destroy');
el.tabs({ selected: 99 });
equals(el.tabs('option', 'selected'), 0, 'selected should default to zero if given value is out of index');
el.tabs('destroy');
el.tabs({ collapsible: true });
el.tabs('option', 'selected', 0);
equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected');
el.tabs('destroy');
el = $('#tabs1').tabs();
el.tabs('select', 1);
equals(el.tabs('option', 'selected'), 1, 'should select tab');
});
module("tabs (deprecated): events");
test('enable', function() {

2
tests/unit/tabs/tabs_events.js
View File

@ -32,7 +32,7 @@ test('beforeload', function() {
el = $('#tabs2');
el.tabs({
selected: 2,
active: 2,
beforeload: function( event, ui ) {
ok( $.isFunction( ui.jqXHR.promise ), 'contain jqXHR object');
equals( ui.settings.url, "data/test.html", 'contain ajax settings url');

24
tests/unit/tabs/tabs_methods.js
View File

@ -16,7 +16,7 @@ test('init', function() {
ok( $('div:eq(0)', el).is('.ui-tabs-panel.ui-widget-content.ui-corner-bottom'), 'attach classes to panel' );
ok( $('li:eq(0)', el).is('.ui-tabs-selected.ui-state-active.ui-corner-top'), 'attach classes to active li');
ok( $('li:eq(1)', el).is('.ui-state-default.ui-corner-top'), 'attach classes to inactive li');
equals( el.tabs('option', 'selected'), 0, 'selected option set' );
equals( el.tabs('option', 'active'), 0, 'active option set' );
equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 0, 'second tab active');
equals( $('div', el).index( $('div.ui-tabs-hide', '#tabs1') ), 1, 'second panel should be hidden' );
});
@ -30,7 +30,7 @@ test('init with hash', function() {
//selection of tab with divs ordered differently than list
el = $('#tabs1').tabs();
equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');
equals(el.tabs('option', 'active'), 1, 'second tab should be active');
ok(!$('#tabs1 ul li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active');
ok($('#tabs1 div:eq(0)').is('.ui-tabs-hide'), 'first div for first tab should be hidden');
@ -48,7 +48,7 @@ test('init mismatched order with hash', function() {
//selection of tab with divs ordered differently than list
el = $('#tabs7').tabs();
equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');
equals(el.tabs('option', 'active'), 1, 'second tab should be active');
ok(!$('#tabs7-list li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active');
ok($('#tabs7 div:eq(1)').is('.ui-tabs-hide'), 'second div for first tab should be hidden');
@ -136,27 +136,27 @@ test('select', function() {
el = $('#tabs1').tabs();
el.tabs('select', 1);
equals(el.tabs('option', 'selected'), 1, 'should select tab');
equals(el.tabs('option', 'active'), 1, 'should select tab');
el.tabs('destroy');
el.tabs({ collapsible: true });
el.tabs('select', 0);
equals(el.tabs('option', 'selected'), -1, 'should collapse tab passing in the already selected tab');
equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab');
el.tabs('destroy');
el.tabs({ collapsible: true });
el.tabs('select', -1);
equals(el.tabs('option', 'selected'), -1, 'should collapse tab passing in -1');
equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1');
el.tabs('destroy');
el.tabs();
el.tabs('select', 0);
equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if collapsible is not set to true');
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
el.tabs('select', -1);
equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if collapsible is not set to true');
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
el.tabs('select', '#fragment-2');
equals(el.tabs('option', 'selected'), 1, 'should select tab by id');
equals(el.tabs('option', 'active'), 1, 'should select tab by id');
});
test('refresh', function() {
@ -165,7 +165,7 @@ test('refresh', function() {
var el = $('<div id="tabs"><ul></ul></div>').tabs(),
ul = el.find('ul');
equals(el.tabs('option', 'selected'), -1, 'Initially empty, no selected tab');
equals(el.tabs('option', 'active'), -1, 'Initially empty, no active tab');
ul.append('<li><a href="data/test.html">Test 1</a></li>');
el.tabs('refresh');
@ -179,12 +179,12 @@ test('refresh', function() {
$('<div id="test1">Test Panel 1</div>').insertAfter( ul );
el.tabs('refresh');
el.tabs('select', 0);
equals( el.tabs('option', 'selected'), 0, 'First tab added should be auto selected');
equals( el.tabs('option', 'active'), 0, 'First tab added should be auto active');
ul.append('<li><a href="#test2">Test 2</a></li>');
$('<div id="test2">Test Panel 2</div>').insertAfter( ul );
el.tabs('refresh');
equals( el.tabs('option', 'selected'), 0, 'Second tab added should not be auto selected');
equals( el.tabs('option', 'active'), 0, 'Second tab added should not be auto active');
});
test('load', function() {

30
tests/unit/tabs/tabs_options.js
View File

@ -34,8 +34,8 @@ test('cookie', function() {
equals(cookie(), 0, 'initial cookie value');
el.tabs('destroy');
el.tabs({ selected: 1, cookie: cookieObj });
equals(cookie(), 1, 'initial cookie value, from selected property');
el.tabs({ active: 1, cookie: cookieObj });
equals(cookie(), 1, 'initial cookie value, from active property');
el.tabs('select', 2);
equals(cookie(), 2, 'cookie value updated after select');
@ -79,34 +79,34 @@ test('fx', function() {
ok(false, "missing test - untested code is broken code.");
});
test('selected', function() {
test('active', function() {
expect(8);
el = $('#tabs1').tabs();
equals(el.tabs('option', 'selected'), 0, 'should be 0 by default');
equals(el.tabs('option', 'active'), 0, 'should be 0 by default');
el.tabs('destroy');
el.tabs({ selected: -1 });
equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected');
equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be selected' );
el.tabs({ active: -1 });
equals(el.tabs('option', 'active'), -1, 'should be -1 for all tabs deactive');
equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be active' );
equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
el.tabs('destroy');
el.tabs({ selected: null });
equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected with value null (deprecated)');
el.tabs({ active: null });
equals(el.tabs('option', 'active'), -1, 'should be -1 for all tabs deactive with value null (deprecated)');
el.tabs('destroy');
el.tabs({ selected: 1 });
equals(el.tabs('option', 'selected'), 1, 'should be specified tab');
el.tabs({ active: 1 });
equals(el.tabs('option', 'active'), 1, 'should be specified tab');
el.tabs('destroy');
el.tabs({ selected: 99 });
equals(el.tabs('option', 'selected'), 0, 'selected should default to zero if given value is out of index');
el.tabs({ active: 99 });
equals(el.tabs('option', 'active'), 0, 'active should default to zero if given value is out of index');
el.tabs('destroy');
el.tabs({ collapsible: true });
el.tabs('option', 'selected', 0);
equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected');
el.tabs('option', 'active', 0);
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if value is same as active');
});
})(jQuery);

2
tests/unit/tabs/tabs_tickets.js
View File

@ -43,7 +43,7 @@ test('#3627 - Ajax tab with url containing a fragment identifier fails to load',
expect(1);
el = $('#tabs2').tabs({
selected: 2,
active: 2,
beforeload: function( event, ui ) {
event.preventDefault();
ok(/test.html$/.test( ui.settings.url ), 'should ignore fragment identifier');

84
ui/jquery.ui.tabs.js vendored
View File

@ -52,29 +52,29 @@ $.widget( "ui.tabs", {
// 1. from fragment identifier in url
// 2. from cookie
// 3. from selected class attribute on <li>
if ( o.selected === undefined ) {
if ( o.active === undefined ) {
if ( location.hash ) {
this.anchors.each(function( i, a ) {
if ( a.hash == location.hash ) {
o.selected = i;
o.active = i;
return false;
}
});
}
if ( typeof o.selected !== "number" && o.cookie ) {
o.selected = parseInt( self._cookie(), 10 );
if ( typeof o.active !== "number" && o.cookie ) {
o.active = parseInt( self._cookie(), 10 );
}
if ( typeof o.selected !== "number" && this.lis.filter( ".ui-tabs-selected" ).length ) {
o.selected = this.lis.index( this.lis.filter( ".ui-tabs-selected" ) );
if ( typeof o.active !== "number" && this.lis.filter( ".ui-tabs-selected" ).length ) {
o.active = this.lis.index( this.lis.filter( ".ui-tabs-selected" ) );
}
o.selected = o.selected || ( this.lis.length ? 0 : -1 );
} else if ( o.selected === null ) { // usage of null is deprecated, TODO remove in next release
o.selected = -1;
o.active = o.active || ( this.lis.length ? 0 : -1 );
} else if ( o.active === null ) { // usage of null is deprecated, TODO remove in next release
o.active = -1;
}
// sanity check - default to first tab...
o.selected = ( ( o.selected >= 0 && this.anchors[ o.selected ] ) || o.selected < 0 )
? o.selected
o.active = ( ( o.active >= 0 && this.anchors[ o.active ] ) || o.active < 0 )
? o.active
: 0;
// Take disabling tabs via class attribute from HTML
@ -95,20 +95,20 @@ $.widget( "ui.tabs", {
this.panels.addClass( "ui-tabs-hide" );
this.lis.removeClass( "ui-tabs-selected ui-state-active" );
// check for length avoids error when initializing empty list
if ( o.selected >= 0 && this.anchors.length ) {
var tab = self.anchors[ o.selected ],
if ( o.active >= 0 && this.anchors.length ) {
var tab = self.anchors[ o.active ],
panel = self.element.find( self._sanitizeSelector( $( tab ).attr( "aria-controls" ) ) );
panel.removeClass( "ui-tabs-hide" );
this.lis.eq( o.selected ).addClass( "ui-tabs-selected ui-state-active" );
this.lis.eq( o.active ).addClass( "ui-tabs-selected ui-state-active" );
// seems to be expected behavior that the show callback is fired
self.element.queue( "tabs", function() {
self._trigger( "show", null, self._ui( tab, panel[ 0 ] ) );
});
this.load( o.selected );
this.load( o.active );
}
// clean up to avoid memory leaks in certain versions of IE 6
@ -119,8 +119,8 @@ $.widget( "ui.tabs", {
},
_setOption: function( key, value ) {
if ( key == "selected" ) {
if (this.options.collapsible && value == this.options.selected ) {
if ( key == "active" ) {
if (this.options.collapsible && value == this.options.active ) {
return;
}
this.select( value );
@ -192,7 +192,7 @@ $.widget( "ui.tabs", {
// set or update cookie after init and add/remove respectively
if ( o.cookie ) {
this._cookie( o.selected, o.cookie );
this._cookie( o.active, o.cookie );
}
// disable tabs
@ -369,7 +369,7 @@ $.widget( "ui.tabs", {
return;
}
o.selected = self.anchors.index( el );
o.active = self.anchors.index( el );
if ( self.xhr ) {
self.xhr.abort();
@ -378,10 +378,10 @@ $.widget( "ui.tabs", {
// if tab may be closed
if ( o.collapsible ) {
if ( $li.hasClass( "ui-tabs-selected" ) ) {
o.selected = -1;
o.active = -1;
if ( o.cookie ) {
self._cookie( o.selected, o.cookie );
self._cookie( o.active, o.cookie );
}
self.element.queue( "tabs", function() {
@ -392,7 +392,7 @@ $.widget( "ui.tabs", {
return;
} else if ( !$hide.length ) {
if ( o.cookie ) {
self._cookie( o.selected, o.cookie );
self._cookie( o.active, o.cookie );
}
self.element.queue( "tabs", function() {
@ -408,7 +408,7 @@ $.widget( "ui.tabs", {
}
if ( o.cookie ) {
self._cookie( o.selected, o.cookie );
self._cookie( o.active, o.cookie );
}
// show new tab
@ -542,8 +542,8 @@ $.widget( "ui.tabs", {
select: function( index ) {
index = this._getIndex( index );
if ( index == -1 ) {
if ( this.options.collapsible && this.options.selected != -1 ) {
index = this.options.selected;
if ( this.options.collapsible && this.options.active != -1 ) {
index = this.options.active;
} else {
return this;
}
@ -811,7 +811,7 @@ if ( $.uiBackCompat !== false ) {
this.refresh();
if ( this.anchors.length == 1 ) {
o.selected = 0;
o.active = o.selected = 0;
$li.addClass( "ui-tabs-selected ui-state-active" );
$panel.removeClass( "ui-tabs-hide" );
this.element.queue( "tabs", function() {
@ -894,6 +894,38 @@ if ( $.uiBackCompat !== false ) {
.data( "destroy.tabs", true );
};
}( jQuery, jQuery.ui.tabs.prototype ) );
// selected option
(function( $, prototype ) {
var _create = prototype._create,
_setOption = prototype._setOption,
_eventHandler = prototype._eventHandler;
prototype._create = function() {
var options = this.options;
if ( options.active === undefined && options.selected !== undefined ) {
options.active = options.selected;
}
_create.call( this );
options.selected = options.active;
};
prototype._setOption = function( key, value ) {
var options = this.options;
if ( key === "selected" ) {
key = "active";
}
_setOption.apply( this, arguments );
if ( key === "active" ) {
options.selected = options.active ;
}
};
prototype._eventHandler = function( event ) {
_eventHandler.apply( this, arguments );
this.options.selected = this.options.active ;
};
}( jQuery, jQuery.ui.tabs.prototype ) );
}
})( jQuery );