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:
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.
jQuery Mobile can automatically handle page navigation, providing features like back buttons and deep linking.
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.
As we have already seen, we can mark discreet sections of content as pages within the
application with the