本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.18节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
在本章的开始部分，你已经看到了关于使用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页面加载而来的，则在头部中的任何脚本都会被忽略。
相关资源：jQuery.ui.1.7.2中文文档