Tabs

The Tabs component is a controller component for operate closely with tabbar and sectionChanger.

Note
This component is just a controller. So, please use this component with tabbar and SectionChanger component.

Default selectors
HTML Examples
Manual constructor
Methods

Default selectors

By default, all elements with the class="ui-tabs" or data-role="tabs" attribute are displayed as a tabs components.

HTML Examples

Using tabbar in Tabs component

To use Tabs component, it need tabbar as child.
When define tabbar in HTML, just add class="ui-tabbar". Please refer following code:

<div class="ui-page">
   <div class="ui-tabs">
      <div class="ui-tabbar">
         <ul>
            <li class="ui-li-anchor"><a href="#" class="ui-tab-active">Tab1</a></li>
            <li class="ui-li-anchor"><a href="#">Tab2</a></li>
            <li class="ui-li-anchor"><a href="#">Tab3</a></li>
            <li class="ui-li-anchor"><a href="#">Tab4</a></li>
         </ul>
      </div>
   </div>
</div>

Using tabbar and SectionChanger in Tabs component

<div class="ui-page">
   <div class="ui-tabs">
      <div class="ui-tabbar">
         <ul>
            <li class="ui-li-anchor"><a href="#" class="ui-tab-active">Tab1</a></li>
            <li class="ui-li-anchor"><a href="#">Tab2</a></li>
            <li class="ui-li-anchor"><a href="#">Tab3</a></li>
            <li class="ui-li-anchor"><a href="#">Tab4</a></li>
         </ul>
      </div>
      <div class="ui-section-changer" id="sectionChanger">
         <div>
            <section class="ui-section-active">
               Section1
            </section>
            <section>
               Section 2
            </section>
            <section>
               Section 3
            </section>
            <section>
               Section 4
            </section>
         </div>
      </div>
   </div>
</div>

Manual constructor

For manual creation of tabs widget you can use constructor of widget

<script>
   var tabsElement = document.getElementById("tabs"),
       tabs;
   tabs = tau.widget.Tabs(tabsElement);
</script>

Methods list

Summary

Method	Description
setIndex(number index)	Set the active tab index
number getIndex()	Get the active tab index

setIndex

Set the active tab index

setIndex(number index)

Parameters:

Parameter	Type	Required / optional	Default value	Description
index	number	required

Return value:

No Return Value

getIndex

Get the active tab index

number getIndex()