*

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

公開日: : 最終更新日:2016/05/01 jQueryMobile , , ,

リンクを操作し、あるページから別のページに飛ぶときに、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を利用したアクセスは行わないです。

スポンサードリンク

関連記事

no image

トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

no image

<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボッ

記事を読む

no image

data-属性により、ヘッダとフッタを常時表示する

前回の記事の続きです。 ヘッダとフッタを常時表示 ページのヘッダとフッタにdata-posi

記事を読む

no image

アイコンとサムネイルを表示する

各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。 data-url属性

記事を読む

no image

data-属性によるウィジェットの設定

テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。 ウィジェ

記事を読む

no image

移動しないヘッダ、フッタにIDを設定する

MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid

記事を読む

no image

class属性によりレイアウトとテーマを設定する

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