jQuery Mobile には、ページのオープン方法を選択できる CSS3 効果が含まれています。
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" を使用します。