読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

jQueryMobileのページ切替効果をいろいろ試してみる

プレビュー


↓別ウィンドウを開いて見る
ページ切替効果

QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料

ポイント

  • data-transition」にfadeやflipといった値を指定します。
    • fade:ページがフェードイン/フェードアウトで切り替わる
    • flip:ページが回転して切り替わる
    • pop:ページが拡大しながら切り替わる
    • turn:ページが左端を軸にターンして切り替わる
    • flow:ページが浮き上がったようにして切り替わる
    • slidefade:ページがフェードイン/フェードアウトしながら左右にスライドして切り替わる
    • slide:ページが左右にスライドして切り替わる
    • slideup:ページが下から上にスライドして切り替わる
    • slidedown:ページが上から下にスライドして切り替わる
    • none:切替効果なし
  • ページ切替効果を逆回しにしたい場合は、「data-direction=“reverse”」を記述します。

コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ページ切替効果</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>ページ切替効果</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#about" data-transition="fade">fade</a></li>
<li><a href="#about" data-transition="flip">flip</a></li>
<li><a href="#about" data-transition="pop">pop</a></li>
<li><a href="#about" data-transition="turn">turn</a></li>
<li><a href="#about" data-transition="flow">flow</a></li>
<li><a href="#about" data-transition="slidefade">slidefade</a></li>
<li><a href="#about" data-transition="slide">slide</a></li>
<li><a href="#about" data-transition="slideup">slideup</a></li>
<li><a href="#about" data-transition="slidedown">slidedown</a></li>
<li><a href="#about" data-transition="none">none</a></li>
</ul>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton</h4>
</div>
</div>

<div data-role="page" id="about">
<div data-role="header">
<a href="#index" data-icon="back">戻る</a>
<h1>ページ切替効果</h1>
</div>
<div data-role="content">
<p>コンテンツ内容</p>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton</h4>
</div>
</div>

</body>
</html>