最新のWeb開発のチュートリアル
 

jQuery Mobileトランジション


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"

<a href="#pagetwo" data-transition="slide" data-direction="reverse" >Slide</a>
»それを自分で試してみてください