ページ遷移について｜1日でマスターjQuery Mobile初心者の記 (3)

多彩で簡単なページ遷移のエフェクト

jQuery Mobileにはjavascriptを用意する事なくページ遷移の多彩なアニーメーションエフェクトが選べます。

<a>タグに
data-transition="slide"
"slide"の他に、
slideup
slidedown
pop
fade
fillip
turn
flow
slidefade

エフェクトをあてない場合は　none になります。

初期値ではfadeがあたっているようです。ただ、エフェクトの使いすぎはページを重くするそうなので、慎重に使いたところです。

内部ページと外部ページ

1つのHTMLファイルに複数のページを配置可能なところがjQueryMobileの大きな特徴なんですが、実際にどちらのほうがスタンダードかを吉川先生にお聞きしたところ、やはり管理の面からページごとにファイルを分け方がスタンダードではないかとの事。たしかに、すべてのページを1枚のファイルにしたら巨大にもなり、管理も大変ですよね。

Ajaxを利用して外部ページとして複数ファイルに分けてページ遷移させる場合は場合、参照元のDOMツリーに読込まれます。その時読込まれるのは「data-role属性="page"である最初の要素」のみとなります。これはAjaxによって外部ページを内部ページの同様に扱っています。 したがって

• idの重複に要注意。
• ページ要素だけなのでヘッダにスタイルやスクリプトを定義しても読込まれない。

ということに注意が必要です。

しかし、となると記載はいらないの？となりそうですが、どのページが基点となってもいい様にスタイル、スクリプトはすべてのページで共通して読み込む方がよさそうです。

こちらも1ファイルに複数ページを書いのと同じ様に指定したエフェクトでページ遷移します。 ただしローカルではページ遷移しないため、確認できる環境を作っておく事が必要になります。

Ajaxを使わないページリンク

普通に外部ファイルにリンクしたいんだけど、という場合は

• <a href=”menu.html” rel=”external”>

• <a href=”menu.html” data-ajax=false””>

とするなど。この場合はベージ遷移するときのエフェクトは発生しません。

【まとめ】

• 1ファイルに複数ページでページ遷移
• 外部ファイル複数ファイルで遷移
• Ajaxを切って、外部ファイルにリンク

と3つの方法があるようです。 いずれもjQuery Mobileのお作法がありますので、きちっと理解して使い分ける必要がありそうです。