HTML要素インタラクティブ要素
details 
ユーザーが要求に応じて取得できる追加の情報またはコントロール
2009/8/26
構文
<details>~</details>
details要素は、ユーザーが要求に応じて取得できる追加の情報またはコントロールを表します。
details要素の最初の子要素には、details要素の要約を表すlegend要素を指定します。 ブラウザでは、legend要素だけが表示され、ユーザーが legend要素をクリックすることで、詳細の表示・非表示を切り替えることができまます。
※details要素を脚注として使用するのは適切ではありません。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| open | TRUE FALSE | 詳細をユーザーに見せるかどうかの有無を指定。詳細を表示する場合はTRUEを指定。デフォルトはFALSE（非表示）。 |
datagrid
選択したテーブルデータのリスト
2009/8/26
構文
<datagrid>~</datagrid>
datagrid要素は、ツリー、リスト、表データのような対話的な表現を表します。
表示されるデータは、メソッドを使用するスクリプトによって提供されます。 ブラウザでは、ツリー型リストとして表示されます。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| disabled | disabled | datagrid要素を無効化する場合に指定。 |
command
命令ボタン
2009/8/26
構文
<command>~</command>
command要素は、ラジオボタン、チェックボックス,ボタンのようなユーザーが呼び出せるコマンドを表します。 type属性にコマンドのタイプを指定します。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| type | コマンドタイプ |
コマンドのタイプを指定。デフォルトは「command」。
|
| label | コマンド名 | コマンドの名前を指定。ラベルは表示される。 |
| icon | URL | コマンドを表す画像のURLを指定。 |
| disabled | disabled | command要素を無効化する場合に指定。 |
| checked | TRUE FALSE | コマンドがチェックされるかどうかの有無を指定。チェックされる場合はTRUEを指定。type属性が「radio」または「checkbox」の場合のみ使用可。 |
| radiogroup | ラジオグループ名 | コマンドが属するラジオグループ名を指定。type属性が「radio」の場合のみ使用可。 |
| default | default | コマンドを起動する場合に指定。コマンドがコンテキスト内にある場合のみ使用可。 |
| title | 説明文 | コマンドについての説明を指定。 |
bb
ユーザーが呼び出し可能なユーザーエージェントのコマンド
2009/8/26
構文
<bb>~</bb>
HTML5から削除されました。
bb要素は、ユーザーが呼び出し可能なユーザーエージェントのコマンドを表します。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| type | コマンドタイプ |
列挙属性。コマンドのタイプを指定。
|
サンプル
<style type="text/css">
menu li { display: none; }
menu li:enabled { display: inline; }
menu li:not(:first-child)::before { content: ' | '; }
</style>
<menu id="menu_bb">
<li><a href="settings.html" onclick="panels.show('settings')">Settings</a>
<li><bb type="makeapp">Download standalone application</bb>
<li><a href="help.html" onclick="panels.show('help')">Help</a>
<li><a href="logout.html" onclick="panels.show('logout')">Sign out</a>
</menu>
<script type="text/javascript">
var bb=document.getElementById('makeapp');
if (bb.supported && bb.enabled) {
bb.parentNode.nextSibling.textContent=' | ';
bb.textContent='Download standalone application';
}else{
bb.parentNode.removeChild(bb);
}
</script>