jQuery UI offers great features for building tabbed layouts with relative ease, and Jaffa merely extends on this. Here's a sample content block that Jaffa can use:

<div class="my-tab-class">
    <h3 jaffa-tab-id="tab-1">Heading 1</h3>
    <div id="tab-1">Content Block 1</div>

    <h3 jaffa-tab-id="tab-2">Heading 2</h3>
    <div id="tab-2">Content Block 2</div>

    <h3 jaffa-tab-id="tab-3">Heading 3</h3>
    <div id="tab-3">Content Block 3</div>
</div>

Jaffa lets you turn this into a tabbed layout without much effort by building the additional navigation HTML required by the jQuery UI. Like so:

jaffa.ui.changeToTabLayout($(".my-tab-class"), "h3");

Here we handed Jaffa our tabbed content area ($(".my-tab-class")) as a jQuery element and told it how to find the headings using a CSS selector ("h3"). From here Jaffa can follow the information embedded in the HTML to build our navigation. This results in the tabbed layout shown here:

Why is this useful though? It is fairly close to to what jQuery UI does anyway, except rather then build a central navigation structure, we've instead spread the additional HTML out throughout the content.

If your server-side application builds a complicated front-end through template execution however, it is not uncommon to find that the entire form can be spread across many templates without any knowledge of each other. You may even include or exclude templates from executing based on server-side conditions (like security) requiring you to alter the navigation HTML as well as the content. This alternative setup offers the option of letting Jaffa do that work for, so long as each section of the form provides the appropriate IDs/headings:

• A heading that can be found using the common CSS selector.
• The heading should contain an attribute jaffa-tab-id which points at the ID of a content block.
• The content block with ID matching above.

Of course, you have jQuery UI available to you in this setup as well, so you can use either approach interchangeably as conditions dictate.