Tabset widget

This page contains examples of the PAX tabset; one is from HTML markup, and the other is generated from javascript.

Example 1: Unobtrusive tabset from HTML
Example 2: Dynamic tabset from javascript only

Example 1: Unobtrusive tabset from HTML

First name
Last name
Logon
Date of birth
Email
Phone
Country
Post Code
Languages spoken

IP Address
Level 1 2 3
Code (SSSS-NN)
Domain

This tabset is generated from HTML markup (a form)
Note that it includes the show all toggle button in the top right, this button shows all tabs at once on top of eachother.

demo_tabset_example1.htm

<div id='myTabset' style='float: left'>

    <fieldset class='pFieldset' style='float: left; margin-right: 20px;' title='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>

        <label class='pLabel' for="country">Country</label>

            <select name="country" id="country">

                <option value="">- Please select -</option>

                <option value="1">Australia</option>

                <option value="2">New Zealand</option>

                <option value="3">South Africa</option>

                <option value="4">France</option>

                <option value="5">England</option>

                <option value="6">Ireland</option>

                <option value="7">Canada</option>

                <option value="8">Wales</option>

                <option value="9">Argentina</option>

                <option value="10">Italy</option>

                <option value="11">Scotland</option>

            </select><br>

        <label class='pLabel' for="postcode">Post Code</label><input name="postcode" id="postcode" type="text" size="30" value=""><br>

        <label class='pLabel' for="language[]">Languages spoken</label>

            <select name="language[]" id="language[]" multiple size=4>

                <option value="" selected> </option>

                <option value="english">English</option>

                <option value="danish">Danish</option>

                <option value="swedish">Swedish</option>

                <option value="swedish">Norwegian</option>

                <option value="finnish">Finnish</option>

                <option value="french">French</option>

                <option value="german">German</option>

            </select><br>

    </fieldset>

    <fieldset class='pFieldset' title='Technical details'>

        <label class='pLabel' for="ipaddress">IP Address</label>            <input name="ipaddress" id="ipaddress" type="text" size="25" value=""><br>

        <label class='pLabel'>Level</label>

            <input name="level" id="level1" class="pRadio" type="radio" value="one">1&nbsp;&nbsp;

            <input name="level" id="level2" class="pRadio" type="radio" value="two">2&nbsp;&nbsp;

            <input name="level" id="level3" class="pRadio" type="radio" value="three">3<br>

        <label class='pLabel' for="code">Code (SSSS-NN)</label>    <input name="code" id="code" type="text" value="" size="8" maxlength="7"><br>

        <label class='pLabel' for="domain">Domain</label>               <input name="domain" id="domain" size="30"  type="text" value=""><br>

    </fieldset><br/>

    <fieldset class='pFieldset' title='Notes'>

        <textarea name="notes" id="notes" type="text" style="width:344px" rows="6">This is a text area!</textarea><br>

    </fieldset>

</div>

<div style='float: left; width: 270px; padding: 8px; margin-left: 20px; border: 2px solid green; background-color: #AFA;'>

    This tabset is generated from HTML markup (a form)<br/>

    Note that it includes the <b>show all</b> toggle button in the top right, this button shows all tabs at once on top of eachother.

</div>

<div style='clear: both'></div>

demo_tabset_example1.js

pax.load.onloaded( function() {

    pax.widget.tabset.init( $( 'myTabset' ), {

        height: 200,

        showToggle: true

    } );

} );

Example 2: Dynamic tabset from javascript only

The above tabset is generated using javascript only; the first tab is an iframe, then 2nd tab is a PAX Template, which is loaded via ajax, and then rendered, and the 3rd tab is simply static text.
This tabset has the width set to 100%, and uses the default height.

Example 3: Dynamic and static tabset

IP Address
Level 1 2 3
Code (SSSS-NN)
Domain

The above tabset is generated using both javascript, and HTML markup. Note that we set the option to show static tabs first.