jQuery Mobile - Marcação da Barra de Ferramentas

Descrição

A marcação da barra de ferramentas contém barras de ferramentas como o cabeçalho que aparece na parte superior e o rodapé que aparece na parte inferior da página.
A classe ui-title será adicionada aos cabeçalhos por estrutura.
Para manter a consistência visual, todos os títulos com a classe ui-title terão o mesmo estilo por padrão.
O cabeçalho e o rodapé são criados usando o atributo data-role .

Exemplo

O exemplo a seguir demonstra o uso da marcação da barra de ferramentas no 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código html acima como toolbar_markup.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/toolbar_markup.html e a seguinte saída será exibida.

↰ Previous page