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>

Click to view the demo

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.





















Home »
  jQuery Mobile »
    Tutorial »




jQuery_Mobile
Form
List
Layout
Theme