jQueryのモバイルは、ページを開くべき道を選択することができますCSS3の効果を含んでいます。
jQueryのモバイルトランジション効果
jQueryのモバイルは、1ページから次へと移行する方法については、様々な効果を持っています。
注:トランジション効果を達成するためには、ブラウザがCSS3 3D変形をサポートする必要があります。
12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
表中の数字は完全に3Dトランスフォームをサポートする最初のブラウザのバージョンを指定します。
トランジション効果は、データ移行の属性を使用して、任意のリンクやフォームの送信に適用することができます。
<a href="#anylink" data-transition="slide" >Slide to Page Two</a>
以下の表は、ページとダイアログの両方のデータ遷移属性で使用することができる利用可能な遷移を示しています。
遷移 | 説明 | Pagesの | ダイアログの |
---|---|---|---|
fade | デフォルト。 次のページにフェード | それを試してみてください | それを試してみてください |
flip | 前面に戻ってから、次のページに切り替え | それを試してみてください | それを試してみてください |
flow | 離れて現在のページをスローし、次のページで来ます | それを試してみてください | それを試してみてください |
pop | ポップアップウィンドウのように、次のページに移動します | それを試してみてください | それを試してみてください |
slide | 右から左へ次のページへスライド | それを試してみてください | それを試してみてください |
slidefade | 次のページで右から左へのスライドやフェード | それを試してみてください | それを試してみてください |
slideup | 下からトップへ次のページへスライド | それを試してみてください | それを試してみてください |
slidedown | 上から下へ次のページへスライド | それを試してみてください | それを試してみてください |
turn | 次のページに切り替えます | それを試してみてください | それを試してみてください |
none | いいえトランジション効果はありません | それを試してみてください | それを試してみてください |
フェージング効果はjQueryのモバイル内のすべてのリンク上のデフォルト(ブラウザがそれをサポートしている場合)です。
ヒント:ページが値を持つデータ方向の属性を使用し、代わりに右から左への、左から右にスライドしたい場合も、上記のすべてのエフェクトは、例えば、逆方向/逆方向にアクションをサポートする"reverse" 。