tmt.widget.tab 3.0

tmt.widget.tab is a JavaScript widget to create tab based GUI. Unlike many alternatives, it's simple and lightweight and based on a conventional structure for XHTML code

In order to use this library you need tmt_core.js, tmt_css.js and tmt_tabs.js

If you want to enable step-by-step form validation, tmt_form.js and tmt_validator.js are also required.

It's also available as an easy to use custom tag for ColdFusion

Samples

• Full sample
• Multi-tab form
• Multi-tab form with step-by-step validation
• More elegant GUI using images

Syntax reference

tmt:tabgroup	Required. This attribute must be set to true in order to enable the widget
tmt:tabpanel	Required. Custom attribute to be added to the <div> tag that contains each single panel
tmt:tabform	Optional. Set this to true if you want to enable integration with TMT Validator (see sample)
tmt:tabformcallback	Optional. Specify the name of a custom JavaScript function that will handle error notification. By default JavaScript alert boxes are used. You can also use the built-in tmt.validator.multiSectionBoxCallback (see sample). If a custom call back is specified, the widget will pass the following arguments to it: formNode: a reference to the form DOM node hasErrors: true if the tab group contains validation errors, false otherwise tabResults: an array of objects, one for each tab, storing the following properties label: the tab's label text validators: an array of validator objects (containing name and message properties). If the tab doesn't contain any error, the array is empty

Sample XHTML code

Include the relevant JavaScript files first:

<script type="text/javascript" src="tmt_core.js"></script>
<script type="text/javascript" src="tmt_css.js"></script>
<script type="text/javascript" src="tmt_expandpanel.js"></script>

This widget keep things simple because it only requires a conventional structure for your XHTML (a sequence of <div> and <a> tags); plus two custom attributes:

<div tmt:tabgroup="true">
<div>
<a href="javascript:;">Tab panel 1</a>
<a href="javascript:;">Tab panel 2</a>
</div>
<div class="tmtPanelGroup">
<div tmt:tabpanel="true">
Panel 1 content here
</div>
<div tmt:tabpanel="true">
Panel 2 content here
</div>
</div>
</div>

CSS classes

The "tmtTabSelected" class is applied to the "current" tab's label.

Whenever a tab contains form validation errors, the "tmtTabError" class is applied to its label.
Whenever a tab passes validation, the "tmtTabValid" class is applied to its label.

API

tmt.widget.tab.util.goTo(divNode, position)	Given a <div> node or its id, open the required tab. Tab position is zero based (see sample)
tmt.widget.tab.util.next(divNode)	Given a <div> node or its id, open the next available tab (see sample)
tmt.widget.tab.util.previous(divNode)	Given a <div> node or its id, open the previous available tab (see sample)
tmt.widget.tab.util.validate(divNode)	Given a <div> node or its id, validate form fields inside all tabs (see sample)