O'Reilly logo

jQuery Mobile Cookbook by Chetan K Jain

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

Using persistent navbars in toolbars

The Navbar widget can be used to provide navigation links in your application. A Persistent Navbar stays fixed in the same position in your application, like a fixed tab bar, as you navigate between pages. This recipe shows you how to use persistent navbars in the toolbars to create a simple TV Menu UI.

Getting ready

Copy the full code of this recipe from the code/03/persistent-navbar sources folder. This code can be launched using the URL http://localhost:8080/03/persistent-navbar/main.html.

How to do it...

  1. In main.html create a simple TV Menu UI with three pages in it, "#movies", "#songs", and "#serials". Add the #movies page with its header and footer having navbars as shown in the following code:
    <div id="movies" ...

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