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.

Table of Contents

  1. Default selectors
  2. HTML Examples
  3. Manual constructor
  4. 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() 

Return value:

Type Description
number index