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
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 discrete sections of content as pages within the
application with the data-role="page" ...
With Safari, you learn the way you learn best. Get unlimited access to videos, live online training,
learning paths, books, interactive tutorials, and more.