Opened 6 years ago

Closed 6 years ago

#9840 closed bug (wontfix)

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.)

Change History (1)

comment:1 Changed 6 years ago by Scott González

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.

Note: See TracTickets for help on using tickets.