Tab Bar

The tab bar component shows an unordered list of buttons on the screen wrapped together in a single group. It can be placed in the header or footer of the page.

Table of Contents

1. Default Selectors
2. Manual Constructor
3. Options
4. Creating a Basic Tab Bar
5. Creating a Tab Bar with MultiPages

Default Selectors

By default, all HTML elements with the data-role="tabbar" attribute are displayed as tab bars.

Manual Constructor

To manually create a tab bar component, use the component constructor from the tau namespace (RECOMMENDED):

<div data-role="page" id="tab-bar-page">
   <div data-role="header">
      <div id="ready-for-tab-bar">
         <ul>
            <li><a href="#">Tabbar1</a></li>
            <li><a href="#">Tabbar2</a></li>
            <li><a href="#">Tabbar3</a></li>
         </ul>
      </div>
   </div>
   <div data-role="content">
      Content
   </div>
</div>
<script>
   (function (document) 
   {
      var pageElement = document.getElementById("tab-bar-page"),
          tabBarElement = document.getElementById("ready-for-tab-bar"),
          tabBar;

      function createPageHandle() 
      {
         tabBar = tau.widget.TabBar(tabBarElement);
      }

      pageElement.addEventListener("pagecreate", createPageHandle);
   }(document));
</script>

The constructor requires an HTMLElement parameter to create the component, and you can get it with the document.getElementById() method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.

If the jQuery library is loaded, you can use its method (support for backward compatibility):

<div data-role="page" id="ab-bar-page">
   <div data-role="header">
      <div id="ready-for-tab-bar">
         <ul>
            <li><a href="#">Tabbar1</a></li>
            <li><a href="#">Tabbar2</a></li>
            <li><a href="#">Tabbar3</a></li>
         </ul>
      </div>
   </div>
   <div data-role="content">
      Content
   </div>
</div>
<script>
   (function (document) 
   {
      function createPageHandle() 
      {
         $("#ready-for-tab-bar").tabbar();
      }

      $("#tab-bar-page").on("pagecreate", createPageHandle);
   }(document));
</script>

Options

The following table lists the options for the tab bar component.

Creating a Basic Tab Bar

A basic tab bar is for users who want a tab bar for one page.

Basically, the page has one tab bar, and when the user clicks the tab, only the content area is changed. Clicking a tab never changes the entire page.

• To create a simple tab bar in the header:

  <div data-role="page">
     <div data-role="header">
        <div data-role="tabbar">
           <ul>
              <li><a href="#">Tabbar1</a></li>
              <li><a href="#">Tabbar2</a></li>
              <li><a href="#">Tabbar3</a></li>
           </ul>
        </div>
     </div>
     <div data-role="content">
        Content
     </div>
  </div>
  

• To create a simple tab bar in the footer:

  <div data-role="page">
     <div data-role="content">
        Content
     </div>
     <div data-role="footer">
        <div data-role="tabbar">
           <ul>
              <li><a href="#">Tabbar1</a></li>
              <li><a href="#">Tabbar2</a></li>
              <li><a href="#">Tabbar3</a></li>
           </ul>
        </div>
     </div>
  </div>
  

Creating a Tab Bar with MultiPages

To create a tab bar for multiple pages (where clicking a tab changes the entire page), the data-auto-change option must be "false" and you must use the "ui-btn-active" class for each tab:

<div class="ui-page" id="first">
   <div class="ui-header">
      <div class="ui-tabbar" data-auto-change="false">
         <ul>
            <li><a href="#first" class="ui-btn-active">First</a></li>
            <li><a href="#second">Second</a></li>
            <li><a href="#third">Third</a></li>
         </ul>
      </div>
   </div>
   <div class="ui-content">
      First page
   </div>
</div>
<div class="ui-page" id="second">
   <div class="ui-header">
      <div class="ui-tabbar" data-auto-change="false">
         <ul>
            <li><a href="#first">First</a></li>
            <li><a href="#second" class="ui-btn-active">Second</a></li>
            <li><a href="#third">Third</a></li>
         </ul>
      </div>
   </div>
   <div class="ui-content">
      Second page
   </div>
</div>
<div class="ui-page" id="third">
   <div class="ui-header">
      <div class="ui-tabbar" data-auto-change="false">
         <ul>
            <li><a href="#first">First</a></li>
            <li><a href="#second">Second</a></li>
            <li><a href="#third" class="ui-btn-active">Third</a></li>
         </ul>
      </div>
   </div>
   <div class="ui-content">
      Third page
   </div>
</div>