スポンサーリンク
スポンサーリンク

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザではアニメーションが実行されます。このときのアニメーションを設定するのがdata-transition属性です。この属性のデフォルトの属性値は”fade”です。

サンプルコードの実行結果はこちら

この属性で設定されたアニメーションは、次のページに遷移するときだけではなく、戻るボタンによって前のページに戻る時も有効です。ただ、戻る時はページを遷移したときとは逆のアニメーションです。それと、data-transitionによる設定と逆の動きを設定させたいときは「data-direction=”reverse”」と指定します。

data-transition属性
属性値 次ページの表示 前ページに戻る時の表示
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を利用したアクセスは行わないです。

コメント

タイトルとURLをコピーしました