Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
Hour 7. Learning About Page Layout > Using a Multiple Page Layout
Using a Multiple Page Layout
A multiple page layout is simply a collection of single page layouts. This can be achieved in a couple of different ways. You can create one HTML file and include multiple pages inside it, or you can create multiple HTML files that each contain a page and then link them together.
To illustrate this, let’s create a single file named single_multipage.html that contains multiple pages and buttons to change between them. Listing 7.2 shows a single HTML file that contains multiple pages.
Listing 7.2 The single_multipage.html File
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>Multiple Pages in a Single File</title>
5: <meta name="viewport" content="width=device-width, initial-scale=1">
6: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
7: <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
8: <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
9: </head>
10: <body>
11: <!-- Start: Page 1 -->
12: <div id="page1" data-role="page">
13: <div data-role="header">
14: <h1>Page 1 Header</h1>
15: </div>
16: <div data-role="content">
17: <p>The content for page one is here</p>
18: <a href="ch13sec1lev3.html#page2" data-role="button">Go to page 2</a>
19: </div>
20: <div data-role="footer">
21: <h4>Page 1 Footer</h4>
22: </div>
23: </div>
24: <!-- End: Page 1 -->
25: <!--Start: Page 2 -->
26: <div id="page2" data-role="page">
27: <div data-role="header">
28: <h1>Page 2 Header</h1>
29: </div>
30: <div data-role="content">
31: <p>The content for page two is here</p>
32: <a href="ch07sec1lev2.html#page3" data-role="button">Go to page 3</a>
33: </div>
34: <div data-role="footer">
35: <h4>Page 2 Footer</h4>
36: </div>
37: </div>
38: <!-- End: Page 2 -->
39: <!-- Start Page 3 -->
40: <div id="page3" data-role="page">
41: <div data-role="header">
42: <h1>Page 3 Header</h1>
43: </div>
44: <div data-role="content">
45: <p>The content for page three is here</p>
46: <a href="ch13sec1lev3.html#page1" data-role="button">Go to page 1</a>
47: </div>
48: <div data-role="footer">
49: <h4>Page 3 Footer</h4>
50: </div>
51: </div>
52: <!-- End: Page 3 -->
53: </body>
54: </html>
