Tabs

Overview

The header is an UI component which sits on top of an application. It

  • shows to the user where he is
  • It contains tabs. Tabs are views of equal importance (see the guidelines)

Here is a screenshot of such a header UI element:

Ubuntu HTML5 header

Tabs is defined in the file /usr/share/ubuntu-html5-theme/0.1/ambiance/js/tabs.js

Markup declaration

Here is an explanatory code snippet:

<header data-role="header">
  <nav class="tabs" data-role="navbar">
    <div class="tabs-inner">
      <ul data-role="tabs">
        <li class="active" data-role="tab">
          <a href="#item1" id="firstTab">First</a>
        </li>
        <li class="inactive" data-role="tab">
          <a href="#item2" id="secondTab">Second</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

Javascript access method

var UI = new UbuntuUI();
UI.init();
var tabs = UI.tabs('#tabId');

The Tabs container is created by passing a selector to UbuntuUI.tabs(DOMString selector);

Interface definition

Currently, Tabs objects only have internal methods which should not be used by application programmers.

Written on July 9, 2010