jQuery Mobile - Tema de la barra de herramientas

Descripción

La muestra de tema será heredada por la barra de herramientas de encabezado y pie de página de la página de forma predeterminada; sin embargo, puede establecer fácilmente el color de la muestra del tema.
Siempre que utilice barras de herramientas fijas externas, debe establecer un tema siempre, ya que no habrá ninguna página principal de la que se pueda heredar el tema.

Ejemplo

El siguiente ejemplo demuestra el uso del tema de la barra de herramientas en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Toolbar Theme</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>
   </head>

   <body>
      <div data-role = "page" id = "page1">
         
         <div data-role = "header" data-theme = "b">
            <h2>Header</h2>
         </div>
         
         <div data-role = "main" class = "ui-content">
            <h2>Page content</h2>
         </div>
         
         <div data-role = "footer" data-theme = "b">
            <h2>Footer</h2>
         </div>
      </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_theme.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/toolbar_theme.html y se mostrará el siguiente resultado.

↰ Previous page