对话框
通过在链接中添加data-rel=”dialog”的属性，可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择
例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下
<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>
注意：目前的测试版本存在问题，当在一个页面中写多个”page”时在以dialog的方式打开一个页面时，不会出现对话框效果
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <link href="Scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css" /> 6 <script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script> 7 <script src="Scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script> 8 </head> 9 <body> 10 11 <div data-role="page" id="home"> 12 13 <div data-role="header"> 14 <h1>Home</h1> 15 </div> 16 17 <div data-role="content"> 18 <p><a href="#about" data-rel="dialog" data-transition="slideup">About this APP</a></p> 19 </div> 20 21 </div> 22 23 <div data-role="page" id="about"> 24 25 <div data-role="header"> 26 <h1>About This App</h1> 27 </div> 28 29 <div data-role="content"> 30 <p>This app rocks! <a href="#home">Go home</a></p> 31 </div> 32 33 </div> 34 </body> 35 </html>