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.
From the Rough Cut
From the Rough Cut
From the Rough Cut
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.
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).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template - jQuery Mobile: Design and Develop</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="assets/js/ui.js"></script>
</head>
<body class="container">
<div data-role="page" id="page-one" data-title="Page 1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<p>Body copy for page 1</p>
<p><a href="#page-two">Link to page 2</a></p>
</div>
<div data-role="footer">
Copyright
</div>
</div>
<div data-role="page" id="page-two" data-title="Page 2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
Body copy for page 2
<a href="#page-one">Link to page 1</a>
</div>
<div data-role="footer">
Copyright
</div>
</div>
</body>
</html>
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.
This is where jQuery Mobile pages begin to act like separate web pages. As you can see hyperlinks have been added to the original template in order to link from one page to another. This is sort of like toggle functionality that is common to see in JavaScript development, where id values are used to hide and reveal certain HTML elements. The difference in this case is that jQuery Mobile handles the functionality for you. To link from one page to another you simply need to:
- 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.