These pages are a demo of persistent toolbars. Click on any of the links in the footer, and you'll see the page content transition, but both the persistent header and footer on these pages remains in place durning the animation to a new HTML page.
To tell the framework to apply the persistent behavior, add a data-id attribute to the footer of all HTML pages in the navigation set to the same ID. It's that simple: if the page you're navigating to has a header or footer with the same data-id, the toolbars will appear fixed outside of the transition. Each of these pages has a different transition to test out how this works.
Typically, the persistent toolbar technique will be combined with fixed positioning. In this example, the footer also has a navbar, like this:
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="a.html">Friends</a></li>
<li><a href="b.html">Albums</a></li>
<li><a href="c.html">Emails</a></li>
<li><a href="d.html" >Info</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
To set the active state of an item in a persistent toolbar, add a class of ui-state-persist in addition to ui-btn-active to the corresponding anchor.
<li><a href="d.html" class="ui-btn-active ui-state-persist">Info</a></li>
The slide, slideup, slidedown, fade or none page transitions all work great with persistent fixed toolbars. However, intensive 3D transitions like flip, turn, and flow can cause positioning and animation performance issues with this technique so we don't recommend using them.