この記事では、主にさまざまなページ切り替え効果とモーダルダイアログボックスの使用を紹介します。 HTML5のさまざまなページ要素をより詳細に使用する手法を紹介します。それは非常に実用的です。それを必要とする友達はそれを参照できます。
この記事では、HTML5のさまざまなページの切り替え効果とモーダルダイアログの使用を詳細にまとめます。参照のためにそれを共有してください。特定の分析は次のとおりです。
ページアニメーション：データ移動プロパティは、ページ切り替えのアニメーション効果を定義できます。
たとえば、<a href = index.html data-transition = pop> pop </a>
データ移動パラメーターテーブル：
パラメーターの説明
右から左からページにスライドします
スライドアップは下からスライドします
スライドタウンスライドは上から下にスライドします
ポップはセンターから徐々に拡大します
フェードが徐々に現れます
フリップフリップ
注：ターゲットページに戻るボタンを表示する場合は、data-direction = Reverse属性をリンクに追加できます。この属性は、元のdata-back = trueと同じです。公式バージョンでどの属性が保持されるかはわかりません。
モーダルダイアログボックスモーダルダイアログは、丸みを帯びたタイトルバーと、排他的なイベントのための密接なボタンを備えた擬似膨張層です。構造化されたページを使用して、データREL =ダイアログリンクを使用してモーダルダイアログアプリケーションを実装できます。
たとえば、<a href = foo.html data-rel = dialog> openダイアログ</a>
このページの切り替え効果は、標準ページのデータトランジションパラメーター効果も使用することもできます。より良い結果を得るには、POP、スライドアップ、フリップパラメーターを使用することをお勧めします。
このモーダルダイアログボックスは、デフォルトで閉じるボタンを生成します。これは、親ページに戻るために使用されます。スクリプト機能が弱いデバイスでは、data-rel =戻るリンクを追加して、閉じるボタンを実装することもできます。
スクリプトをサポートするデバイスの場合、href =＃またはdata-rel =戻って直接シャットダウンを達成できます。また、組み込みの閉鎖方法を使用して、$（ '。ui-dialog'）。ダイアログ（ 'close'）などのモーダルダイアログボックスを閉じることもできます。
モーダルダイアログボックスは動的に表示される一時的なページであるため、このページはハッシュテーブルに保存されません。つまり、このページに退却することはできません。たとえば、ページAのリンクをクリックしてダイアログボックスbを開くと、操作が完了し、ダイアログボックスが閉じられ、この時点でパージCにジャンプします。ブラウザのバックボタンをクリックすると、ページAではなくページAに戻ります。
ツールバーツールバーは、主にヘッダー、フッター、その他の領域で使用され、ページ内のビジネス機能の適用をサポートおよび実装するために使用されます。 JQuery Mobileは、比較的完全なソリューションを提供します。
ツールバーは、ヘッダーバー、フッターバー、ナビゲーション（NAVバー）の3つのアプリケーションに分かれています。
その中で、タイトルとフッターはページ内のいくつかの異なる方法で適用されます。デフォルトのツールバーは、インラインの方法で配置されます。このポジショニング方法は、スクリプトが不十分なデバイスやCSS互換性を備えた適切な最適化など、最大限の互換性を実現できます。
別の方法は、それを修正することです。これは静的にすることもできます。このポジショニング方法により、ツールバーは常に画面の上部または下部に保持できます。クリックイベントを受け入れて、ツールバーを表示/非表示にすることができます。ツールバーは、画面スペースの使用を最大化するという目標を達成しました。
実装方法：データポジション=タイトルおよびフッター領域への属性を固定します。
タイトルコンテナタイトルコンテナは、主にタイトルとメイン操作領域を表示するために使用されるページヘッダー領域のディスプレイコントロールです。
構造コード：
コードをコピーします