Working with navigation bars

You've seen a few examples now which include buttons with headers and footers, but jQuery Mobile has a cleaner version of this called NavBars (or navigation bars). These are full screen-wide bars used to hold buttons. jQuery Mobile also supports highlighting one button at a time as an active button. When used for navigation, this is an easy way to mark a page as being active.

A NavBar is simply an unordered list wrapped in a div tag that uses data-role="navbar". Placed inside a footer it looks similar to the following code snippet:

<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="persistent_footer_index.html" class="ui-btn-active">Home</a></li> <li><a href="persistent_footer_credits.html" >Credits</a></li> ...

Get jQuery Mobile Web Development Essentials now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.