標籤:style blog class code java ext
jQuery Mobile 擁有一系列關於如何從一頁過渡到下一頁的效果。前提是瀏覽器必須支援 CSS3 3D 轉換:
瀏覽器支援
- Internet Explorer 10 支援 3D 轉換(更早的版本不支援)
- Opera 仍然不支援 3D 轉換
過渡效果可應用於任意連結或通過使用 data-transition 屬性進行的表單提交:
下面的表格展示了可與 data-transition 屬性一同使用的可用過渡:
以上所有效果同時支援反向動作,例如,如果您希望頁面從左向右滑動,而不是從右向左,請使用值為 "reverse" 的 data-direction 屬性。在後退按鈕上是預設的。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></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" id="pageone"> <div data-role="header"> <h1>HEADER</h1> </div> <div data-role="content"> <p>點選連結來查看滑動效果</p> <a href="#pagetwo" data-transition="slide">滑動到頁面二</a> </div> <div data-role="footer"> <h1>FOOTER</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>我是一個對話方塊!</h1> </div> <div data-role="content"> <p>點選連結來查看滑動效果</p> <a href="#pageone" data-transition="slide">滑動到頁面一</a><!--加上該屬性data-direction="reverse" 可以實現反向滑動--> </div> <div data-role="footer"> <h1>頁尾文本</h1> </div></div> </body></html>