2017 年 12 月 24 日に、HTML5.2 標準が固まりました。これは、モバイル端末が HTML5.3 の計画段階に入ったことを意味します。HTML5.2 は固まりましたが、いくつかの新しい内部仕様はまだモバイル ブラウザでサポートされていません。ここでは、新たに標準に組み込まれた一般的に使用されるタグ、つまりダイアログ タグを見てみましょう。
1. 前に書くDialog タグと言えば、馴染みのない人も多いかもしれません。結局のところ、このタグは HTML5.2 標準が修正されるまで Chrome ブラウザでのみサポートされていました。このタグの使用方法については、以下を参照してください。セマンティクス。
ここで考えられるのは、アラート、確認、およびその他のポップアップ ウィンドウです。はい、これらは同じファミリーに属しており、すべてポップアップ ボックスです。次に、これらのプロパティと使用シナリオを簡単に説明します。ダイアログタグ。
2. ラベルの使用方法<dialog open=> <h2>タイトル</h2> <p>内容</p></dialog>
これはタグであるため、実際には一般的に使用される div、p、およびその他のタグと同じです。上記のサンプル コードに示されているように、他の要素は内部的にサポートされています。
ここで、上記のサンプルコードの open 属性は、このポップアップ ウィンドウの表示と非表示を制御するために使用されています。 もちろん、アブノーマリティと同様に CSS を使用して任意に制御することもできます。一部のデバイスの補助機能（アクセシビリティ、画面読み上げソフトなど）を使用すると問題が発生する場合がありますので、標準の表示・非表示機能を使用することをお勧めします。
3. サポートされているデフォルトのメソッドまず、dialog タグは HTMLDialogElement の例であり、div タグと同じレベルのタグです。唯一の違いは、div タグよりも多くのデフォルト機能があることです。ダイアログで使用できるデフォルトのメソッドを見てみましょう。
var Dialog = document.getElementById(dialog);// ページ内に id=dialog のダイアログ タグがあると仮定します。 // ダイアログを閉じます。dialog.close(); // ダイアログをトーストダイアログを表示します。 / モデルの表示ダイアログdialog.showModal();// Dialog.close() が呼び出されたときに渡されるパラメータ値 Dialog.returnVlaue;//ダイアログの表示状態dialog.open;
まずサンプルにアクセスして操作し、次にどのような機能があるかを確認してから、戻って次の概要を比較することができます。
1: close メソッドは、非表示状態でも複数回呼び出すことができ、再度呼び出すこともできます。
2: close は変数を渡すことができます。変数は文字列であり、returnVlaue で表現される必要があります。
3: show メソッドは、非表示状態でも問題なく複数回呼び出すことができます。
4: show メソッドはトーストの位置を変更しません。show メソッドが呼び出された後も、ポップアップ ボックスは元の位置のままです。
5: show メソッド。表示位置は前の要素のすぐ後ろで中央に配置され、背後にマスク レイヤはありません。z-index の表示モードは、z-index を設定しない相対モードと同様です (showModal が以前に呼び出されなかった場合)。 ））。
6: showModal が呼び出されている場合、show メソッドの後、要素は showModal で表示された位置に表示され、(コンテンツの高さが大きく変化しても) 変化しません。
7: ダイアログ要素が 2 つある場合、両方とも show メソッドを呼び出します。HTML 構造では、(どちらのダイアログが最初に show メソッドを呼び出すかに関係なく) 後のダイアログが常に前のダイアログをカバーします。
8: showModal の表示の背後にはマスク レイヤーが存在します。表示レベルはブラウザの Web ビュー レベルです。これを理解するには、showModal を使用してダイアログ属性を表示します。ダイアログは最後にあります。これはモーダル ボックスに特に適しています。ポップアップ ボックスが表示された後に階層が混乱することはありません。
9: showModal は 1 回しか呼び出すことができません。ここでの 1 回とは、ダイアログが表示状態にある場合、再度 showModal を呼び出すとエラーが報告され、直接実行できないことを意味します。 open 属性が存在する場合、再度呼び出すとエラーが報告されるため、ダイアログの表示と非表示を切り替えるにはデフォルトの open 属性を使用することをお勧めします。
10: ページ上に 2 つのダイアログ要素があり、両方が showModal メソッドを呼び出している場合、HTML 内の構造に関係なく、後で呼び出されるダイアログのレベルは、前に呼び出されたダイアログのレベルよりも高くなります。
11:dialog.returnVlaue の値は、dialog.close(string) を呼び出すときに渡される値です。これは文字列のみをサポートします。dialog.close を呼び出すときに渡される値は、ダイアログが表示されている場合にのみ有効です。
12: close に値が渡されていない場合、returnVlaue の値は空になります。値がdialog.close(1) に渡された場合、次の表示の後、dialog.close() は閉じられますが、returnVlaue は依然として等しいです。 1に。
13: open の戻り値は true/false です。
4. サポートされているデフォルトのイベントダイアログのもう 1 つの利点は、クリックなどの基本イベントに加えて、ダイアログの 2 つの追加の特別なイベントをサポートしていることです。
var Dialog = document.getElementById(dialog); // ページ内に id=dialog を持つダイアログ タグがあると仮定します // close メソッドが呼び出されたとき、dialog.onclose = function(){}; // esc が押されたときPC側 キーを押したとき。しかし、Chrome版以降は動作しなくなったようです。ダイアログ.オンキャンセル = function(){};次に例を見てみましょう: ダイアログ イベントの表示例。
いくつかの質問もありますので、ここにリストしてみましょう。
1：onclose イベントは、dialog.close() を呼び出してダイアログを非表示にした場合にのみトリガーされます。
2: cancel イベントがトリガーされた後、close イベントは必ずトリガーされ続けます。 chrome64 バージョン以降、esc キーによるキャンセルはトリガーされません。
3: ダイアログを閉じるためのボタンが複数ある場合は、 close イベントのコールバックで、どのボタンを使用して close イベントをトリガーするかを決定するたびに、異なる値を渡します。
5. その他ダイアログのパフォーマンスの一部は以前に説明されているものであり、不完全または不正確である可能性があります。また、時間の経過とともに新しい機能が追加される可能性があります。
前の例を見ると、次のようないくつかの欠点もありました。スタイルは特に醜いですが、セマンティクスなどに影響を与えることなく CSS を使用してスタイルを完全にリセットできますので、安心してください。 。 それでおしまい。
ここではダイアログのパフォーマンスについてだけ話したいので、省略します。
6. まとめ結局のところ、ダイアログはポップアップ ダイアログのセマンティック ラベルであり、いくつかの独自の利点 (Web ビュー レベルの高さなど) を備えていますが、現在は Chrome でのみサポートされていますが、将来の使用には依然として非常に有望です。現在、他のブラウザでは、ダイアログ メカニズムのセットを自分で実装することもできます (これについてはすでに実装計画があるかもしれないので、ここでは調べません)。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。