jQuery Mobile - Navbars Persistent

Description

The persistent navbar works like a tab bar that appears to be fixed as you browse across the pages. Adding class ui-btn-active to the anchor in your markup, you can set an active state for an item upon the navbar initialization.

Whenever the navbar is clicked, the content of the page changes and the persistent header and footer toolbar remains fixed. These toolbars must be placed on each page.

Example

Following example demonstrates the use of navbar persistent in jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $(function() {
            $( "[data-role = 'navbar']" ).navbar();
            $( "[data-role = 'header'], [data-role = 'footer']" ).toolbar();
         });
         
         // Update the the toolbar's contents
         $( document ).on( "pagecontainerchange", function() {
            // Each of the 4 pages in this example has a data-title attribute
            // which value is equal to the nav button's text
            // For e.g., on first page: <div data-role = "page" data-title = "Details">
            var current = $( ".ui-page-active" ).jqmData( "title" );
            
            // Change the heading
            $( "[data-role = 'header'] h1" ).text( current );
            
            // Remove active class
            $( "[data-role = 'navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
            
            // Add active class to current nav button
            $( "[data-role = 'navbar'] a" ).each(function() {
               if ( $( this ).text() === current ) {
                  $( this ).addClass( "ui-btn-active" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "header" data-position = "fixed" data-theme = "a">
         <a href = "" data-rel = "back" class = "ui-btn ui-btn-left ui-alt-icon 
            ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
         <h1>Details</h1>
      </div>
      
      <div data-role = "page" data-title = "Details" class = "jqm-demos">
         <div role = "main" class = "ui-content jqm-content jqm-fullwidth">
            <h1>jQuery Mobile</h1>
            <p>The jQuery Mobile is a user interface framework which is built on 
            jQuery core and used for developing responsive websites or applications that 
            are accessible on mobile, tablet and desktop devices. It uses features of both 
            jQuery and jQueryUI to provide API features for mobile web applications.</p>
               
            <ul class = "list">
               <li><p>The jQuery Mobile creates web applications in such a way that it 
               will work the same way on the mobile, tablet and desktop devices.</p></li>
            
               <li><p>The jQuery Mobile is compatible with other frameworks such as 
               <i>PhoneGap</i>, <i>Whitelight</i> etc.</p></li>
            
               <li><p>The jQuery Mobile provides set of touch friendly form inputs and 
               UI widgets.</p></li>
            
               <li><p>The progressive enhancement brings you functionality to all mobile, 
               tablet and desktop platforms and adds efficient page loads and wider device 
               support.</p></li>
            </ul>
         </div>
      </div>
   
      <div data-role = "footer" data-position = "fixed" data-theme = "a">
         <div data-role = "navbar">
            <ul>
               <li><a href = "/jquery_mobile/src/navbar_persistent.html" 
               data-prefetch = "true" data-transition = "flip">Details</a></li>
            
               <li><a href = "/jquery_mobile/src/page_one.html" data-prefetch = "true" 
               data-transition = "fade">Friends</a></li>
            
               <li><a href = "/jquery_mobile/src/page_two.html" data-prefetch = "true" 
               data-transition = "slide">Messages</a></li>
            
               <li><a href = "/jquery_mobile/src/page_three.html" data-prefetch = "true" 
               data-transition = "turn">Emails</a></li>
            </ul>
         </div>
      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as navbar_persistent.html file in your server root folder.
Open this HTML file as http://localhost/navbar_persistent.html and the following output will be displayed.

jquery_mobile_widgets.htm