Español
English
06
Abr
Building a tabbed form
- Font size: Larger Smaller
- Hits: 16262
- Subscribe to this entry
- Bookmark
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.
Trackback URL for this blog entry.