jQuery Mobile Toolbar

jQuery Mobile Toolbar

Tool bar elements are often placed in the header and footer to achieve 'visited' navigation:

Title bar

The header usually contains the header title/LOGO or one to two buttons (usually home, options, or search buttons).

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

The following code will add a button to the left and right of the header title text:

Example

<div data-role="header">
  <a href="#" data-role="button">Home</a>
  <h1>Welcome to My Homepage</h1>
  <a href="#" data-role="button">Search</a>
</div>

Try it yourself

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

<div data-role="header">
  <a href="#" data-role="button">Home</a>
  <h1>Welcome to My Homepage</h1>
</div>

However, if you place a button link after the <h1> element, it will not be displayed on the right side of the text. To add a button to the right of the header title, specify the class name "ui-btn-right":

Example

<div data-role="header">
  <h1>Welcome to My Homepage</h1>
  <a href="#" data-role="button" class="ui-btn-right">Search</a>
</div>

Try it yourself

Tip:The header can include one or two buttons, but there is no limit for the footer.

Footer bar

Compared to the header, the footer is more flexible - it is more practical and versatile, so it can include the required number of buttons:

Example

<div data-role="footer">
  <a href="#" data-role="button">Broadcast to Sina Weibo</a>
  <a href="#" data-role="button">Broadcast to Tencent Weibo</a>
  <a href="#" data-role="button">Broadcast to QQ Space</a>
</div>

Try it yourself

Note:The style of the footer is different from the header (it reduces some padding and space, and the buttons are not centered). If you want to fix this issue, please set the class name "ui-btn" in the footer settings:

Example

<div data-role="footer" class="ui-btn">

Try it yourself

You can also choose to combine buttons horizontally or vertically in the footer:

Example

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Broadcast to Sina Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Broadcast to Tencent Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Broadcast to QQ Space</a>
  </div>
</div>

Try it yourself

Positioning the header and footer

There are three ways to place the header and footer:

  • Inline - Default. The header and footer are placed inline with the page content.
  • Fixed - The header and footer will stay at the top and bottom of the page.
  • Fullscreen - Similar to fixed; the header and footer will stay at the top and bottom of the page, but also over the page content. It is also slightly see-through

Please use the data-position attribute to position the header and footer:

Inline positioning (default)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

Try it yourself

Fixed positioning

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

Try it yourself

If you need to enable full screen positioning, please use data-position="fixed" and add the data-fullscreen attribute to the element:

Fullscreen positioning

<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:Fullscreen is very ideal for photos, images, and videos.

Tip:For fixed and fullscreen positioning, touching the screen will hide and display the header and footer.