Barry's jQuery Mobile Demos: Navbars

Navbars

Navigation bars (navbar) are a similar to the above toolbars but are a more self-contained widget. A navbar is defined as a separate widget, though commonly used in the header or footer. It is a quick way to define a connected series of buttons, similar to the footer examples shown above. We will start with a simple example. The following code defines a navbar in a page header.

<div data-role="header">
  <h1>My Header</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#">Previous</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Next</a></li>
    </ul>
  </div>
</div>

View

The navbar is the three buttons formatted to span the window size. Notice that the definition does not contain the usual button definition attributes, all links in a navbar definition are automatically assumed to be buttons. The unordered list syntax (<ul> and <li> tags) ensures the buttons are equal width. We can easily add icons using the data-con attribute. For example, we can add appropriate icons to the above definition by using the list code:

      <li><a href="#" data-icon="arrow-l">Previous</a></li>
      <li><a href="#" data-icon="home">Home</a></li>
      <li><a href="#" data-icon="arrow-r">Next</a></li>

View

Notice how the icon appears above the text. We can also adjust where all the icons appear within the navbar by using the data-iconpos attribute specifying "top" (default), "right", "bottom" or "left". For example the following code switches all the icons to below the text.

<div data-role="navbar" data-iconpos="bottom">

The final attribute of navbars is whether you wish to show the button already press down. This is useful if you want to indicate a button that reached the currently displayed page. The pressed down look is achieved with the ui-btn-active value in the class attribute. For example, suppose we wanted to display the “Home” button as pressed on the home page. In the above example we would define this button as follows.

<li><a href="#" data-icon="home" class="ui-btn-active">Home</a></li>

View (also has icon on bottom)

There is also a subtle additional attribute for maintaining the pressed state of a button. When a non-pressed button is touched/clicked the pressed state is released and the new button pressed, similar to a radio button. This means that when you go back to the page the button you have configured as pressed is no longer pressed. You can make the button stay pressed by adding the value ui-state-persist to the class attribute of the link.

Home

My Header

This is a page with the following header definition:

<div data-role="header">
  <h1>My Header</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#">Previous</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Next</a></li>
    </ul>
  </div>
</div>

Go back to navbars ...

My Header

This is a page with the following header definition:

<div data-role="header">
  <h1>My Header</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="arrow-l">Previous</a></li>
      <li><a href="#" data-icon="home">Home</a></li>
      <li><a href="#" data-icon="arrow-r">Next</a></li>
    </ul>
  </div>
</div>

Go back to navbars ...

My Header

This is a page with the following header definition:

<div data-role="header">
  <h1>My Header</h1>
  <div data-role="navbar" data-iconpos="bottom">
    <ul>
      <li><a href="#" data-icon="arrow-l">Previous</a></li>
      <li><a href="#" data-icon="home" class="ui-btn-active">Home</a></li>
      <li><a href="#" data-icon="arrow-r">Next</a></li>
    </ul>
  </div>
</div>

Go back to navbars ...