[wp-trac] [WordPress Trac] #20035: Tab styling for UI Tabs

[WordPress Trac]

#20035: Tab styling for UI Tabs
---------------------------+------------------------
 Reporter:  aaroncampbell  |       Owner:
     Type:  defect (bug)   |      Status:  closed
 Priority:  normal         |   Milestone:
Component:  General        |     Version:  3.3
 Severity:  normal         |  Resolution:  duplicate
 Keywords:                 |
---------------------------+------------------------

Comment (by azaozz):

 Replying to [comment:6 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();
   }
 });
 }}}

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/20035#comment:7>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software