本节书摘来自异步社区《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列出了其他的选项。
代码清单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页面加载而来的，则在头部中的任何脚本都会被忽略。
