Creating tabs part 1: Using Plone, Kupu and jQuery
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:
- 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.
- 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…..
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.