Building a tabbed form

  • Font size: Larger Smaller
  • Hits: 16262
  • Print

The module loads by default a library used to create tabs in an easy way. To create a form with several tabs user can navigate, you only have to configure a custom layout using a naming convention to identify the different tabbed sections.

A simple html structure should look like this, you can add as many tabs as needed:

<div id="tabs"> 
< li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
<div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. </p> </div>
<div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. </p> </div>
<div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. </p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna.</p> </div>

To activate the tabs, you should include this code at the javascript section, using the first option Javascript events.

CB( "#tabs" ).tabs();

This example will show the following output at the main form:

You can place any content inside the tabs as you would normally do for default layout.

Last modified on
Trackback URL for this blog entry.

Lo que nuestros clientes opinan de nosotros