jQuery Mobile

Chapter 2. Application Structure and Navigation

Pages

As we saw in our first example, jQuery Mobile designates pages using the data-role attribute. Behind the scenes, jQuery Mobile selects elements based on this attribute and progressively enhances them, adding CSS classes, any needed markup, and event management. This may seem like a complicated way of handling things—why not simply have regular pages linked like you ordinarily would?—but this methodology gives jQuery Mobile several important features:

Page Transitions

By handling pages as separate content areas in one document, jQuery Mobile can create smooth page transitions, resulting in an overall “application-like” look and feel.

Navigation Management

jQuery Mobile can automatically handle page navigation, providing features like back buttons and deep linking.

Efficiency

Since resources are all contained in one file, the browser does not have to access the network over and over again, as it would with smaller individual files. This will help mitigate application slowness and battery drain on the mobile device. The trade-off is that for a large application there could be an appreciable download time for a large HTML page with many individual jQuery Mobile page views. However, once the file is downloaded and ready, the behavior will be much faster and will not necessarily be dependent on network access.

Internal Pages

As we have already seen, we can mark discrete sections of content as pages within the application with the data-role="page" ...