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" を使用します。