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.

Note
This component has been DEPRECATED since Tizen 2.4 and will be deleted in Tizen 3.0.
To support Backward compatibility, please import tau.support-2.3.js.
Since 2.4, to use Tab Bar component, please refer Tabs component.

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.

Option Input type Default value Description
data-auto-change boolean true If "true", the component automatically changes the active status of the tab when the user clicks the tab.
data-active number 0 Sets the default active tab.

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>