jQuery Mobile - Single Page

Description

A standard format is used to create pages many times without changing it. The following standard format is used to create a single page in the 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>

Example

The following example demonstrates the use of Single Page in the jQuery Mobile.

Live Demo

<!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>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as single_page.html file in your server root folder.
Open this HTML file as http://localhost/single_page.html and the following output will be displayed.

jquery_mobile_pages.htm