jQuery Mobile: barras de herramientas externas

Descripción

El encabezado y pie de página se colocarán fuera de la página.

Estas barras de herramientas se colocan antes y después de la página dentro del cuerpo y permanecerán en dom a menos que se eliminen manualmente.

Dado que las barras de herramientas están fuera de la página, no se inicializarán automáticamente. Debe llamar al complemento de la barra de herramientas invocando la siguiente función.

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

Como las barras de herramientas se colocan fuera de la página, no heredarán un tema de la página, sino que debe establecer un tema para ellas siempre.

los data-themeEl atributo se puede usar para esto o establecer opciones de tema cada vez que llame al complemento invocando la siguiente función.

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

Ejemplo

El siguiente ejemplo demuestra el uso de barras de herramientas externas en 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como toolbar_external.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/toolbar_external.html y se mostrará el siguiente resultado.

↰ Previous page