Additional customization

Working with multiple pages in jQuery Mobile is pretty simple. You could take what's been discussed in the first two chapters and build a pretty simple, but mobile-compliant, website right now. The following are a few more interesting tricks you may want to consider.

Page titles

You may have noticed that when you clicked on the Products page in the previous example, the title of the browser correctly updated to Products. This is because jQuery Mobile noticed, and parsed in, the title tag from the products.html file. If you click on the learn more link, you will notice that the title is also updated. How did this work? When aboutPage was loaded, jQuery Mobile used the header tag's content (All About Megacorp) for a title. You can override this by providing an additional argument to your p tag defining your page: data-title. The following snippet demonstrates this feature:

<p data-role="page" id="aboutPage" data-title="All About Megacorp">
  <p data-role="header"><h1>About Megacorp</h1></p>

You can find this version in test3.html.

Prefetching content

The benefit of including all your content within one HTML file is that all of your pages will be available immediately. But the negatives (too difficult to update and too slow for an initial download) far outweigh this. Most jQuery Mobile applications will include multiple files and typically just use one or two pages per file. You can, however, ensure speedier loading of some pages to help improve the user experience. Imagine our Megacorp website. It's got three pages, but the Products page is a separate HTML file. Since it's the only real content on the website, all of our users will most likely end up clicking on this link. We can tell jQuery Mobile to prefetch the content immediately upon the main page loading. This way, when the user does click on the link, the page will load much quicker. Once again, this comes down to one simple data attribute:

<p>
  Find out about our wonderful <a href="products.html" data-prefetch="true">products</a>.
</p>

In the previous link, all we've done is added data-prefetch="true" to the link. When jQuery Mobile finds this in a link, it will automatically fetch the content right away. Now, when the user clicks on the Products link, they will see the content even quicker. This modification is saved in test4.html.

Obviously, this technique should be used with care. Given a page with four main links, you may want to consider only prefetching the two most popular pages, not all four.

Changing page transitions

Earlier, we mentioned that you could configure the transitions jQuery Mobile uses between pages. Later in the book, we'll discuss how to do this globally. But if you want to switch to a different transition for a particular link, just include a data-transition attribute in your link:

<p>
Find out about our wonderful <a href="products.html" data-transition="pop">products</a>.
</p>

Valid values for transition include fade (the default), flip, flow, pop, slide, slidedown, slidefade, turn, and none.

Many transitions also support a reverse action. Normally, jQuery Mobile figures out if you need this, but if you want to force a direction, use the data-direction attribute:

<p>
Find out about our wonderful <a href="products.html" data-transition="pop" data-direction="reverse">products</a>.
</p>