ページ移動時の切り替え方法を指定する

書式

<a href="★URL★" data-transition="★切り替え方法★">〜</a>

説明

jQuery Mobileでページ移動時の切り替え方法を指定するにはdata-transitionを使います。data-transitionに以下の切り替え方法を指定します。
パラメータ内容
slide横にスライド
slideup上にスライド
slidedown下にスライド
pop中央から拡大しながら表示
fadeフェード
flipY軸に沿って反転(回転)
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>
目次に戻る