WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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 »


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.


/h2>