jQuery Mobile 遷移

❮ 前章へ 次章へ ❯

jQuery Mobile には、ページのオープン方法を選択できる CSS3 効果が含まれています。


jQuery Mobile の遷移効果

jQuery Mobile には、あるページから次のページへ遷移するためのさまざまな効果があります。

注: 遷移効果を実現するには、ブラウザが CSS3 3D 変形をサポートしている必要があります:

12.0 10.0 16.0 4.0 15.0

表の数値は、3D 変形を完全にサポートした最初のブラウザ・バージョンを示しています。

遷移効果は、data-transition 属性を使用して、あらゆるリンクやフォームの送信に適用できます:

<a href="#anylink" data-transition="slide">Slide to Page Two</a>

次の表は、ページとダイアログの両方の data-transition 属性で使用できる遷移を示しています:

遷移 説明 ページ用 ダイアログ用
fade デフォルト。 次のページにフェードする Try it Try it
flip 次のページに後から前にフリップする Try it Try it
flow 現在のページを投げ捨て、次のページに入る Try it Try it
pop ポップアップウィンドウのように次のページに移動する Try it Try it
slide 右から左に次のページにスライドする Try it Try it
slidefade 右から左にスライドし、次のページにフェードインする Try it Try it
slideup 次のページに下から上にスライドする Try it Try it
slidedown 次のページに上から下にスライドする Try it Try it
turn 次のページに回転する Try it Try it
none 遷移効果なし Try it Try it

jQuery Mobile のすべてのリンクにおいて、フェード効果がデフォルトです(ブラウザがサポートしている場合)。

チップ: 上のすべての効果は、 reverse/backward アクションもサポートしています。例えば、 ページを右から左への代わりに、左から右にスライドしたい場合は、data-direction 属性に値 "reverse" を使用します。

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>
Try it Yourself »

❮ 前章へ 次章へ ❯