jQuery Mobile - Página Única

Descrição

Um formato padrão é usado para criar páginas muitas vezes sem alterá-lo. O seguinte formato padrão é usado para criar uma única página no jQuery mobile.

<div data-role = "page">
   <div data-role = "header">
      <h1>Page Title</h1>
   </div>

   <div role = "main" class = "ui-content">
      <p>Page content goes here.</p>
   </div>

   <div data-role = "footer">
      <h4>Page Footer</h4>
   </div>
</div>

Exemplo

O exemplo a seguir demonstra o uso de Página Única no jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <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 = "pageone">
         <div data-role = "header">
            <h1>Single Page</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
            industry. Lorem Ipsum has been the industry's standard dummy text ever since 
            the 1500s, when an unknown printer took a galley of type and scrambled it to 
            make a type specimen book.</p>

            <p>It is a long established fact that a reader will be distracted by the 
            readable content of a page when looking at its layout. The point of using 
            Lorem Ipsum is that it has a more-or-less normal distribution of letters, 
            as opposed to using 'Content here, content here', making it look like readable 
            English. Many desktop publishing packages and web page editors now use Lorem 
            Ipsum as their default model text, and a search for 'lorem ipsum' will uncover 
            many web sites still in their infancy</p>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

Resultado

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

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

↰ Previous page