O'Reilly logo

jQuery Mobile Web Development Essentials by Andy Matthews, Raymond Camden

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required