html5の各種ページ切り替え効果とモーダルダイアログボックスの使い方まとめ_html5チュートリアルスキル

この記事では、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" 属性を使用するか、拡張機能を使用して実装できます:

コードをコピーします

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

$.mobile.page.prototype.options.backBtnText = "previous"

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

フッターコンテナ

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

コードをコピーします

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

フッター コンテンツ

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

コードをコピーします

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

削除
追加
上

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

コードをコピーします

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

削除追加
上
下

ヒント : data-id 属性を使用すると、複数のページで同じフッターを使用できます。

ナビゲーション

ナビゲーション コンテナーは、1 行に最大 5 つのボタンを保持できるボタン グループ コントロールであり、data-role="navbar"
属性を持つ div を使用してこれらのボタンを保持します。
例:

コードをコピー

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

• 1


• 2

デフォルトのボタン追加 class="ui-btn-active"
ボタンの数が 5 を超える場合、ナビゲーション コンテナーは適切な数で自動的に複数行に表示されます。

ボタン

data-role="button" を使用して、ページ上の任意のリンクをボタンの表示スタイルとして宣言できます。スタイルを統一するために、ページが読み込まれるときに、フレームワークはフォーム クラス ボタンを jQuery Mobile スタイル ボタンに自動的にフォーマットします。data-role 属性を追加する必要はありません。
フレームワークには、ボタンに使用できる一般的に使用されるアイコンのセットが含まれており、data-icon 属性のパラメーターを使用して、さまざまなアイコン効果を定義および表示します。
例:

コードをコピーします

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

削除

データアイコンネイティブパラメータリスト

アイコンはデフォルトで左側に表示されるほか、data-iconpos 属性を使用してアイコンとテキストの位置関係を定義することもできます。
data-iconpos パラメータリスト:

パラメータの効果:
右のアイコンはテキストの右側にあります
上のアイコンはテキストの上にあります
下のアイコンはテキストの下にあります
data-iconpos="notext" 属性により、テキストを非表示にするボタン。

インライン スタイル

デフォルトでは、フレーム内のボタンは水平方向に排他的であり、画面の幅に応じて水平方向に適応しますが、この時点では、複数のボタンを 1 行に表示する必要があることがよくあります。インラインと呼ばれる機能。モード属性は
data-inline="true" です。
例:

コードをコピーします

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

キャンセル
保存

ボタングループ

jQuery Mobile フレームワークは、複数のボタンをグループで表示でき、ボタン間のコンパクトな関係を示すために data-role="controlgroup" が使用されます。例:

コードをコピー

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

はい

たぶん

ボタンが必要な場合 横配置の場合はdata-type="horizo​​ntal"属性を追加できます。

フォーム申請

jQuery Mobile フレームワークは、ネイティブ HTML フォーム要素の新しい形式の表現をカプセル化し、タッチ スクリーン デバイスの操作を最適化します。 form 要素は、フレームのページ内の jQuery Mobile スタイル要素に自動的にレンダリングされます。
form 要素の使用方法は、デフォルトの HTML メソッドと同じです。Post メソッドと get メソッドを使用してデータを送信することもできます。ただし、要素の ID 名は使用できないことに注意してください。 jQuery Mobileでは、従来の仕様では同一DOM内に複数のページが存在できるため、IDの問題によるエラーを防ぐために、フォーム要素のID命名はプロジェクト全体で一意にすることが推奨されています。
デフォルトでは、フレームワークは標準ページのフォーム要素のスタイルを自動的にレンダリングします。レンダリングが成功すると、このコントロール要素は jQuery の関数を使用して操作できるようになります。場合によっては、ネイティブ HTML フォーム要素を使用する必要があります。モバイル フレームワークがこの要素を自動的にレンダリングしないようにするために、フレームワークの data-role 属性に制御パラメータ「none」を導入します。この属性パラメータを使用すると、要素がネイティブ HTML 状態で表示されます。
例:

コードをコピー

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

A
BC

リストアプリケーション

情報リストは、開発アプリケーションで比較的頻繁に使用されるコントロールであり、データの表示、ナビゲーション、データのリストなどに使用されます。さまざまな情報内容に適応するために、リストもさまざまな形式で表示されます。
リストのコード構造は、順序付きリストと順序なしリストで実装されます。ul または ol で data-role="listview" を宣言している限り、次のようにフレームをリストの形式でレンダリングできます。

コードをコピーします

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

• Acura




• BMW

リストにデータを追加する必要がある場合は、データがロードされた後に、refresh() メソッドを実行してリストを更新する必要があります。
例:

コードをコピー

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

$('ul').listview('refresh');

上記は、jQuery Mobile を使用してインターフェイスを構築するための基本的なルールです。

この記事が皆様の HTML5 プログラミング設計に役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。