この記事では、html5 のさまざまなページ切り替え効果とモーダル ダイアログの使用法について詳しくまとめています。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ページアニメーション:

data-transition 属性は、ページ切り替えのアニメーション効果を定義できます。
例: ポップします
データ遷移パラメータ テーブル:

パラメータの説明

スライド 右から左へスライドイン
スライドアップ 下からスライドイン
スライドダウン 上からスライドイン
ポップ 中央からフェードイン 拡大
フェード フェードイン
反転フリップ

注: ターゲット ページに戻るボタンを表示したい場合は、data-direction="reverse" 属性をリンクに追加できます。この属性は元の data-back="true" と同じです。正式版でもどの属性が保持されるかはわかりません。

モーダルダイアログ

モーダル ダイアログ ボックスは、丸いタイトル バーと閉じるボタンを備えた疑似フローティング レイヤーであり、排他的なイベント アプリケーションに使用されます。どの構造化ページでも data-rel="dialog" リンクを使用してモーダル ダイアログ アプリケーションを実装できます。
例: ダイアログを開く
このページ切り替え効果では、標準のデータ遷移パラメータ効果も使用できます。ページ。より良い結果を得るには、「pop」、「slideup」、および「flip」パラメータを使用することをお勧めします。
このモーダル ダイアログ ボックスは、親ページに戻るための閉じるボタンをデフォルトで生成します。スクリプト機能が弱いデバイスでは、data-rel="back" のリンクを追加して閉じるボタンを実装することもできます。
スクリプトをサポートしているデバイスの場合は、href="#" または data-rel="back" を直接使用してスクリプトを閉じることができます。組み込みの「close」メソッドを使用してモーダル ダイアログ ボックスを閉じることもできます (例: $('.ui-dialog').dialog('close'))。
モーダル ダイアログ ボックスは動的に表示される一時ページであるため、このページはハッシュ テーブルに保存されません。つまり、たとえば、リンクをクリックしてページ A を開くと、このページに戻ることができません。 .B ダイアログボックスが表示されると、操作が完了してダイアログボックスが閉じられ、ページ C にジャンプします。このとき、ブラウザの戻るボタンをクリックすると、ページ B ではなくページ A に戻ります。

ツールバー

ツールバーは主に「ヘッダー」、「フッター」、およびページ上のビジネス機能のアプリケーションをサポートおよび実装するその他の領域で使用されます。 jQuery Mobile は、比較的完全なソリューションを提供します。
ツールバーは、ヘッダー バー、フッター バー、ナビゲーション バーの 3 つのアプリケーションに分かれています。
タイトルとフッターには、ページ内にいくつかの異なる適用方法があります。デフォルトのツールバーはインラインに配置されており、互換性の低いデバイスも適切に最適化されます。
もう 1 つはフローティング (固定) 配置であり、「静的」配置とも呼ばれます。この配置方法では、ツールバーを画面の上部または下部に維持できます。また、クリック イベントを受け入れてツールバーを表示/非表示にすることもできるため、画面スペースを最大限に活用できます。
実装方法: タイトル領域とフッター領域に data-position="fixed" 属性を追加します。

タイトルコンテナ

タイトルコンテナは、ページのヘッダー領域にある表示コントロールで、主にタイトルとメイン操作領域を表示するために使用されます。
構造体コード:

ページの操作を容易にするために、左側に自動的に表示されますページが切り替わった後にタイトル コンテナの側面に戻るボタンを生成すると、開発の複雑さが簡素化されますが、アプリケーションの要件によっては、この戻るボタンが必要ない場合があります。タイトルに data-backbtn="false" 属性を追加できます。 「戻る」ボタンを防ぐコンテナ。自動的に作成されます。
タイトルコンテナの左右にボタンを配置し、自動生成される戻るボタンを回避した上で、戻るボタンの位置をカスタマイズできます。
例:


デフォルトの戻るボタンのテキストをカスタマイズする必要がある場合は、data-back-btn-text="previous" 属性を使用するか、拡張機能を使用して実装できます:

Ifタイトル領域の作成に標準構造を使用していない場合、フレームワークはデフォルトのボタンを自動的に生成しません。

フッターコンテナ

フッターコンテナの構造は基本的にヘッダーコンテナの構造と同じですが、data-role属性のパラメータを「footer」に設定するだけです。
例:

フッター コンテナーはヘッダー コンテナーよりも柔軟性がありますが、柔軟性はありません。タイトルコンテナと同様にボタンは2つしか配置できず、デフォルトではボタンは左右の上部に配置されず、デフォルトではフッター内のボタンは左から右に配置されており、方法がありません。さらに多くのボタンを配置します。
class="ui-bar" をフッター コンテナーに追加するだけで、フッターがツールバーに変わり、レイアウト スタイルを設定せずにきちんとしたボタンを追加できます。
例:


リンク効果のセットが必要な場合は、次のように記述できます:

コードをコピーします

コードは次のとおりです: