[wp-hackers] Adding tabbed entry panels to the Post/Page Edit Form

[Edward Benson]

Otto,

Fantastic!

> var categoryTabs = jQuery('#category-tabs').tabs();

was the magic piece I was missing -- thanks very much for such a quick  
and detailed reply.

-Ted

On Oct 1, 2008, at 10:00 AM, Otto wrote:

> Actually, all that extra code is special cases for the category
> handling and such. To make tabs there's only one line of javascript to
> do it:
> var categoryTabs = jQuery('#category-tabs').tabs();
>
> That's literally it. jQuery makes it easy.
>
> jQuery's tabs method basically takes the ID of a UL, and makes each LI
> element in it into those tabs. The LI elements contain A links to DIVs
> holding the content of the tabs, and the name of the links is used for
> the names of the tabs.
>
> Here's the category tabs UL:
> <ul id="category-tabs">
> 	<li class="ui-tabs-selected"><a href="#categories-all"
> tabindex="3"><?php _e( 'All Categories' ); ?></a></li>
> 	<li class="hide-if-no-js"><a href="#categories-pop"
> tabindex="3"><?php _e( 'Most Used' ); ?></a></li>
> </ul>
>
> As you can see, it has the LI's with the links in it, and those links
> name a couple of DIVs: #categories-all and #categories-pop. Here's
> those DIVs, right below that. Note how one of them defaults to
> "display:none", so that it doesn't show up. Only the default tab
> should show up, by default. The jQuery javascript manipulates the
> display setting to show the tabs as needed.
> <div id="categories-pop" class="ui-tabs-panel" style="display: none;">
> 	<ul id="categorychecklist-pop" class="categorychecklist form-no- 
> clear" >
> 		<?php $popular_ids = wp_popular_terms_checklist('category'); ?>
> 	</ul>
> </div>
>
> <div id="categories-all" class="ui-tabs-panel">
> 	<ul id="categorychecklist" class="list:category categorychecklist
> form-no-clear">
> 		<?php wp_category_checklist($post->ID, false, false,  
> $popular_ids) ?>
> 	</ul>
> </div>
>
> That is pretty much all there is to creating working Tabs.
>
>
>
> On Wed, Oct 1, 2008 at 8:35 AM, Edward Benson <eob at mit.edu> wrote:
>> Hi All,
>>
>> I'm writing a WP plugin that adds a new collapsible box of options  
>> to the
>> Post/Page entry forms. Within this box, I would like to have tabbed
>> sub-pages exactly like what you see in the "Categories" box right  
>> now (with
>> "All Categories" and "Most Used" being the two sub-pages of that  
>> box).
>>
>> It appears that the CSS & JavaScript code that supports the tabs in  
>> the
>> Categories box is hard-coded specifically for that box instead of
>> generalized for anyone who wants tabbed content in an  
>> administrative panel.
>> Is this true? Is there any way to re-use Wordpresses existing tab  
>> magic, or
>> do I have to duplicate the functionality with a second set of  
>> JavaScript?
>>
>> Thanks very much in advance,
>> Ted
>>
>> _______________________________________________
>> wp-hackers mailing list
>> wp-hackers at lists.automattic.com
>> http://lists.automattic.com/mailman/listinfo/wp-hackers
>>
> _______________________________________________
> wp-hackers mailing list
> wp-hackers at lists.automattic.com
> http://lists.automattic.com/mailman/listinfo/wp-hackers