jQueryモバイルへの移行

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

jQuery Mobile ページ切り替え効果

jQuery Mobile は、次のページへのさまざまなページ切り替え効果を提供します。

注: ページ切り替え効果を実現するには、ブラウザが CSS3 3D 切り替えをサポートしている必要があります:


12.0	10.0	16.0	4.0	15.0

表内の数字は、3D 回転をサポートするブラウザの最小バージョン番号です。

ページ遷移効果は、data-transition 属性を使用する任意のリンクまたはフォームに適用できます:

ページ遷移効果は、data-transition 属性を使用する任意のリンクまたはフォーム送信に適用できます:

<a href="#anylink" data-transition="slide">切换到第二个页面</a>

以下の表は、 data-transition 属性を使用した後に利用可能なページ遷移を渡す方法:

遷移	説明	ページ	ダイアログ
フェード	デフォルト。次のページにフェードします	試してください	試してください
反転	後ろから前に反転します	試してください	試してください
フロー	現在のページを捨てて次のページに入ります	試してみる	試してみる
ポップ	ポップアップのように次のページに進みます。	試してみる	試してみる
スライド	右から左にスワイプして次のページに進みます。	試してみる	試してみる
slidefade	右から左にスワイプして次のページにフェードします。	試してみる	試してみる
slideup	下から上に次のページにスライドします。	試してみる	試してみる
slidedown	上から下にスライドして次のページに進みます。	試してみる	試してみる
ターン	次のページに進みます。	試してみる	試してみる
なし	トランジション効果はありません。	試してみる	試してみる

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

ヒント: 上記のすべての効果は、バック動作をサポートします。たとえば、ページを右から左ではなく左から右にスライドさせたい場合は、「reverse」値を持つ data-direction 属性を使用します。これは、戻るボタンのデフォルトです。

<a href="#pagetwo" data-transition="slide" data-direction="reverse">切换</a>

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します