説明
jQuery Mobileでページ移動時の切り替え方法を指定するにはdata-transitionを使います。data-transitionに以下の切り替え方法を指定します。
| パラメータ | 内容 |
|---|
| slide | 横にスライド |
| slideup | 上にスライド |
| slidedown | 下にスライド |
| pop | 中央から拡大しながら表示 |
| fade | フェード |
| flip | Y軸に沿って反転(回転) |
| turn | 端からY軸に3D回転しながら表示(★1.1で追加) |
| flow | スライドしながらポップ表示(★1.1で追加) |
| none | トランジションなし(★1.1で追加) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile例文辞典</title>
<link rel="stylesheet" href="../../../lib/jquery.mobile.css">
<script src="../../../lib/jquery.js"></script>
<script src="../../../lib/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<p>ここはヘッダー</p>
</div>
<div data-role="content">
<p>ここが1ページ目になります</p>
<p><a href="#page2" data-transition="slide">2ページへ</a>(slide)</p>
<p><a href="#page2" data-transition="slideup">2ページへ</a>(slideup)</p>
<p><a href="#page2" data-transition="slidedown">2ページへ</a>(slidedown)</p>
<p><a href="#page2" data-transition="pop">2ページへ</a>(pop)</p>
<p><a href="#page2" data-transition="fade">2ページへ</a>(fade)</p>
<p><a href="#page2" data-transition="flip">2ページへ</a>(flip)</p>
<p><a href="#page2" data-transition="turn">2ページへ</a>(turn)</p>
<p><a href="#page2" data-transition="flow">2ページへ</a>(flow)</p>
<p><a href="#page2" data-transition="none">2ページへ</a>(none)</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<p>ここが2ページ目になります</p>
<p><a href="#" data-rel="back">戻る</a></p>
</div>
</div>
</body>
</html>
目次に戻る