jQuery Mobile - Page unique

La description

Un format standard est utilisé pour créer des pages plusieurs fois sans le modifier. Le format standard suivant est utilisé pour créer une seule page dans 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>

Exemple

L'exemple suivant illustre l'utilisation de Single Page dans 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>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus sous single_page.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML en tant que http://localhost/single_page.html et la sortie suivante sera affichée.