jQuery Mobile - Barre degli strumenti esterne

Descrizione

L'intestazione e il piè di pagina verranno posizionati all'esterno della pagina.

Queste barre degli strumenti sono posizionate prima e dopo la pagina all'interno del corpo e rimarranno in dom se non vengono rimosse manualmente.

Poiché le barre degli strumenti si trovano all'esterno della pagina, non verranno inizializzate automaticamente. Devi chiamare il plugin della barra degli strumenti invocando la seguente funzione.

$(function() {
   $( "[data-role = 'header'], [data-role = 'footer']" ).toolbar();
});

Poiché le barre degli strumenti sono posizionate all'esterno della pagina, non erediteranno un tema dalla pagina, ma devi sempre impostare un tema per loro.

Il data-themel'attributo può essere utilizzato per questo o impostare le opzioni del tema ogni volta che chiami il plugin invocando la seguente funzione.

$(function() {
   $( "[data-role='header']" ).toolbar({ theme: "a" });
});

Esempio

L'esempio seguente mostra l'uso di barre degli strumenti esterne in jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Toolbar External Toolbars</title>
      <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 = 'header'], [data-role = 'footer']" ).toolbar({ theme: "a" });
         }); 
      </script>
   </head>
   
   <body>
      <div data-role = "header">
         <h2>External Header</h2>
      </div>
      
      <div data-role = "page">
         <h2>Page's Content</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
         labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
         dolore eu fugiat nulla pariatur.</p>
      </div>
      
      <div data-role = "footer">
         <h2>External Footer</h2>
      </div>
   </body>
</html>

Produzione

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

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

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