Working with Pages in jQuery Mobile
This excerpt is from the Rough Cuts version of the book and may not represent the final version of this material.
Now that we've covered the basics of structuring mobile web pages we will take a deeper look and get a better understanding of the functionality behind them. As mentioned in Chapter 3, there are two ways to structure webpages for jQuery Mobile. The two different options are to 1. incorporate all the pages within the same file or 2. create separate files for each page like a typical website. Let's start by taking a look at the multi-page template.
Internal linking occurs automatically when you have multiple jQuery Mobile pages within the same HTML file. As we've covered, jQuery Mobile pages are defined by adding a data-role with a value of page to an HTML element and anything within that “page” becomes relative to that page. In jQuery Mobile typical separate webpages are considered Single page templates, while webpages that contain multiple “pages” are considered Multi-page templates. Let's refer back to our multi-page template example from the previous chapter (with a few small additions).
As you can see within this multi-page template there are two “pages” defined by div elements with custom ids. The jQuery Mobile framework will only show one of these pages at a time, plus it will use the data-title attribute to change the page title dynamically. The page that is shown by default is determined based on the order of the source code. In this example, the first page has an id of page-one, but if the pages in this file were switched, so that the element with an id of page-two were first, then that would be the default page to load. In other words, the value of the id attribute doesn't determine what page is shown by default, the default page is only determined by the source code order. However, the id is used for other important purposes.
- Create a hyperlink
- Type the pound (#) sign
- Specify the id value of the “page” that you want to link to
The end result looks like this:
<a href="#page-two">Link to page 2</a>
It's similar to creating a page anchor, the difference is that you're referencing the id value of another page. It's important to remember that each “page” needs to have a unique id value, in this case I've used page-one and page-two, but you can use something more descriptive and relative to the content that is contained within your jQuery Mobile page. The cool thing about the jQuery Mobile framework is that it will dynamically transition from one “page” to another without making you write an ounce of code.