jQuery Mobile Toolbar
Toolbar elements usually located in the head and tail - make navigation easy access to:
Head Bar
Head column typically contains the page title / logo or one or two buttons (usually the home page, or search option).
You can add buttons to the left or right side of the head.
The following code will add a button to the left of the head of the title text, add a button to the right of the head of the title text:
Examples
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left"> Home </a>
<H1> Welcome to my home page </ h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left"> search </a>
</ Div>
try it"
The following code will add a button to the left of the head of the title text:
Examples
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left"> Home </a>
<H1> Welcome to my home page </ h1>
</ Div>
try it"
However, if you put the button link is placed after the <h1> element will not be able to display text to the right. To add a button to the right of the head of the title, specify the class as "ui-btn-right":
Examples
<H1> Welcome to my home page </ h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left"> search </a>
</ Div>
try it"
 | Header may contain one or two buttons, the tail without limitation. |
|---|
Tail bar
More flexible than the rear column header bar - throughout their pages more functional and variability, it can contain as many buttons:
Examples
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Instagram </a>
</ Div>
try it"
Note: The tail and head different style (no padding and space, and the button is not centered). We can use a simple pattern to solve this problem:
You can also use the button in the rear horizontal or vertical combinations:
Examples
<div data-role = "controlgroup " data-type = "horizontal">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Follow me on Instagram </a>
</ Div>
</ Div>
try it"
Positioning the head and tail bar bar
Head and tail can be positioned in three ways:
- Inline - default. United inner header bar and rear bar and page content.
- Fixed - head and tail bar bar fixed to the top and bottom of the page.
- Fullscreen - Fixed positioning mode is basically the same with the head and tail bar bar fixed to the top and bottom of the page. But when he was out of the screen when scrolling the toolbar will not be displayed again automatically, unless tap the screen, which image or video category has been raised into the sense of the application is very useful. Note that this mode toolbar will cover the page content, so it is best used at special occasions.
Using data-position property to locate the head and tail bar bar:
Inline positioning (default)
<div data-role="footer" data-position="inline" ></div>
try it"
Fixed positioning
<div data-role="footer" data-position="fixed" ></div>
try it"
To enable full-screen positioning, use the data-position = "fixed", and add data-fullscreen attribute to the element:
Fullscreen Location
<div data-role="footer" data-position="fixed" data-fullscreen="true" ></div>
try it"
Tip: Full targeting applies to photos, images and video.
Tip: fixed positioning and targeting full-screen by clicking on the screen will display and hide column head and tail bar.
More examples
On the toolbar displays icons only
On the toolbar displays icons only you can use the ui-btn-icon-notext class.