Toolbar

Overview

The toolbar is an UI component which sits at the bottom of an application. It usually contains buttons that engender an action when clicked. The toolbar is generally contained in a page component or in the pagestack.

While it is technically possible to place more than five icons in the toolbar, the Ubuntu Touch guidelines specify that the maximum number of icons is five.

Here is a screenshot of such a toolbar:

Ubuntu HTML5 toolbar

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

Markup declaration

A toolbar is defined as follows:

<footer id="footer" class="revealed" data-role="footer">
  <nav>
    <ul>
      <li><span>Add Feed</span></li>
      <li><span>Delete Feed</span></li>
      <li><img alt="Tap me!" src="../../ambiance/img/back@18.png"><span>Back</span></li>
    </ul>
  </nav>
</footer>

Javascript access method

Accessing the button is made as follows:

var UI = new UbuntuUI();
UI.init();
var toolbar = UI.toolbar("id");

Interface definition

interface Toolbar{
  void show();
  void hide();
  void toggle();
  void touch(AsyncOperationCallback callback);
};

Javascript access method.

  • void show(). Displays the toolbar.

  • void hide(). hides the toolbar.

  • void toggle(). shows the toolbar if it is hidden, hides it if it is shown.

  • void touch(AsyncOperationCallback callback). Registers a listener for touch events. Usually, the listener calls "toolbar.toggle()" to display or hide the toolbar when the user touches it.

The following example registers an event handler for touch events:

UI.toolbar('myToolbar').touch(function(){
  UI.toolbar('myToolbar').toggle();
});
Written on July 9, 2010