In addition to the simple, and more straightforward, single page layout we have just had a look at, jQuery Mobile allows for an easy-to-implement multi-page template which basically lets us create pages within pages.

To better understand how this multi-page thing is supposed to work, we must understand that a jQuery Mobile calls "page" a portion of code that represents a page.

In each HTML file, we can then include more than one "page", resulting in the browser fetching only one page and offering a smoother experience to the user.

The "page" which will show by default is the first one (that is, the one that comes first in the code).

Our "pages" are identified by their id attribute, which we can set to the outermost div of each "page", which also needs the data-role attribute to be set to page.

For example, we can try to create a jQuery Mobile site which has three pages (home page, about page, and contact page) all contained in a single HTML file called index.html...