Creating Multipage Websites in jQuery Mobile
This chapter is from the book
This chapter is from the book
This chapter is from the book
Now that we’ve covered the basics of structuring mobile webpages, we’ll take a deeper look and get a better understanding of the functionality behind them. As mentioned in Chapter 3, “Getting Started with jQuery Mobile,” there are two ways to structure webpages for jQuery Mobile: incorporate all the pages in the same file, or create separate files for each page like a typical website. Understanding the different page template types is the foundation for customizing a number of different page-related functionalities. In addition to learning about the page template types, you’ll also see how to preload and cache pages, work with different page transitions, and customize loading messages. You’ll learn to create custom functionality to take your pages to the next level.
Multipage Template
Internal linking occurs automatically when you have multiple jQuery Mobile pages in the same HTML file. As you’ve learned, 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 multipage templates. Let’s refer back to our multipage 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>Multipage template - jQuery Mobile: Design and Develop</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</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">
<p>Body copy for page 2</p>
<a href="#page-one">Link to page 1</a>
</div>
<div data-role="footer">
Copyright
</div>
</div>
</body>
</html>
Within this multipage template are two pages defined by div elements with custom ids. The jQuery Mobile framework shows only one of these pages at a time, and it uses the data-title attribute to change the page title dynamically. The page that is shown by default is determined by 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 came 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 determined only by the source code order. However, the id is used for other important purposes, such as linking pages to one another.
This is where jQuery Mobile pages begin to act like separate webpages. Note that hyperlinks have been added to the original template to link from one page to another. This is somewhat like the toggle functionality that’s common in JavaScript development, where id values are used to hide and reveal certain HTML elements. The difference here 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 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. Remember that each page needs 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 of your jQuery Mobile page. The cool thing about the jQuery Mobile framework is that it transitions dynamically from one page to another without requiring you to write an ounce of code. Figure 4.1 shows an example of this code in both page views and the transition from one to another.
)
Figure 4.1. A multipage template with two pages and the transition in between.