Tabs

The Tabs component is a controller component that operates with tab bar and section changer.

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, add tabbar as child.
To define tabbar in HTML, add class="ui-tabbar". See the 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 )	Sets the active tab index.
number getIndex ( )	Gets the active tab index.

setIndex

Sets the active tab index.

setIndex ( number index)

Parameters:

Parameter	Type	Required / optional	Default value	Description
index	number	Required

Return value:

No return value

getIndex

Gets the active tab index.

number getIndex ( )