jQuery Mobile: marcado de la barra de herramientas

Descripción

El marcado de la barra de herramientas contiene barras de herramientas como el encabezado que aparece en la parte superior y el pie de página que aparece en la parte inferior de la página.
La clase ui-title se agregará a los encabezados por marco.
Para mantener la coherencia visual, todos los encabezados con la clase ui-title tendrán el mismo estilo por defecto.
Tanto el encabezado como el pie de página se crean utilizando el atributo de rol de datos .

Ejemplo

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

<!DOCTYPE html>
<html>
   <head>
      <title>Toolbar Markup</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 = "header">
         <h2>Header</h2>
      </div>
      <h2>This is content of the page.</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</p>
      
      <div data-role = "footer">
         <h2>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_markup.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/toolbar_markup.html y se mostrará el siguiente resultado.

↰ Previous page