标签：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>header</h1> </div> <div data-role="content"> <p>content</p> </div> <div data-role="footer"> <h1>footer</h1> </div> </div> </body> </html>
将页面作为对话框：data-rel="dialog" -line31
设置过渡效果：data-transition -line17
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 5 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 6 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 7 </head> 8 <body> 9 10 <div data-role="page" id="page1"> 11 <div data-role="header"> 12 <h1>header</h1> 13 </div> 14 15 <div data-role="content"> 16 <!-- 转到外部页面使用href="xxx.html" --> 17 <a href="#page2" data-transition="slide">转到页面二</a> 18 </div> 19 20 <div data-role="footer"> 21 <h1>footer</h1> 22 </div> 23 </div> 24 25 <div data-role="page" id="page2"> 26 <div data-role="header"> 27 <h1>header</h1> 28 </div> 29 30 <div data-role="content"> 31 <a href="#dialog1" data-rel="dialog">弹出对话框</a> 32 </div> 33 34 <div data-role="footer"> 35 <h1>footer</h1> 36 </div> 37 </div> 38 39 <div data-role="page" id="dialog1"> 40 <div data-role="header"> 41 <h1>header</h1> 42 </div> 43 44 <div data-role="content"> 45 <a href="#page1">转到页面一</a> 46 </div> 47 48 <div data-role="footer"> 49 <h1>footer</h1> 50 </div> 51 </div> 52 53 </body> 54 </html>
标签：
原文地址：http://www.cnblogs.com/zcynine/p/4982828.html
