| pax.widget.tabset.init = function( | element, | | args | ) |
|
Displays the tabset on a specifed element
Parameters
| element | The target element for the output |
| tabSpaces | Optionally specify how many spaces per tab, default = 4 |
Example
<form>
<div id='pax.widget.tabset.example1'>
<fieldset class='pFieldset' style='float: left; margin-right: 20px;' alt='Personal details'>
<label class='pLabel' for="firstName">First name</label> <input name="firstName" id="firstName" type="text" value=""><br>
<label class='pLabel' for="lastName">Last name</label> <input name="lastName" id="lastName" type="text" value=""><br>
<label class='pLabel' for="logon">Logon</label> <input name="logon" type="text" value=""><br>
<label class='pLabel' for="dob">Date of birth</label> <input name="dob" id="dob" type="text" value="" size="25" maxlength="25"><br>
<label class='pLabel' for="email">Email</label> <input name="email" id="email" type="text" size="30" value=""><br>
<label class='pLabel' for="phone">Phone</label> <input name="phone" id="phone" type="text" size="30" value=""><br>
</fieldset>
<fieldset class='pFieldset' style='float: left; margin-right: 20px;' alt='Notes'>
<label class='pLabel' for="notes">Notes</label> <textarea name="notes" id="notes"></textarea><br>
</fieldset>
</div>
<button type='submit' name='SaveButton'>Save</button>
</form>
[:.
pax.load.onloaded( function() {
pax.widget.tabset.init( $( 'pax.widget.tabset.example1' ), {
height: 200,
showToggle: true,
tabAttribute: 'ALT'
} );
} );
:]
This would show a tabset with two tabs.
Note: When we init tabsets contained inside eachother, the surrounding tabset will pick up the inner tabsets title attribute, and create a new tab...
Workaround: use a different tag, such as ‘ALT’, by setting the tabAttribute.