Category: Getting Started with jQuery Mobile

In the multi-page example above (see Listing 2–3) we saw how jQuery Mobile navigates from one internal page to another. When the multi-page document was initialized, both internal pages were already added to the DOM so the page transition from one internal page to the other was extremely fast. When navigating from page to page we…

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…

It’s important to note that the title of an internal page will be set according to the following order of precedence: IMPORTANT: When linking to a page that contains multiple pages, you must add rel=”external” to its link. This will perform a full-page refresh. It is required because jQuery Mobile cannot load a multi-page document into the DOM…

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…

How does jQuery Mobile enhance the markup for an optimized mobile experience? For a visual, refer to Figure 2–2. Figure 2–2. jQuery Mobile Page Enhancements Diagram By now you should feel comfortable designing a basic jQuery Mobile page. You have been introduced to the core page components (page, header, content, footer) and have seen the resulting DOM…

A jQuery Mobile page template is shown in Listing 2–1. Before we continue any further, let’s get up and running. Copy the HTML template (ch2/template.html), paste it on your desktop and launch it from your favorite browser. You are now running a jQuery Mobile app that should look identical to Figure 2–1 regardless of what browser you are…