Skip to content

Creating tabs part 1: Using Plone, Kupu and jQuery

July 28, 2009

One of the requirement for the Oxfam America project was to provide a method by which content editors could update and edit the tabs that comprised the home page. For editorial reasons, thhe number of tabs would be variable as well as the content.  While other sections of the Oxfam America site use queries and site structure to generate tabbed UI elements (will be explained in follow up post), there was not a clear way to reuse these existing solutions for home page.

We initially considered the following solutions:

  1. Linking the home page tabs to content items located in another section of the site.  Those content items would provide the necessary text for populating the tabs.
  2. Creating either specific content type with enough configuration to handle the various tab layout options.

Approach 1 had the immediate disadvantage of breaking up the content editing into multiple steps and locations, increasing complexity for the end user. The second option would have broken the separation between the storage and display of content.  In other words, while the site currently is using tabs as a means to provide more content density per pixel, there is no guarantee that tabs will remain a long term solution. It is a certainty that UI elements and strategies will continue to evolve; today’s tabbed based UI will be supplanted by something else in the future.  Thus we wanted to avoid tying the structure of the content to a particular visual layout or theme.

So what to do…..

We briefly contemplated doing something clever, but clever meant a fair amount of custom work with JavaScript, plus getting it to play well with Kupu. Fortunately someone in the community had already solved this problem. Enter Mikko Ohtamma’s  collective.kuputabs

This tool uses the following approach:

  • You define a set of custom classes to indicate where each tab should begin
  • Use jQuery to render tabs based on the custom classes for the public view

This is probably best demonstrated visually, here is a short video showing how it works.  It demonstrates the creation of a new tab element and the transformation of that element from the editing interface to the public view.

[blip.tv ?posts_id=2432508&dest=-1]

Link to screen cast

So three cheers for the community again, if you are interested in other strategies for incorporating javascript and Plone you should also check out Products.pipbox.

2 Comments leave one →
  1. July 29, 2009 11:04 am

    This is a really neat solution. We had similar requirements on http://prettigpersoneel.nl and we solved it to create a custom view in combination with collage.

    It would be nice if this feature also lands in Products.TinyMCE.

    • aaron permalink
      July 29, 2009 11:07 am

      I am pretty sure that making it work with TinyMCE would be straightforward. You really only need the editor to assign the class, and have the JS identify the edit window so that the transform will work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: