How to include multiple pages in the single jQuery mobile document ?
In this article, we will learn how to include multiple pages in a single jQuery mobile document.
Approach: This can be achieved by creating multiple div’s and setting the data-role attribute to page, Now each div will represent one page, and each div needs to have a unique id for proper linking between the pages. The jQuery Mobile page structure is optimized to support either single pages or local internal linked “pages” within a single page.
CDN Links:
<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>
Steps: First, add the jQuery CDN to the script or download them to your local machine. We will create a document with 2 pages in it. Create two div elements in the page and set the data-role=”page”. Keep the id of the first div as HomePage and the id of the second div as AboutUs.
<div data-role="page" id="homePage">
We will then create two anchor tags with the href property as href=”#HomePage” and href=”#AboutUs” respectively in both divs.
<a href="#homePage">Home Page</a> <a href="#AboutUs">About Us</a>
We can then add other content in both the divs according to our needs.
Example:
HTML
< html > < head > < 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 > < style > a { display: inline-block; } a, h1 { text-align: center; margin: 10px; } </ style > < body > < div data-role = "page" id = "homePage" > < a href = "#homePage" >Home Page</ a > < a href = "#AboutUs" >About Us</ a > < h1 >Hello Beginner this is the home page</ h1 > </ div > < div data-role = "page" id = "AboutUs" > < a href = "#homePage" >Home Page</ a > < a href = "#AboutUs" >About Us</ a > < h1 >Hello again, this is About Us page</ h1 > </ div > </ body > </ html > |
Output: