jQuery Mobile - Barras de ferramentas externas

Descrição

O cabeçalho e o rodapé serão colocados fora da página.

Essas barras de ferramentas são posicionadas antes e depois da página dentro do corpo e permanecerão no dom, a menos que sejam removidas manualmente.

Como as barras de ferramentas estão fora da página, elas não serão inicializadas automaticamente. Você tem que chamar o plugin da barra de ferramentas invocando a seguinte função.

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

Como as barras de ferramentas são colocadas fora da página, elas não herdarão um tema da página, em vez disso, você deve definir um tema para elas sempre.

o data-themeatributo pode ser usado para isso ou definir opções de tema sempre que você chamar o plug-in, invocando a seguinte função.

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

Exemplo

O exemplo a seguir demonstra o uso de barras de ferramentas externas no 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>

Resultado

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

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

↰ Previous page