WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#20035 closed defect (bug) (duplicate)

Tab styling for UI Tabs

Reported by: aaroncampbell Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.3
Component: General Keywords:
Focuses: Cc:

Description

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' );
	});
});

Attachments (1)

20035.diff (2.1 KB) - added by aaroncampbell 4 years ago.

Download all attachments as: .zip

Change History (8)

@aaroncampbell4 years ago

comment:1 @aaroncampbell4 years ago

  • Keywords has-patch removed
  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

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

comment:2 @TobiasBg4 years ago

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

comment:3 @aaroncampbell4 years ago

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.

comment:4 @TobiasBg4 years ago

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

comment:5 follow-up: @azaozz4 years ago

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.

comment:6 in reply to: ↑ 5 ; follow-up: @aaroncampbell4 years ago

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?

comment:7 in reply to: ↑ 6 @azaozz4 years ago

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();
  }
});
Note: See TracTickets for help on using tickets.