Tabs: Style updates

Ref #14246
This commit is contained in:
Alexander Schmitz 2015-08-24 08:57:25 -04:00
parent a0892eca70
commit 6c0bb24918
7 changed files with 202 additions and 164 deletions

View File

@ -253,6 +253,7 @@ test( "beforeLoad", function() {
} );
element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 3 ).trigger( "click" );
state( element, 0, 0, 0, 1, 0 );
// .toLowerCase() is needed to convert <P> to <p> in old IEs
equal( panel.html().toLowerCase(), "<p>testing</p>", "panel html after" );
} );
@ -281,6 +282,7 @@ asyncTest( "load", function() {
element.tabs( { active: 2 } );
function tabsload1() {
// .option()
element.one( "tabsload", function( event, ui ) {
tab = element.find( ".ui-tabs-nav li" ).eq( 3 );
@ -300,6 +302,7 @@ asyncTest( "load", function() {
}
function tabsload2() {
// click, change panel content
element.one( "tabsload", function( event, ui ) {
tab = element.find( ".ui-tabs-nav li" ).eq( 4 );

View File

@ -36,6 +36,7 @@ return $.extend( helper, {
if ( !tabIsDisabled && $.inArray( index, internalState ) === -1 ) {
return 0;
}
// mixed state - invalid
return -1;
} ).get();

View File

@ -55,15 +55,19 @@ test( "enable( index )", function() {
var element = $( "#tabs1" ).tabs( { disabled: true } );
disabled( element, true );
// fully disabled -> partially disabled
element.tabs( "enable", 1 );
disabled( element, [ 0, 2 ] );
// partially disabled -> partially disabled
element.tabs( "enable", 2 );
disabled( element, [ 0 ] );
// already enabled tab, no change
element.tabs( "enable", 2 );
disabled( element, [ 0 ] );
// partially disabled -> fully enabled
element.tabs( "enable", 0 );
disabled( element, false );
@ -89,15 +93,19 @@ test( "disable( index )", function() {
var element = $( "#tabs1" ).tabs( { disabled: false } );
disabled( element, false );
// fully enabled -> partially disabled
element.tabs( "disable", 1 );
disabled( element, [ 1 ] );
// partially disabled -> partially disabled
element.tabs( "disable", 2 );
disabled( element, [ 1, 2 ] );
// already disabled tab, no change
element.tabs( "disable", 2 );
disabled( element, [ 1, 2 ] );
// partially disabled -> fully disabled
element.tabs( "disable", 0 );
disabled( element, true );
@ -212,6 +220,7 @@ asyncTest( "load", function() {
state( element, 1, 0, 0, 0, 0 );
} );
element.one( "tabsload", function( event, ui ) {
// TODO: remove wrapping in 2.0
var uiTab = $( ui.tab ),
uiPanel = $( ui.panel ),
@ -232,6 +241,7 @@ asyncTest( "load", function() {
state( element, 1, 0, 0, 0, 0 );
function tabsload1() {
// no need to test details of event (tested in events tests)
element.one( "tabsbeforeload", function() {
ok( true, "tabsbeforeload invoked" );
@ -245,6 +255,7 @@ asyncTest( "load", function() {
}
function tabsload2() {
// reload content of active tab
element.one( "tabsbeforeload", function( event, ui ) {
var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
@ -259,6 +270,7 @@ asyncTest( "load", function() {
state( element, 0, 0, 0, 1, 0 );
} );
element.one( "tabsload", function( event, ui ) {
// TODO: remove wrapping in 2.0
var uiTab = $( ui.tab ),
uiPanel = $( ui.panel ),

View File

@ -123,6 +123,7 @@ $.widget( "ui.tabs", {
locationHash = location.hash.substring( 1 );
if ( active === null ) {
// check the fragment identifier in the URL
if ( locationHash ) {
this.tabs.each( function( i, tab ) {
@ -193,15 +194,18 @@ $.widget( "ui.tabs", {
selectedIndex = 0;
break;
case $.ui.keyCode.SPACE:
// Activate only, no collapsing
event.preventDefault();
clearTimeout( this.activating );
this._activate( selectedIndex );
return;
case $.ui.keyCode.ENTER:
// Toggle (cancel delayed activation, allow collapsing)
event.preventDefault();
clearTimeout( this.activating );
// Determine if we should collapse or activate
this._activate( selectedIndex === this.options.active ? false : selectedIndex );
return;
@ -281,12 +285,14 @@ $.widget( "ui.tabs", {
_setOption: function( key, value ) {
if ( key === "active" ) {
// _activate() will handle invalid values and update this.options
this._activate( value );
return;
}
if ( key === "disabled" ) {
// don't use the widget factory's disabled handling
this._setupDisabled( value );
return;
@ -332,18 +338,23 @@ $.widget( "ui.tabs", {
if ( options.active === false || !this.anchors.length ) {
options.active = false;
this.active = $();
// was active, but active tab is gone
} else if ( this.active.length && !$.contains( this.tablist[ 0 ], this.active[ 0 ] ) ) {
// all remaining tabs are disabled
if ( this.tabs.length === options.disabled.length ) {
options.active = false;
this.active = $();
// activate previous tab
} else {
this._activate( this._findNextTab( Math.max( 0, options.active - 1 ), false ) );
}
// was active, active tab still exists
} else {
// make sure active index is correct
options.active = this.tabs.index( this.active );
}
@ -445,8 +456,10 @@ $.widget( "ui.tabs", {
selector = anchor.hash;
panelId = selector.substring( 1 );
panel = that.element.find( that._sanitizeSelector( selector ) );
// remote tab
} else {
// If the tab doesn't already have aria-controls,
// generate an id by using a throw-away element
panelId = tab.attr( "aria-controls" ) || $( {} ).uniqueId()[ 0 ].id;
@ -529,6 +542,7 @@ $.widget( "ui.tabs", {
}
this._off( this.anchors.add( this.tabs ).add( this.panels ) );
// Always prevent the default action, even when disabled
this._on( true, this.anchors, {
click: function( event ) {
@ -597,12 +611,16 @@ $.widget( "ui.tabs", {
event.preventDefault();
if ( tab.hasClass( "ui-state-disabled" ) ||
// tab is already loading
tab.hasClass( "ui-tabs-loading" ) ||
// can't switch durning an animation
this.running ||
// click on active header, but not collapsible
( clickedIsActive && !options.collapsible ) ||
// allow canceling activation
( this._trigger( "beforeActivate", event, eventData ) === false ) ) {
return;
@ -668,6 +686,7 @@ $.widget( "ui.tabs", {
"aria-selected": "false",
"aria-expanded": "false"
} );
// If we're switching tabs, remove the old tab from the tab order.
// If we're opening from collapsed state, remove the previous tab from the tab order.
// If we're collapsing, then keep the collapsing tab in the tab order.
@ -715,6 +734,7 @@ $.widget( "ui.tabs", {
},
_getIndex: function( index ) {
// meta-function to give users option to provide a href string instead of a numerical index.
if ( typeof index === "string" ) {
index = this.anchors.index( this.anchors.filter( "[href$='" + $.ui.escapeSelector( index ) + "']" ) );
@ -848,6 +868,7 @@ $.widget( "ui.tabs", {
this.xhr
.done( function( response, status, jqXHR ) {
// support: jQuery <1.8
// http://bugs.jquery.com/ticket/11778
setTimeout( function() {
@ -858,6 +879,7 @@ $.widget( "ui.tabs", {
}, 1 );
} )
.fail( function( jqXHR, status ) {
// support: jQuery <1.8
// http://bugs.jquery.com/ticket/11778
setTimeout( function() {