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>- Each page in a multi-page document must contain a unique
id. A page can have adata-roleof eitherpageordialog. When the multi-page document is initially shown only the first page is enhanced and displayed. For example, when themulti-page.htmldocument is requested the page withid=“home”will be shown because it is the first page listed in the multi-page document. If you wanted to request the page withid=“contact”you would request the multi-page document with the hash of the internal page you wanted displayed (multi-page.html#contact). When a multi-page document loads only the initial page will be enhanced and shown. Subsequent pages will be enhanced as they get requested and cached within the DOM. This behavior is ideal for quick response times. To set the title for each internal page, add thedata-titleattribute. - 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 ashref=“#contact”. - If you want 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 and we will discuss this further in the next section. For example, any JavaScript declared internally on
multi-page.html#contactwill not be accessible tomulti-page.html#home. Only the scripts of the active page will be accessible. However, 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.
Setting the Page Title of an Internal Page
It’s important to note that the title of an internal page will be set according to the following order of precedence:
- If a
data-ti2–tlevalue exists, it will be used as the title for the internal page. For example, the title for“multi-page.html#home”will be set to“Home”. - If no
data-titlevalue exists, the header will be used as the title for the internal page. For example, if nodata-titleattribute existed for"multi-page.html#home", the title would be set to"Welcome Home", the value of itsheadertag. - Lastly, if neither a
data-titlenor header exists on the internal page the title element within the head tag will be used as the title for the internal page. For example, if nodata-titleattribute and no header existed for"multi-page.html#home“, the title would be set to"Multi Page Example", the value of the parent document’s title tag.
IMPORTANT: When linking to a page that contains multiple pages, you must add rel="external" to its link.
<!-- Must include rel="external" when linking to multi-page documents -->
<a href="multi-page.html" rel="external">Home</a>
<!-- May optionally use the target attribute -->
<a href="multi-page.html" target="_blank">Home</a>This will perform a full-page refresh. It is required because jQuery Mobile cannot load a multi-page document into the DOM of an active page. It would cause a namespace collision with how jQuery Mobile leverages the URL hash (#). jQuery Mobile leverages the hash value to identify internal pages within a multi-page document.
Additionally, because jQuery Mobile leverages the hash to identify unique pages within the DOM it is not possible to leverage the anchor tag bookmark feature (index.html#my-bookmark). jQuery Mobile treats my-bookmark as a page identifier, not a bookmark. Ajax-Driven Navigation will be discussed in greater detail in the next section.
Single-Page versus Multi-Page Documents
You will need to identify page access trends to determine which strategy makes most sense from a bandwidth and response time perspective. Multi-page documents will consume more bandwidth on their initial load but they only require a single server request and as a result their sub-pages are loaded with very fast response times. A single-page document will consume less bandwidth per request but they require a server request per page which results in much slower response times.
If you have several pages that are commonly accessed in sequence they make an ideal candidate to load upfront within the same document. The initial bandwidth hit is slightly higher but we achieve instant responses when accessing the next page. However, if the probability is low that the user will access both pages then you should opt to keep the files separate and achieve a lower bandwidth hit on the initial load.
There are tools available to help you collect page access trends and other metrics to help optimize your page access strategy. For example, Google Analytics2 or Omniture3 are common analytic solutions for Mobile Web applications.
__________
2 See http://www.google.com/analytics/.
3 See http://www.omniture.com/.
TIP: In most cases it is recommended to leverage the single-page model and dynamically append popular pages to the DOM in the background. We can achieve this behavior by adding the data-prefetch attribute to any link we want to dynamically load:
<a href="load-page-dynamically.html" data-prefetch></a>This hybrid approach allows us to selectively choose which links we want to load and cache. Again, this pattern is only recommended for pages that are accessed very frequently because this behavior will trigger an additional HTTP request to load the page dynamically.CopycopyHighlighthighlightAdd NotenoteGet Linklink
Leave a Reply