ホームページ >ウェブフロントエンド >H5 チュートリアル >html5.2 ダイアログの概要

html5.2 ダイアログの概要

不言オリジナル: 2018-07-03 10:03:321760ブラウズ

この記事は主に html5.2 ダイアログの詳細な導入に関する関連情報を紹介します。内容は非常に優れているので、参考として共有します。

2017 年 12 月 24 日に、HTML5.2 標準が固まりました。これは、モバイル端末が HTML5.3 の計画段階に入ったことを意味します。ただし、一部の新しい内部仕様はモバイルブラウザーではサポートされていません。ここでは、標準に新しく組み込まれた一般的に使用されるタグを見てみましょう。

1. 前に書いてあります

dialogタグと言えば、馴染みのない方も多いかもしれませんが、結局のところ、このタグはHTML5.2規格が修正されるまでサポートされておらず、Chromeブラウザでのみサポートされています。このタグの使用に関しては、意味論に従って、その会話も明確に理解できます。

ここで考えられるのは、アラート、確認、およびその他のポップアップウィンドウです。はい、これらは同じファミリーに属しており、すべてポップアップボックスです。次に、いくつかのプロパティと使用シナリオを簡単に説明します。ダイアログタグの。

2. タグの使用法

<dialog open="">      
 <h2>Title</h2>    
 <p>Content</p>
</dialog>

これはタグであるため、実際には一般的に使用される p、p およびその他のタグと同じです。上記のサンプルコードに示されているように、他の要素もサポートされています。内部的に。

ここで、上記のサンプルコードの open 属性がこのポップアップウィンドウの表示と非表示を制御するために使用されていることに気付くかもしれません。もちろん、CSS を使用して任意に制御することもできます。この場合、一部のデバイスの補助機能（アクセシビリティ、画面読み上げソフトなど）を使用すると異常が発生する場合がありますので、標準で備わっている表示・非表示機能を使用することをお勧めします。

3. サポートされているデフォルトメソッド

まず、dialog タグは HTMLDialogElement の例であり、HTMLElement から継承されているため、p タグと同じレベルのタグです。唯一の違いは、サイズが小さいことです。このセクションでは、ダイアログで使用できるデフォルトのメソッドを見ていきます。

var dialog = document.getElementById("dialog");
// 假设页面中，有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.showModal();

// dialog.close()调用时传入的参数值
dialog.returnVlaue;

// dialog的显示状态
dialog.open;

まずサンプルにアクセスして操作し、次に機能を確認してから、戻って比較してください。以下の概要:

1: close メソッドは複数回呼び出すことができます。たとえ非表示であっても、再度呼び出すことができます。

2: close は変数を渡すことができます。変数は文字列であり、returnVlaue で表現される必要があります。

3: show メソッドは、非表示状態であっても問題なく複数回呼び出すこともできます。

4: show メソッドはトーストの位置を変更しません。show メソッドが呼び出された後も、ポップアップボックスは元の位置のままです。

5: showメソッド。表示位置は前の要素のすぐ後ろで中央にあり、背後にマスクレイヤーはありません。z-indexの表示モードは、z-indexを設定しない相対モードと同様です(設定されていない場合) showModal の前に呼び出されます)。

6: showModal が呼び出された場合、show メソッドの後、要素は showModal で表示された位置に表示され、(コンテンツの高さが大幅に変化しても) 変化しません。

7: HTML 構造内で 2 つのダイアログ要素があり、その両方で show メソッドが呼び出される場合、後者のダイアログは常に前の上位層をカバーします (どちらのダイアログが最初に 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 つの追加の特別なイベントをサポートしていることです。ダイアログイベントの表示例。

また、いくつかの問題があるので、ここにリストしてみましょう:

1: ダイアログを非表示にするために、dialog.close() を呼び出した場合にのみ、onclose イベントをトリガーできます。

2: cancel イベントがトリガーされた後、close イベントは確実にトリガーされ続けます。chrome64 バージョン以降、esc キーによってキャンセルはトリガーされません。

3: ダイアログを閉じるためのボタンが複数ある場合は、close イベントのコールバックで、どのボタンが Close をトリガーするかを決定するために、異なる値を渡します。イベント。

5. その他

ダイアログのパフォーマンスの一部は、不完全または不正確である可能性があります。また、追加を歓迎します。

前の例を見ると、スタイルが特に醜いなどのいくつかの欠点もありました。これに関しては、セマンティクスや他のものに影響を与えることなく、CSS を完全に使用してスタイルをリセットできます。心配しないでください。それ。

ここではダイアログのパフォーマンスについて話したいだけなので、それはしません。

6. 概要

dialog は、結局のところ、ポップアップダイアログのセマンティックタグであり、いくつかの独自の利点 (Webview レベルの高さなど) を持っていますが、現在は Chrome でのみサポートされています。将来的にはまだ非常に便利です。できれば、今すぐ互換性を持たせて、ダイアログメカニズムを他のブラウザに実装できるようにしてください (おそらく、これについてはすでに実装計画があるので、ここでは調べません)。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

html5.2 ダイアログの概要

関連記事