jQuery Mobile - Single Page
Advertisements
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 https://localhost/single_page.html and the following output will be displayed.
jquery_mobile_pages.htm
Advertisements