I've done something similar and, while it works, it took a bit of
head-scratching to get things working properly. The biggest thing was
ensuring that newly-loaded content was "initialised" on load.
The admin page contains:
<div id="members_administration"></div>
<div id="contact_members"></div>
<div id="posts_administration"></div>
<div id="newsletter_administration"></div>
<div id="events_administration"></div>
<div id="jobs_administration"></div>
<div id="profile"></div>
I have a separate admin.js with admin-only routines.
$(function()
{
/* Not all admin pages are in tabs
*/
if ($('#nav_admin ul').length)
{
$('#nav_admin ul').tabs({
cache: true,
fx: { opacity: 'toggle' },
spinner: '<img src="/img/icons/tabs-loading.gif" />',
load: function (event, ui)
{
/* Check which tab is in front and take care of
any
* initialisation necessary
*/
switch(ui.tab.id)
{
case 'admin_members':
$('#autocomplete_tmp').contents().appendTo('#autocomplete_placeholder');
$('#ac_members').autocomplete('/members/autocomplete', ac_options);
break;
/* Some tabs don't require anything
special but I've left
* a placeholder anyway
*/
case 'admin_contact':
break;
case 'admin_posts':
$('.Editor').wymeditor(wym_options);
toggleFormNotes();
initAsyncPaging();
break;
case 'admin_newsletter':
$('.Editor').wymeditor(wym_options);
initNewsletter();
toggleFormNotes();
break;
case 'admin_events':
initAsyncPaging();
break;
case 'admin_jobs':
break;
case 'admin_profile':
break;
}
}
});
}
// ...
}
For edits, you can load the form inside a Thickbox-type pop-up. Use
the jquery.form plugin to then have it submit asynchronously. Use the
above switch() to initialise all of that in special-purpose functions.
As for tracking which tab is open, I don't bother with that at all.
Sometimes, the admin is taken away from the tabbed interface for
something, but I know which functions should redirect back to which
tab. This can be done by appending the proper hash to the redirect
URL. For instance, to get back to the eventrs tab, just redirect to:
/path/to/tabs#admin_events
On Sat, Jul 25, 2009 at 8:00 AM, SteveM<stevecmitch...@gmail.com> wrote:
>
> I've implemented an admin console that has about 5 ajax-enabled tabs
> on a JSP. Each tab displays info from different areas of the system.
> Authorized users see an edit button. Some edits can be multiple pages.
>
> Fully integrating multi-page UI tabs requires a lot of considerations.
> I'm interested in best practices that I should consider.
>
> My question is where can I find a robust UI TAB example that includes
> multiple page swaps? I just finished writing the editing features, and
> for now I leave the tabs and use separate edit pages. I see that my
> first task will be to "hijax" the tab links to load my edit pages in
> place. Next, I need to switch my submit buttons to do a submit in the
> background. I'll also need to switch to client side validation. I
> suppose I should also disable the other tabs while any one tab is in
> edit mode. I also wonder if I should track the currently selected tab
> server side so that if I do anything that does require the user to
> navigate away from the tab page they can return with the previously
> selected tab open.
>
> Suggestions?
>
> Steve Mitchell
> http://www.ByteworksInc.com
>
>
