9.2 技巧：用单个HTML文件服务多张页面
可以在单个HTML文件中添加多张页面。这样的话，就不需要发送新的请求到服务器，所以接口就更具响应性了。除此之外，离线时仍旧可以导航页面。代码清单9-2演示了如何链接至第二张页面。
对于页面数量有限的情况，这会工作得很不错。然而，有时内存消耗会成为问题（取决于目标设备的规格）。稍后会讨论链接至外部页面。
代码清单9-2 导航到第二张页面
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Pages</title>
04 <meta name="viewport"
05 content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href=
07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08 <script type="text/javascript"
09 src="http://code.jquery.com/jquery-1.7.1.min.js">
10 </script>
11 <script type="text/javascript" src=
12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13 </script>
14 </head>
15 <body>
16
17 <div data-role="page">
18
19 <div data-role="header">
20 <h1>First</h1>
21 </div>
22
23 <div data-role="content">
24 <p>Hello world <a href="#second">and go to the second</a></p>
25 </div>
26
27 <!--
28 Either/or... the result is in the LINK, not the DIV
29
30 <div data-role="content">
31 <p>Or... <a href="#second" data-rel="dialog"
32 data-transition="pop">show the exact same page as a
33 dialog!</a></p>
34 </div>
35 -->
36 </div>
37
38 <div data-role="page" id="second">
39
40 <div data-role="header">
41 <h1>Second</h1>
42 </div>
43 <div data-role="content">
44 Hello, again!
45 </div>
46
47 </div>
48
49 </body>
50 </html>
让我们从HTML的底部开始说起。第38～45行的div是第二张页面。它有自己的header和content。更为重要的是，div元素有一个id属性。
第23～25行是第一张页面的主体内容，里面有一个链接指向了第二张页面。在id属性前面放一个#把它变为一个哈希标记（hash-tag），这样就可以作为锚点被引用了。点击链接时，请注意观察移动浏览器的URL地址栏。你可以使用这个新的URL来建立该页面的书签（bookmark），当你点击该书签时就能直接打开第二张页面了。
最后，第27～35行是第23～25行的一种替代方案。它当前被注释标记禁用了。如果你用该内容替换第23～25行的内容，第二张页面会以对话框而不是新页面的方式打开。和你所看见的一样，是以普通页面还是以对话框的方式来打开页面是由链接指定的。
推荐你不要混合使用多种打开页面的方式。要么以页面的方式打开，要么以对话框的方式打开。在单个HTML文件中切换打开方式会导致意想不到的行为。
时间： 2024-09-18 04:25:37