tmt.widget.expandpanel 2.0

tmt.widget.expandpanel is is a simple, lightweight, JavaScript widget

In order to use this library you need tmt_core.js and tmt_expandpanel.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-panel form with step-by-step validation

Syntax reference

There is only a custom attribute required by this widget

tmt:expandpanel	This attribute must be set to true in order to enable expandpanel
tmt:expandpanelform	Optional. Set this to true if you want to enable integration with TMT Validator (see sample)
tmt:expandpanelformcallback	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_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 a custom attribute:

<!-- First a container <div> -->
<div tmt:expandpanel="true">
<!-- One <div> for each panel -->
<div>
<!-- One <a> for each label -->
<a href="javascript:;">Panel 1</a>
<div>
<!-- Put what you want here -->
<p>Content for Panel 1 goes here</p>
</div>
</div>
<div>
<a href="javascript:;">Panel 2</a>
<div>
<p>Content for Panel 2 goes here</p>
</div>
</div>
</div>

CSS classes

Whenever a panel contains form validation errors, the "tmtPanelError" class is applied to its label.
Whenever a panel passes validation, the "tmtPanelValid" class is applied to its label

API

tmt.widget.expandpanel.util.openPanel(divNode, position)	Given a <div> node or its id, open the required panel (panel position is zero based). If you pass -1 as second argument all the panels will be closed (see sample)
tmt.widget.expandpanel.util.validate(divNode)	Given a <div> node or its id, validate form fields inside all panels (see sample)