JqueryMobile Headers Footer Navigation Bars

Create own custom Header/Fotter Bars

<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d" class="ui-btn-right">Down</a>
</div>

Note that .ui-bar should not be added to header or footer bars that span the full width of the page


To Create FullScreen Headers which goes away in fullscreen mode
<div data-role="header" data-fullscreen="true">

Alignment and grouping
To align all elements center in the header/footer use alighn="center" style
<div data-role="header" align="center" data-position="fixed">

use data-role="controlgroup" for grouping the buttons in headers or footers

<div data-role="footer" id="id_footer" data-position="fixed">
<div data-role="controlgroup" data-type="horizontal">
<input type = "button" id="total_tries" value= "Tries : 0">
<input type = "button" id="total_giveup" value= "GiveUp">
</div>
<input type = "button" id="total_time" class="ui-btn-right">
</div>

Navbar

A navbar is coded as an unordered list of links wrapped in a container element that has the data-role="navbar" attribute. This is an example of a two-button navbar:

<div data-role="navbar">
 <ul>
  <li><a href="a.html">One</a></li>
  <li><a href="b.html">Two</a></li>
 </ul>
</div><!-- /navbar -->

Navbar in Headers

If you want to add a navbar to the top of the page, you can still have a page title and buttons. Just add the navbar container inside the header block, right after the title and buttons in the source order.

Persistent navbar

There is also a persistent navbar variation that works more like a tab bar that stays fixed as you navigate across pages. To tell the framework to apply the persistent behavior, add the same data-id attribute to the header and/or footer of all HTML pages in the navigation

<div data-role="footer" data-id="foo1" data-position="fixed">
 <div data-role="navbar">
  <ul>
   <li><a href="a.html">Info</a></li>
   <li><a href="b.html">Friends</a></li>
   <li><a href="c.html">Albums</a></li>
   <li><a href="d.html">Emails</a></li>
  </ul>
 </div><!-- /navbar -->
</div><!-- /footer -->

To set the active state of an item in a persistent toolbar, add class="ui-btn-active ui-state-persist" to the corresponding anchor.

 
<li><a href="a.html" class="ui-btn-active ui-state-persist">Info</a></li>