details
要素Support in all current engines.
summary
要素に続くフローコンテンツ。open
— detailsが可視かどうかHTMLDetailsElement
を使用する。details
要素は、ユーザーが追加情報やコントロールを得ることができるディスクロージャーウィジェットを表す。
details
要素は、脚注には適さない。脚注をマークアップする方法の詳細については、脚注のセクションを参照のこと。
要素の子summary
要素がもしあれば、detailsの要約または凡例を表す。
要素のコンテンツの残り部分は、追加情報やコントロールを表す。
open
コンテンツ属性は、真偽属性である。存在する場合、この属性は要約と追加情報の両方がユーザーに表示されることを示す。属性が存在しない場合、要約のみが表示されるようになる。
次の例は、details
要素が進捗報告書で技術的な詳細を非表示にするために使用される様子を示す。
< section class = "progress window" >
< h1 > Copying "Really Achieving Your Childhood Dreams"</ h1 >
< details >
< summary > Copying... < progress max = "375505392" value = "97543282" ></ progress > 25%</ summary >
< dl >
< dt > Transfer rate:</ dt > < dd > 452KB/s</ dd >
< dt > Local filename:</ dt > < dd > /home/rpausch/raycd.m4v</ dd >
< dt > Remote filename:</ dt > < dd > /var/www/lectures/raycd.m4v</ dd >
< dt > Duration:</ dt > < dd > 01:16:27</ dd >
< dt > Color profile:</ dt > < dd > SD (6-1-6)</ dd >
< dt > Dimensions:</ dt > < dd > 320×240</ dd >
</ dl >
</ details >
</ section >
以下は、details
要素がデフォルトで一部のコントロールを非表示にするために使用できる様子を示す:
< details >
< summary >< label for = fn > Name & Extension:</ label ></ summary >
< p >< input type = text id = fn name = fn value = "Pillar Magazine.pdf" >
< p >< label >< input type = checkbox name = ext checked > Hide extension</ label >
</ details >
これは、ユーザーがそれぞれを開くことができる機能とともに、見出しの小さな集合にフィールドの集合を折りたたむことができるよう、リスト内の他のdetails
とともにこれを使用できる。
これらの例において、要約はコントロールが変更できるものをまとめたものであり、理想に満たない実際値ではない。
ユーザーがコントロールを操作するために自動的にopen
属性が追加および削除されるので、この属性の状態に基づく異なる、この属性CSSで要素に使用できる。ここでは、スタイルシートを使用して、要素を開いたり閉じたりしたときのsummaryの色をアニメーションさせている:
< style >
details > summary { transition : color 1 s ; color : black ; }
details [ open ] > summary { color : red ; }
</ style >
< details >
< summary > Automated Status: Operational</ summary >
< p > Velocity: 12m/s</ p >
< p > Direction: North</ p >
</ details >
summary
要素Support in all current engines.
details
要素の最初の子として。HTMLElement
を使用する。summary
要素はsummary
要素の親details
要素に属する残りの内容のキャプションまたは凡例を表す。
コマンドは、メニュー項目、ボタン、リンクの背後に抽象化したものである。一度コマンドが定義されると、インターフェイスの他の部分は、Disabled状態のようなファセットを共有するために単一の機能へ多くのアクセスポイントを許可し、同じコマンドを参照できる。
コマンドは、次のファセットを持つように定義される:
ユーザーエージェントは、次の条件に一致するコマンドを公開してもよい:
ユーザーエージェントは、ユーザーにこれらのキーを通知するための方法として、アクセスキーを持つコマンドのために特にこれを行うことが推奨される。
たとえば、そのようなコマンドは、ユーザーエージェントのメニューバーにリストされるかもしれない。
dialog
要素open
— ダイアログボックスが見えるかどうかHTMLDialogElement
を使用する。dialog
要素は、たとえばダイアログボックス、インスペクタ、またはウィンドウなどのタスクを実行するために、ユーザーが操作するアプリケーションの一部を表す。
open
属性は、真偽属性である。指定される場合、dialog
要素はアクティブであり、ユーザーが操作できることを示す。
open
属性を削除すると、通常ダイアログが非表示になる。しかし、そのようにすると、いくつかの奇妙な追加の結果となる:
close
イベントは発火しない。
close()
メソッドとユーザーエージェントが提供する取り消しインターフェイスは、もはやダイアログを閉じることができなくなる。
showModal()
メソッドを使用してダイアログが表示された場合、Document
はブロックされる。
これらの理由から、open
属性を手動で削除しない方が一般的には良い方法である。代わりに、ダイアログを閉じるためにclose()
メソッドを使用する、または非表示にするために 属性を使用する。
tabindex
属性は、dialog
要素で指定されてはならない。
show
()dialog
要素を表示する。
showModal
()dialog
要素を表示し、一番上のモーダルダイアログにする。
この方法は、autofocus
属性を履行する。
close
( [ result ] )dialog
要素を閉じる。
引数が与えられた場合、戻り値を提供する。
returnValue
[ = result ]dialog
の戻り値を返す。
戻り値を更新する設定が可能である。
このダイアログボックスは、いくつかの小さなプリントを持つ。strong
要素は、より重要な部分にユーザーの注意を引くために使用される。
< dialog >
< h1 > Add to Wallet</ h1 >
< p >< strong >< label for = amt > How many gold coins do you want to add to your wallet?</ label ></ strong ></ p >
< p >< input id = amt name = amt type = number min = 0 step = 0.01 value = 100 ></ p >
< p >< small > You add coins at your own risk.</ small ></ p >
< p >< label >< input name = round type = checkbox > Only add perfectly round coins </ label ></ p >
< p >< input type = button onclick = "submit()" value = "Add Coins" ></ p >
</ dialog >