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:
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.
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.
