jQuery Mobile - Pagina singola

Descrizione

Un formato standard viene utilizzato per creare pagine molte volte senza modificarlo. Il seguente formato standard viene utilizzato per creare una singola pagina in 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>

Esempio

Il seguente esempio dimostra l'uso di Single Page in 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come single_page.html file nella cartella principale del server.

  • Apri questo file HTML come http://localhost/single_page.html e verrà visualizzato il seguente output.