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...
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" data-role="page" > <div data-role="header" data-id="persistheader" data-position="fixed"> <h1>Movies</h1> <div data-role="navbar"> <ul> <li><a href="#" data-role="button"...