《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.2 技巧:用单个HTML文件服务多张页面

  1. 云栖社区>
  2. 博客>
  3. 正文

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.2 技巧:用单个HTML文件服务多张页面

异步社区 2017-05-02 14:33:00 浏览858
展开阅读全文

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章,第9.2节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

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文件中切换打开方式会导致意想不到的行为。

网友评论

登录后评论
0/500
评论
异步社区
+ 关注