Multi-Page Template
Description
jQuery Mobile supports embed multiple pages within a single HTML document.
A second page has been appended after the first page as follows.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multi Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head><!--from w ww .j a v a 2 s .co m-->
<body>
<!-- First Page -->
<div data-role="page" id="home" data-title="Welcome">
<div data-role="header">
<h1>Welcome Home</h1>
</div>
<div data-role="content">
<a href="#contact-info" data-role="button">Contact Us</a>
</div>
<script type="text/javascript">
/* Page specific scripts here. */
</script>
</div>
<!-- Second Page -->
<div data-role="page" id="contact-info" data-title="Contacts">
<div data-role="header">
<h1>Contact Us</h1>
</div>
<div data-role="content">Contact information...</div>
</div>
</body>
</html>
Note
Each page in a multi-page document must contain a unique id.
A page can have a data-role of either page
or dialog
.
<div data-role="page" id="contact-info" data-title="Contacts">
When the multi-page document is initially shown only the first page is displayed.
In the code above the page with id="home"
will be shown because it is the first page listed in the document.
To request the page with id="contact"
,
use the multi-page document URL with the hash
of the internal page as follows:
index.html#contact
When a multi-page document loads only the initial page will be shown. Subsequent pages will be cached within the DOM.
To set the title for each internal page, add the data-title
attribute.
When linking to an internal page you must refer to it by page id
.
For example, the href
to link to the
contact page must be set as href="#contact"
.
To scope scripts to a specific page they must be placed within the page container. This rule also applies to pages that get loaded via Ajax.
All scripts, including jQuery, jQuery Mobile, and your own custom scripts declared within the parent document's head tag will be available to all internal and Ajax-loaded pages.