JqueryMobile学习之二---对话框
生活随笔
收集整理的這篇文章主要介紹了
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>?
?
轉載于:https://www.cnblogs.com/caishuhua226/archive/2012/04/25/2469962.html
總結
以上是生活随笔為你收集整理的JqueryMobile学习之二---对话框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL Server 数据库的统计查询
- 下一篇： [Luogu1891]疯狂LCM[辗转相