The concept of a "page" in jQuery Mobile can be a slippery one. As users of a site, we know what pages are: we tap on a button or link and the stuff displayed on our phone changes - a new title and different content makes it clear that we have left one page for another page.
In traditional web development, this process of linking between pages would usually mean linking between two files: a page index.html might include a link (an a tag) to about.html. The user clicks the link for about.html, which sends a request from his/her browser to the server, which sends back a response with the contents of about.html.
With jQuery Mobile, "pages" might be multiple divs - each with the data-role="page" attribute - in the same file. Those pages might also be separate files. And any link on our jQuery Mobile pages could, of course, link to an external site like google.com.
Let's look at an example. Open up GettingStartedjQuery/Demos/nanandbobs/index.html in a mobile browser and in a file editor to review the code. The first page looks as follows:
The four pages - "Home", "Cafe", "Books", and "Contact" - correspond to the four
divs, each with
data-role="page", in the file index.html. Each page
div has its own header, content, and footer. We've used jQuery Mobile's
navbar UI widget to display the navigation links, and chosen simple icons to represent each of the four pages. We'll get more into more detail about this (and other) UI widgets, as well as custom icons, down the road.
Note the correspondence between the id value of each page
div and the links:
<a href="#home">links to the Home page, which has
<a href="#cafe">links to the Cafe page, which has
<a href="#books">links to the Books page, which has
<a href="#contact">links to the Contact page, which has
Note that the appropriate title (from the
data-role="header" div) shows for each page and that all other content - the navbar items, main content, etc. - displays for each page. There is just one file (index.html) here, but the multiple
divs act just like four separate pages as far as the user is concerned.
We use the
data-iconpos attribute to position the icons, in this case to "top", above the text. Other valid values are "bottom", "right", or "left". We apply a class of
"ui-btn-active ui-state-persist" to show the relevant icon as highlighted for each given page. The latter class,
ui-state-persist, ensures that the current nav element should remain highlighted even if the page is reloaded by the user.