JqueryMobile学习之二---对话框

对话框

通过在链接中添加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>