Skip to content

Commit

Permalink
Tabs: Deprecate url method; use aria-controls instead of title to spe…
Browse files Browse the repository at this point in the history 
…cify panels. Fixes #7132 Tabs: Deprecate url method; use aria-controls instead of title to specify panels
  • Loading branch information
@petersendidit
petersendidit committed Mar 27, 2011
1 parent f6e7b6c commit 1e2d314
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 63 deletions.
3 changes: 2 additions & 1 deletion demos/tabs/ajax.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
var selector = $( anchor ).attr( "aria-controls" );
$( selector ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
Expand Down
24 changes: 24 additions & 0 deletions tests/unit/tabs/tabs_deprecated.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
(function( $ ) {

module("tabs (deprecated): core");

test( "#4581 - title attribute for remote tabs does not support foreign languages", function() {
expect( 1 );

$( "#tabs2" ).tabs({
selected: 3,
beforeload: function( event, ui ) {
event.preventDefault();
equal( ui.panel.id, "∫ßáö_Սե", "proper title" );
}
});
});

module("tabs (deprecated): options");

test('ajaxOptions', function() {
Expand Down Expand Up @@ -148,4 +162,14 @@ test('length', function() {
equals(el.tabs('length'), $('ul a', el).length, ' should return length');
});

test('url', function() {
el = $('#tabs2').tabs();
var tab = el.find('a:eq(3)'),
url = tab.attr('href');

el.tabs('url', 3, "data/test2.html");
equals(tab.attr('href'), 'data/test2.html', 'Url was updated');
tab.attr('href', url );
});

}( jQuery ) );
4 changes: 0 additions & 4 deletions tests/unit/tabs/tabs_methods.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,8 +191,4 @@ test('load', function() {
ok(false, "missing test - untested code is broken code.");
});

test('url', function() {
ok(false, "missing test - untested code is broken code.");
});

})(jQuery);
37 changes: 16 additions & 21 deletions tests/unit/tabs/tabs_tickets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,21 +42,29 @@ test('#3627 - Ajax tab with url containing a fragment identifier fails to load',
// http://dev.jqueryui.com/ticket/3627
expect(1);

el = $('#tabs2').tabs();

ok(/test.html$/.test( $('a:eq(2)', el).data('load.tabs') ), 'should ignore fragment identifier');

el = $('#tabs2').tabs({
selected: 2,
beforeload: function( event, ui ) {
event.preventDefault();
ok(/test.html$/.test( ui.settings.url ), 'should ignore fragment identifier');
}
});
});

test('#4033 - IE expands hash to full url and misinterprets tab as ajax', function() {
// http://dev.jqueryui.com/ticket/4033
expect(1);

el = $('<div><ul><li><a href="#tab">Tab</a></li></ul><div id="tab"></div></div>')
.appendTo('#main').tabs();
el = $('<div><ul><li><a href="#tab">Tab</a></li></ul><div id="tab"></div></div>');
el.appendTo('#main');
el.tabs({
beforeload: function( event, ui ) {
event.preventDefault();
ok( false, 'should not be an ajax tab');
}
});

equals($('a', el).data('load.tabs'), undefined, 'should not create ajax tab');

equals($('a', el).attr('aria-controls'), '#tab', 'aria-contorls attribute is correct');
});

