Tab styling for UI Tabs

[aaroncampbell]

We include the jQuery UI tabs with the WP package now, but using to duplicate WP-style tabs requires some funky JS workarounds to add the wp-tab-active class to the tab instead of just the default ui-tabs-selected class. Since there's no way to specify what class is used for the selected tab, I suggest we simply add support for the ui-tabs-selected class in our stylesheets.

For those that need something sooner, you can use this to make your tabs use the default wp-admin styles:

jQuery(function($) {
	$( '.tabbed-content' ).tabs();
	$( '.tabbed-content' ).bind( 'tabsshow', function(event, ui) {
		$( '.wp-tab-active' ).removeClass( 'wp-tab-active' );
		$( '.ui-tabs-selected' ).addClass( 'wp-tab-active' );
	});
});

[aaroncampbell]

@helenyhou pointed out this is a dupe of #18909 so I moved the patch there.

[TobiasBg]

Just for reference:

$( '.tabbed-content' ).tabs( {
	select: function( event, ui ) {
		$( ui.tab ).parent().addClass( 'wp-tab-active' ).siblings().removeClass( 'wp-tab-active' );
	}
} );

worked for me in a quick test (on the HTML that aaroncampell posted in #18909:45) and might be cleaner with jQuery selectors (e.g. if there is more than one "tabs()" on a page).

[aaroncampbell]

I think it makes sense to keep discussion on the open ticket. The main issue is that fixing the CSS makes for much less overhead than adding JS to fix it.

[TobiasBg]

I totally agree, which is why I posted the JS here, so that it stands next to the JS you posted (in case someone needs a JS solution), and to not clutter the more CSS related ticket :-)

[azaozz]

I've never liked UI tabs, imho it's super bloated: jquery.ui.tabs.min.js is 12KB minified however 99% of the useful functionality can be achieved with exactly 4 lines of JS...

Yes, it was included as part of the full UI package but would discourage anybody from using it.

[aaroncampbell]

Replying to azaozz:

Yes, it was included as part of the full UI package but would discourage anybody from using it.

So much so that we shouldn't add the one single classname (with no new styles) to the default stylesheets?

[azaozz]

Replying to aaroncampbell:

So much so that we shouldn't add the one single classname...

Well, if that would mean adding support for UI tabs... If we do that the next ticket(s) are going to be: "UI Tabs don't work on ... screen. Fix it!" and "Use UI Tabs on all screens...", etc.

Would rather extend or improve the current JS that switches tabs, even make a basic tab switching API with properly delegated JS events, etc.

The basic tab switching from JS is very simple. The HTML:

<a class="tabswitch" data-tab-id="tabid1" data-tab-class="common-for-all-tabs">Tab One</a>
<a class="tabswitch" data-tab-id="tabid2" data-tab-class="common-for-all-tabs">Tab Two</a>
.....
<div id="tabid1" class="common-for-all-tabs">... tab content ...</div>
<div id="tabid2" class="common-for-all-tabs">... tab content ...</div>

and the JS:

jQuery('body').bind('click.tabswitch', function(e){
  var $ = jQuery, target = $(e.target);

  if ( target.hasClass('tabswitch') ) {
    $( '.' + target.data('tab-class') ).hide().filter( '#' + target.data('tab-id') ).show();
    e.preventDefault();
  }
});