FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

jQuery Mobile Toolbars


jQuery Mobile Toolbars

Toolbar elements are often placed inside headers and footers - for "easy-access" navigation:


Header Bars

The header is located at the top of the page and usually contain a page title/logo or one or two buttons (typically home, options or search).

You can add buttons to the left and/or to the right side in the header.

The code below, will add a "Home" button to the left and a "Search" button to the right of the header title text:

Example

<div data-role="header">
  <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>
Try it Yourself »

The following code will only add a button to the left side of the header title:

Example

<div data-role="header">
  <a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
  <h1>Welcome To My Homepage</h1>
</div>
Try it Yourself »

The following code will only add a button to the right side of the header title:

Example

<div data-role="header">
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div>
Try it Yourself »

A header can contain one or two buttons, while the footer has no limit.


Footer Bars

The footer is located at the bottom of the page.

The footer is more flexible than the header - it is more functional and changeable throughout pages, and can therefore contain as many buttons as needed:

Example

<div data-role="footer">
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
Try it Yourself »

Tip: The buttons in the footer are not centered by default. To fix this, simply use CSS:

Example

<div data-role="footer" style="text-align:center;">
Try it Yourself »

You can also group buttons in the footer horizontally or vertically:

Example

<div data-role="footer" style="text-align:center;">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
  </div>
</div>
Try it Yourself »

Positioning Headers and Footers

The header and the footer can be positioned in three ways:

  • Inline - Default. Headers and footers are inline with the page content
  • Fixed - Headers and footers will remain positioned at the top and bottom of the page
  • Fullscreen - Behaves like fixed; headers and footers will remain positioned at the top and bottom, but also over the page content. It is also slightly see-through

Use the data-position attribute to position your headers and footers:

Inline Position (Default)

<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>
Try it Yourself »

Fixed Position

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
Try it Yourself »

To enable the fullscreen position, use data-position="fixed" and add the data-fullscreen attribute to the element:

Fullscreen Position

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
Try it Yourself »

Tip: The fullscreen position is ideal for photos, images and videos.

Tip: Tapping the screen will hide and show headers and footers for both fixed and fullscreen positions.


Examples

More Examples

Displaying only the icon in toolbars
Using the ui-btn-icon-notext class to only display the icon in header and footer buttons.