test('#5893 - Sublist in the tab list are considered as tab', function() {
Expand All @@ -68,19 +76,6 @@ test('#5893 - Sublist in the tab list are considered as tab', function() {

});

asyncTest( "#4581 - title attribute for remote tabs does not support foreign languages", function() {
expect( 1 );

$( "#tabs2" ).tabs({
selected: 3,
load: function( event, ui ) {
equal( ui.panel.id, "∫ßáö_Սե", "proper title" );
start();
}
});
});


test('#6710 - selectors are global', function() {
// http://bugs.jqueryui.com/ticket/6710
expect(1);
Expand Down
87 changes: 50 additions & 37 deletions ui/jquery.ui.tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,15 +99,16 @@ $.widget( "ui.tabs", {
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 temp = self.element.find( self._sanitizeSelector( self.anchors[ o.selected ].hash ) )
.removeClass( "ui-tabs-hide" );
var tab = self.anchors[ o.selected ],
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" );

// seems to be expected behavior that the show callback is fired
self.element.queue( "tabs", function() {
self._trigger( "show", null,
self._ui( self.anchors[ o.selected ], self.element.find( self._sanitizeSelector( self.anchors[ o.selected ].hash ) )[ 0 ] ) );
self._trigger( "show", null, self._ui( tab, panel[ 0 ] ) );
});

this.load( o.selected );
Expand All @@ -133,7 +134,7 @@ $.widget( "ui.tabs", {
},

_tabId: function( a ) {
return a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF-]/g, "" ) ||
return ( $( a ).attr( "aria-controls" ) || "" ).replace( /^#/ , "" ) ||
this.options.idPrefix + getNextTabId();
},

Expand Down Expand Up @@ -165,7 +166,7 @@ $.widget( "ui.tabs", {

// Remove panels that we created that are missing their tab
this.element.find(".ui-tabs-panel:data(destroy.tabs)").each( function( index, panel ) {
var anchor = self.anchors.filter( "[href$='#" + panel.id + "']");
var anchor = self.anchors.filter( "[aria-controls='#" + panel.id + "']");
if ( !anchor.length ) {
$( panel ).remove();
}
Expand Down Expand Up @@ -224,14 +225,17 @@ $.widget( "ui.tabs", {
this.panels = $( [] );

this.anchors.each(function( i, a ) {
var href = $( a ).attr( "href" );
var href = $( a ).attr( "href" ),
hrefBase = href.split( "#" )[ 0 ],
selector,
panel,
baseEl;

// For dynamically created HTML that contains a hash as href IE < 8 expands
// such href to the full page url with hash and then misinterprets tab as ajax.
// Same consideration applies for an added tab with a fragment identifier
// since a[href=#fragment-identifier] does unexpectedly not match.
// Thus normalize href attribute...
var hrefBase = href.split( "#" )[ 0 ],
baseEl;
if ( hrefBase && ( hrefBase === location.toString().split( "#" )[ 0 ] ||
( baseEl = $( "base" )[ 0 ]) && hrefBase === baseEl.href ) ) {
href = a.hash;
Expand All @@ -240,32 +244,30 @@ $.widget( "ui.tabs", {

// inline tab
if ( fragmentId.test( href ) ) {
self.panels = self.panels.add( self.element.find( self._sanitizeSelector( href ) ) );
selector = href;
panel = self.element.find( self._sanitizeSelector( selector ) );
// remote tab
// prevent loading the page itself if href is just "#"
} else if ( href && href !== "#" ) {
// required for restore on destroy
$.data( a, "href.tabs", href );

// TODO until #3808 is fixed strip fragment identifier from url
// (IE fails to load from such url)
$.data( a, "load.tabs", href.replace( /#.*$/, "" ) );

var id = self._tabId( a );
a.href = "#" + id;
var $panel = self.element.find( "#" + id );
if ( !$panel.length ) {
$panel = $( self.options.panelTemplate )
selector = "#" + id;
panel = self.element.find( selector );
if ( !panel.length ) {
panel = $( self.options.panelTemplate )
.attr( "id", id )
.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
.data( "destroy.tabs", true )
.insertAfter( self.panels[ i - 1 ] || self.list );
$panel.data( "destroy.tabs", true );
}
self.panels = self.panels.add( $panel );
// invalid tab href
} else {
self.options.disabled.push( i );
}

if ( panel.length) {
self.panels = self.panels.add( panel );
}
$( a ).attr( "aria-controls", selector );
});
},

Expand Down Expand Up @@ -348,9 +350,9 @@ $.widget( "ui.tabs", {
var self = this,
o = this.options,
el = event.currentTarget,
$li = $(el).closest( "li" ),
$li = $( el ).closest( "li" ),
$hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
$show = self.element.find( self._sanitizeSelector( el.hash ) );
$show = self.element.find( self._sanitizeSelector( $( el ).attr( "aria-controls" ) ) );

// tab is already selected, but not collapsible
if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible ) ||
Expand Down Expand Up @@ -455,10 +457,6 @@ $.widget( "ui.tabs", {
this.list.removeClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" );

this.anchors.each(function() {
var href = $.data( this, "href.tabs" );
if ( href ) {
this.href = href;
}
var $this = $( this ).unbind( ".tabs" );
$.each( [ "href", "load" ], function( i, prefix ) {
$this.removeData( prefix + ".tabs" );
Expand Down Expand Up @@ -558,8 +556,11 @@ $.widget( "ui.tabs", {
var self = this,
o = this.options,
a = this.anchors.eq( index )[ 0 ],
url = $.data( a, "load.tabs" ),
eventData = self._ui( self.anchors[ index ], self.panels[ index ] );
panel = self.element.find( self._sanitizeSelector( $( a ).attr( "aria-controls" ) ) ),
// TODO until #3808 is fixed strip fragment identifier from url
// (IE fails to load from such url)
url = $( a ).attr( "href" ).replace( /#.*$/, "" ),
eventData = self._ui( a, panel[ 0 ] );

if ( this.xhr ) {
this.xhr.abort();
Expand All @@ -585,7 +586,7 @@ $.widget( "ui.tabs", {

this.xhr
.success( function( response ) {
self.element.find( self._sanitizeSelector( a.hash ) ).html( response );
panel.html( response );
})
.complete( function( jqXHR, status ) {
if ( status === "abort" ) {
Expand All @@ -609,13 +610,9 @@ $.widget( "ui.tabs", {
// last, so that load event is fired before show...
self.element.dequeue( "tabs" );

return this;
},

url: function( index, url ) {
this.anchors.eq( index ).data( "load.tabs", url );
return this;
}

});

$.extend( $.ui.tabs, {
Expand Down Expand Up @@ -861,6 +858,22 @@ if ( $.uiBackCompat !== false ) {
return this.anchors.length;
};
}( jQuery, jQuery.ui.tabs.prototype ) );

// url method
(function( $, prototype ) {
prototype.url = function( index, url ) {
this.anchors.eq( index ).attr( "href", url );
};
}( jQuery, jQuery.ui.tabs.prototype ) );

// _tabId method
(function( $, prototype ) {
var _tabId = prototype._tabId;
prototype._tabId = function( a ) {
return a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF-]/g, "" ) ||
_tabId.apply( this, arguments );
};
}( jQuery, jQuery.ui.tabs.prototype ) );
}

})( jQuery );

0 comments on commit 1e2d314

Please sign in to comment.