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>

 

 

你可能感兴趣的:(jquerymobile)