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

[Otto]

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
>