jQuery Mobile Pages Example

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Homepage</h1> </div> <div data-role="first" class="ui-content"> <p>My First Page</p> </div> <div data-role="footer"> <h1>Footer</h1> </div> </div> </body> </html>

1. Internal pages Example

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"> <h1>Homepage</h1></header> <div data-role="content" class="content"> <p>My first page!</p> <p><a href="#page2">Go to Second Page</a></p> </div> <footer data-role="footer"><h1>Footer</h1></footer> </section> <section id="page2" data-role="page"> <header data-role="header"><h1>Homepage</h1></header> <div data-role="content" class="content"> <p>My second page!</p> <p><a href="#page3">Go to Third Page</a></p> </div> <footer data-role="footer"><h1>Footer</h1></footer> </section> <section id="page3" data-role="page"> <header data-role="header"><h1>Homepage</h1></header> <div data-role="content" class="content"> <p>My third page!</p> <p><a href="#page1">Go back to First Page</a></p> </div> <footer data-role="footer"><h1>Footer</h1></footer> </section> </body> </html>

2. External pages Example

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"><h1>Homepage</h1></header> <div class="content" data-role="content"> <p>External Page 1</p> <p><a href="test2.html">Go to Second Page</a>.</p> </div> <footer data-role="footer"><h1>Footer</h1></footer> </section> </body> </html>

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <section id="page2" data-role="page"> <header data-role="header"><h1>Homepage</h1></header> <div class="content" data-role="content"> <p>External Page 2</p> <p><a href="test.html">Go to First Page</a>.</p> </div> <footer data-role="footer"><h1>Footer</h1></footer> </section> </body> </html>

jQuery mobile pages work on every smartphone devices. All content pages are created between <header> and <footer> section. It is content area and can add multiple pages for content. In jQuery mobile use data-role attribute to create page structure. HTML5 and CSS3 are used to create page section and beautification for pages. It may have some compatibility issues on desktop computers due to limited CSS3 support. We should use to Google Chrome for better page run.is the first attribute displayed page in the browser.creates toolbar at the top of the page and is used for heading or page title in header section.defines the content area of the page, where we can put one or more image, content and form button etc. UI-content is class to change padding margin and text beautification inside the page content.creates toolbar at the bottom of the page. Where we can define page footer name.We can create two type of pages, one is internal page and another is external page.In mobile page we can write one or more internal pages and gives same data-roll="" but all section id will different. These section must be top level siblings in the document body. It is not possible to nest pages within one another.Three internal pages are linked by each other by id. All page data-roll="page" is same but id is different. Second page id is called in first page by #link and third page id is called in second page and first page id is called in third page. So all internal pages are linked by each other and open inside main container.jQuery mobile can connect two or more external pages by page link inside HTML page. If you link to a separate page instead of an ID of a data-role="page" element within the current document, jQuery Mobile will perform an asynchronous fetch of the requested page and integrate it into the current document. jQuery mobile will fetch external page and search thought it for the first element marked by data-role="page" attribute.To give the demo of external page, we will carte two page.Two external pages are connected by internal link. First click on link "Go to First Page" then second page will open and when we click on second page link, it will redirect to first page.