リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザではアニメーションが実行されます。このときのアニメーションを設定するのがdata-transition属性です。この属性のデフォルトの属性値は"fade"です。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile ページ切替時のアニメーションを試す</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page1" data-role="page"> <article data-role="content" style="background-color:yellow;"> <p><a href="#page2" data-transition="fade">ページ２ fade</a></p> <p><a href="#page2" data-transition="flip">ページ２ flip</a></p> <p><a href="#page2" data-transition="flow">ページ２ flow</a></p> <p><a href="#page2" data-transition="slide">ページ２ slide</a></p> <p><a href="#page2" data-transition="slidedown">ページ２ slidedown</a></p> <p><a href="#page2" data-transition="slidefade">ページ２ slidefade</a></p> <p><a href="#page2" data-transition="slideup">ページ２ slideup</a></p> <p><a href="#page2" data-transition="turn">ページ２ turn</a></p> <p><a href="#page2" data-transition="pop">ページ２ pop</a></p> <p><a href="#page2" data-transition="none">ページ２ none</a></p> </article> </section> <section id="page2" data-role="page"> <article data-role="content" style="background-color:skyblue;"> <a href="#page1" data-transition="slide">ページ１</a> </article> </section> </body> </html> |
この属性で設定されたアニメーションは、次のページに遷移するときだけではなく、戻るボタンによって前のページに戻る時も有効です。ただ、戻る時はページを遷移したときとは逆のアニメーションです。それと、data-transitionによる設定と逆の動きを設定させたいときは「data-direction="reverse"」と指定します。
| 属性値 | 次ページの表示 | 前ページに戻る時の表示 |
|---|---|---|
| fade(初期値) | フェードイン | フェードアウト |
| flip | 中央の縦軸を中心に時計回り | 中央の縦軸を中心に反時計回り |
| flow | 画面が縮小した後、左に移動してから拡大 | 画面が縮小した後、右に移動してから拡大 |
| slide | 右から左に移動 | 左から右に移動 |
| slidedown | 上から下に移動 | 下から上に移動 |
| slidefade | 画面が左に移動したあとフェードイン | 画面が右に移動したあとフェードイン |
| slideup | 下から上に移動 | 上から下に移動 |
| turn | 画面左隅を軸に時計回り | 画面左隅を軸に反時計回り |
| pop | 画面中央下からが面前に拡大しながらフェードイン | 画面中央下の点に向かって縮小しつつフェードアウト |
| none | アニメーションなし | 同左 |
Ajaxを禁止
jQueryMobileの初期設定は、別のHTML文書に存在するページに遷移するときに、Ajaxで所得された遷移先のページが前のページのHTML文書に追加されて、アドレスバーのURLと<title>タグの内容が遷移後の文書の物に変更されます。ページを遷移するときにHTML文書全体をリンク先のHTML文書に変更したいときは、<a>タグに「data-ajax="false"」を設定します。
Ajaxでのアクセスが禁止されるとき
data-ajax="false"と同様に、<a>にrel="external"やtarget属性に任意の値を設定したものを追加しているときは、表示中のHTML文書とは異なるURLに対して、Ajaxを利用したアクセスは行わないです。