jQuery Mobile - Navbars Persistent

Descrição

A barra de navegação persistente funciona como uma barra de guias que parece ser corrigida conforme você navega pelas páginas. Adicionando a classe ui-btn-active à âncora em sua marcação, você pode definir um estado ativo para um item na inicialização da barra de navegação.

Sempre que a barra de navegação é clicada, o conteúdo da página muda e a barra de ferramentas persistente de cabeçalho e rodapé permanece fixa. Essas barras de ferramentas devem ser colocadas em cada página.

Exemplo

O exemplo a seguir demonstra o uso de navbar persistent no jQuery Mobile.

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

Resultado

Vamos realizar as seguintes etapas para ver como o código acima funciona -

Salve o código html acima como navbar_persistent.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/navbar_persistent.html e a seguinte saída será exibida.

↰ Previous page