Barry's jQuery Mobile Demos: Toolbars

Toolbars

You will know from your experience of mobile device that it is common to use a collection of buttons for navigation or other purposes. jQuery Mobile page headers and page footers are ideal places to position navigation bars. The header and footer syntax supports creation of toolbars. A separate navbar (navigation bar) widget can also be placed in the header or footer but we will look at the toolbars here.

The page header allows placement of buttons on the right and/or left of the header text to form a toolbar. All we have to do to form a toolbar is place a button definition at the start (for left hand side) and at the end (for right hand side) of the header. For example, the following definition for a header places a button on the left of the header with a "Home" button and a "Search" button on the right hand side of the header.

<div data-role="header">
   <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
   <h1>My Header</h1>
   <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>

View

You can use any of the buttons and icons we looked at previously. For more complicated examples, e.g. for headers with other links or buttons, it is best to specify exactly which button should be placed where. This is done by placing the strings ui-btn-left and ui-btn-right in the class attribute. For example, the following header definition has just a right hand home button.

<div data-role="header">
   <h1>My Header</h1>
   <a href="#home" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Home></a>
</div>

The footer toolbar is more flexible than the header one because it can contain any number of buttons. We can simply list them in the footer definition. For example, the following footer is defined to have four buttons, each with an arrow icon and corresponding word.

<div data-role="footer">
   <a href="#" class="ui-btn ui-icon-arrow-u ui-btn-icon-left">Up</a>
   <a href="#" class="ui-btn ui-icon-arrow-d ui-btn-icon-left">Down</a>
   <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Left</a>
   <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-left">Right</a>
</div>

View

Notice how the buttons are left justified. We can easily centre the buttons by adding a CSS style to the header definition as follows.

<div data-role="footer" style="text-align:center">

View

We also have three option on how headers and footers are displayed when the main body of the page does not fit in the window. The three options are:

  1. data-position="inline" - header or footer fixed and scroll with body (default)
  2. data-position="fixed" - header or footer fixed in window, body scrolls between them
  3. data-position="fixed" data-fullscreen="true" - header or footer fixed but semi-transparent and will disappear when window clicked/touched

Note that you do not need a toolbar to use these attributes and they can be applied to any page header or footer. In addition, a page's header or footer may have a different attributes. This page has the second attribute for both header and footer.

Home
Home

My Header

Search

This is a page with the following header definition:

<div data-role="header">
   <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
   <h1>My Header</h1>
   <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>

Go back to toolbars ...

This is a page with the following footer definition:

<div data-role="footer">
   <a href="#" class="ui-btn ui-icon-arrow-u ui-btn-icon-left">Up</a>
   <a href="#" class="ui-btn ui-icon-arrow-d ui-btn-icon-left">Down</a>
   <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Left</a>
   <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-left">Right</a>
</div>

Buttons are disabled.

Go back to toolbars ...

Up Down Left Right

This is a page with the following footer definition:

<div data-role="footer">
   <a href="#" class="ui-btn ui-icon-arrow-u ui-btn-icon-left">Up</a>
   <a href="#" class="ui-btn ui-icon-arrow-d ui-btn-icon-left">Down</a>
   <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Left</a>
   <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-left">Right</a>
</div>

Buttons are disabled.

Go back to toolbars ...

Up Down Left Right