How to include multiple pages in the single jQuery mobile document ?
Last Updated :
03 Mar, 2022
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 =
< script src =
</ script >
< script src =
</ 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 geeks 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...