jQuery Mobile - Navbars persistente

Descrizione

La barra di navigazione persistente funziona come una barra delle schede che sembra essere fissa mentre navighi tra le pagine. Aggiungendo la classe ui-btn-active all'ancoraggio nel markup, è possibile impostare uno stato attivo per un elemento durante l'inizializzazione della barra di navigazione.

Ogni volta che si fa clic sulla barra di navigazione, il contenuto della pagina cambia e la barra degli strumenti persistente di intestazione e piè di pagina rimane fissa. Queste barre degli strumenti devono essere posizionate in ogni pagina.

Esempio

L'esempio seguente mostra l'uso della barra di navigazione persistente in 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come navbar_persistent.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/navbar_persistent.html e verrà visualizzato il seguente output.