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

[Otto]

Also worth noting is that for that stuff to work, the jquery-ui-tabs
script must be enqueued. For the Post editor, it's already there,
however it's not enqueued for the Page editor by default since it
doesn't have anything that uses tabs. So make sure to do a
wp_enqueue_script('jquery-ui-tabs'); somewhere and hook that to
admin-head when the page.php is called. I'm unsure of the right way to
hook that in there.

On Wed, Oct 1, 2008 at 9:17 AM, Edward Benson <eob at mit.edu> wrote:
> 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
>
> _______________________________________________
> wp-hackers mailing list
> wp-hackers at lists.automattic.com
> http://lists.automattic.com/mailman/listinfo/wp-hackers
>