06
Apr

Building a tabbed form

  • Font size: Larger Smaller
  • Hits: 17780
  • 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"> 
<ul>
< 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>
</ul>
<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>
</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

Our clients' feedback