《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.18　技巧：利用JavaScript调用来变更页面...-CSDN博客

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

9.18　技巧：利用JavaScript调用来变更页面

在本章的开始部分，你已经看到了关于使用HTML链接（< a href="...">）把不同的页面连接起来的示例了。jQuery Mobile是JavaScript框架。虽然在jQuery Mobile中你几乎不用编写自己的JavaScript代码，但是还是需要有通过JavaScript变更页面的选择。代码清单9-21演示了如何使用JavaScript来变更至不同的页面。

代码清单9-21　通过JavaScript来变更页面

00 <!DOCTYPE html> 
01 <html> 
02 <head> 
03　　<title>Change Page</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　　<script>
15　　$(document).ready(function() {
16　　　
17　　　 $('#change').on('click', function(event) {
18　　　　　$.mobile.changePage('43b-change-page.html',
19　　　　　{transition: 'fade'});
20　　　 });
21　　
22　　});
23　　</script>
24 </head> 
25 <body> 
26 
27 <div data-role="page">
28 
29　 <div data-role="header">
30　　 <h1>Change page</h1>
31　 </div>
32 
33　 <div data-role="content">　
34　　 <a href="#" id="change" data-role="button">Change Page</a>
35　 </div>
36 
37 </body>
38 </html>

第18行和第19行调用了changePage。当将页面变更至指定的URL时，该代码要求使用fade过渡动画而不是默认的动画。与过渡动画的选项类似，你可以使用jQuery Mobile来指定其他的参数。

表9-2列出了其他的选项。
screenshot
代码清单9-22提供了要被加载到页面中的内容。

代码清单9-22　供JavaScript加载使用的内容

00 <!DOCTYPE html> 
01 <html> 
02 <head> 
03　 <title>Linked Page</title> 
04 </head> 
05 <body> 
06 
07 <div data-role="page">
08 
09　 <div data-role="header">
10　　 <h1>Linked File</h1>
11　 </div>
12 
13　 <div data-role="content">　
14　　 <p><a href="43-change-page.html">Link to an original
15　　　 file</a></p>　　
16　 </div>
17　 
18 </div>
19 
20 </body>
21 </html>

与早先的示例类似，示例故意去掉了脚本和样式，以便演示页面是用AJAX请求加载的。在实际的示例中，有很好的理由来提供脚本和样式：因为可能会直接请求该页面的URL。当代码是从别的jQuery Mobile页面加载而来的，则在头部中的任何脚本都会被忽略。