O'Reilly logo

jQuery Mobile Web Development Essentials Second Edition 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 now seen a few examples of headers and footers that include buttons, but jQuery Mobile has a cleaner version of this called NavBars (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="header_and_footer__with_navbar.html" class="ui-btn-active">Home</a></li> <li><a href=" header_and_footer__with_navbar_credits.html ...

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