Toolbars

Code

<div data-role="page" id="page1">
  <!-- Fixed header with left/right buttons -->
  <div data-role="header" data-position="fixed" data-theme="b">
    <a href="#" data-icon="home" data-iconpos="notext">Home</a>
    <h1>Title</h1>
    <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
  </div>

  <div role="main" class="ui-content">
    <p>Scroll to see fixed toolbars stay put.</p>
    <p>...</p>
  </div>

  <div data-role="footer" data-position="fixed" data-theme="b">
    <h4>Footer Text</h4>
  </div>
</div>

<!-- Fullscreen toolbars: tap the page to show/hide them -->
<div data-role="page" id="page2">
  <div data-role="header" data-position="fixed" data-fullscreen="true">
    <h1>Fullscreen</h1>
  </div>
  <div role="main" class="ui-content">
    <p>Tap to toggle bars.</p>
  </div>
  <div data-role="footer" data-position="fixed" data-fullscreen="true">
    <h4>FS Footer</h4>
  </div>
</div>

Explanation

data-role=header and data-role=footer create themed toolbars; data-position=fixed keeps them visible during scroll. Adding data-fullscreen=true overlays the bars and lets users tap the page to toggle their visibility, ideal for media viewers or immersive reading. data-theme controls the color swatch.

More jQuery Mobile Snippets