Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Multi-Page Template

jQuery Mobile supports the ability to embed multiple pages within a single HTML document as shown in Listing 2–3. This strategy can be used to prefetch multiple pages up front and achieve quicker response times when loading sub-pages. As you can see in the example below, the multi-page document is identical to the single-page template we saw earlier except a second page has been appended after the first page. The multi-page specific details are highlighted and discussed below.

Listing 2–3. Multi-Page Template (ch2/multi-page.html)

<head>
  <meta charset="utf-8">
  <title>Multi Page Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="jquery.mobile-min.css" />
  <script type="text/javascript" src="jquery-min.js"></script>
  <script type="text/javascript">
    /* Shared scripts for all internal and ajax-loaded pages */
  </script>
  <script type="text/javascript" src="jquery.mobile-min.js"></script>
</head>

<body>

<!-- First Page -->
<div data-role="page" id="home" data-title="Home">                1
    <div data-role="header">
        <h1>Welcome Home</h1>
    </div>

    <div data-role="content">
        <a href="#contact" data-role="button">Contact Us</a>      2
    </div>
</div>

<!-- Second Page -->
<div data-role="page" id="contact" data-title="Contact">
    <div data-role="header">
        <h1>Contact Us</h1>
    </div>

    <div data-role="content">
        Contact information...
    </div>
    <script type="text/javascript">
        /* Page specific scripts here */                          3
    </script>
</div>

</body>

  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint