Skip to main content

Search and Top Navigation

#9840 closed bug (wontfix)

Opened February 19, 2014 09:26PM UTC

Closed February 19, 2014 09:51PM UTC

Tabs on bottom code is almost right

Reported by: tlhackque Owned by:
Priority: minor Milestone: none
Component: ui.tabs Version: 1.10.4
Keywords: Cc:
Blocked by: Blocking:
Description

Thank you for https://jqueryui.com/tabs/#bottom - It was useful. But the example fails if you have more than one set of tabs on a page.

Here is code that does better:

$(function() {

$( '.tabs-bottom' ).tabs();

$( '.tabs-bottom.ui-tabs-nav, .ssWorkbook .ui-tabs-nav *' )

.removeClass( "ui-corner-all ui-corner-top" )

.addClass( "ui-corner-bottom" );

$(".tabs-bottom").each( function () {

$(this).find( ".ui-tabs-nav" ).appendTo( this );

return true;} );

});

Note that no IDs are required; this small script works for any number of tabbed areas on a page. (Of course, the tab panes and links still need DIVs, but that's usually on the server side.)

You'll also note that I changed the direct child selector to a descendent selector where the border classes are changed. This is necessary to ensure that the links get the necessary attributes for the CSS.

Enjoy.

P.S. I hope this is the right place - if not, feel free to move. (I jut followed the 'report a bug' link on the referenced page, so if I'm wrong, please make it point where you want reports.)

Attachments (0)
Change History (1)

Changed February 19, 2014 09:51PM UTC by scottgonzalez comment:1

resolution: → wontfix
status: newclosed

I think the current demo code is fine. Though I'd actually prefer to just remove the demo as it's bad for accessibility.