Adding multiple pages to one file
In the previous chapter, we worked on a file that had a simple page of text. For our first modification, we're going to add another page to the file and create a link to it. If you remember, jQuery Mobile looks for a particular <p> wrapper to help it know where your page is: <p data-role="page">. What makes jQuery Mobile so simple to use is that we can add another page by simply adding another p using the same format. The code snippet Listing 2-1 shows a simple example of this feature:
Listing 2-1: test1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi Page Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<p data-role="page" id="homePage">
<p data-role="header"><h1>Welcome</h1></p>
<p role="main" class="ui-content">
<p>
Welcome to our first mobile web site. It's going to be
the best site you've ever seen. Once we get some content.
And a business plan. But the hard part is done!
</p>
<p>
You can also <a href="#aboutPage">learn more</a>
about Megacorp.
</p>
</p>
<p data-role="footer">
<h4>Copyright Megacorp © 2015</h4>
</p>
</p>
<p data-role="page" id="aboutPage">
<p data-role="header"><h1>About Megacorp</h1></p>
<p role="main" class="ui-content">
<p>
This text talks about Megacorp and how interesting it is.
Most likely though you want to <a href="#homePage">return</a>
to the home page.
</p>
</p>
<p data-role="footer">
<h4>Copyright Megacorp © 2015</h4>
</p>
</p>
</body>
</html>
Okay! So, as always, we begin our template with a few required bits: the HTML5 DOCTYPE, the meta tag, one CSS file, and two JavaScript files. This was covered in the previous chapter and we will not be mentioning it again. Note that this template switches over to the CDN version of the CSS and JavaScript libraries:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
These versions are hosted by the jQuery team. Most likely, your visitors would have loaded these libraries already, so they exist in their cache before arriving at your mobile website. While this is the route we will take as we go further with our examples, remember that you can always use the version you downloaded instead.
Notice that we have two <p> blocks. The first hasn't changed much from the previous example. We've added a unique ID (homepage) as well as a second paragraph. Notice the link in the second paragraph. It's using a standard internal link (#aboutPage) to tell the browser that we want to simply scroll the browser down to that part of the page. The target specified, aboutPage, is defined right below in another p block.
In a traditional web page, this would be displayed as two main blocks of text on a page. Clicking any of the two links would simply scroll the browser up and down accordingly. However, jQuery Mobile is going to do something significantly different here. The following screenshot shows how the page is rendered in a mobile browser:
Notice something? Even though our HTML included two blocks of text (the two <p> blocks), it only rendered one. jQuery Mobile will always display the first page it finds and only that page. Here comes the best part. If you click on the link, the second page will automatically load. Using your device's back button or simply clicking on the link will return you back to the first page (obviously, this only works on devices that have a back button, for example, Android devices):
You will also notice a smooth transition. This is something you can configure later on. But all of the interactions here—the showing and hiding of pages and the transitions—were all done automatically by jQuery Mobile. Now is a good time to talk about links and what jQuery Mobile does when you click on them.