<command label="">

ブラウザ ---
分類 メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所
内容

この要素は廃止されました】 参考情報としてこのページはしばらく残しておきます。

command要素は、ユーザーが実行できるコマンド(命令)を表します。この要素は、menu要素の子要素として使用するか、文書内の任意の場所に配置して使用します。


<command label="コマンド" onclick="...">

属性
必須属性
label="" コマンドのラベル 文字列 ラベルとして表示する文字列
任意属性
type="" コマンドのタイプ command 通常のコマンド (初期値)
radio ラジオボタン型のコマンド
checkbox チェックボックス型のコマンド
icon="" コマンドのアイコン URL アイコン画像のURL
radiogroup="" ラジオボタン型のグループ名 文字列 コマンドをグループ化するための名前
checked 選択された状態にする checked 値は省略可能
disabled コマンドの無効化 disabled 値は省略可能
グローバル属性(この要素上では、title属性が特別な意味を持ちます)
title="" コマンドのヒント テキスト 任意のテキスト
accesskey="" アクセスキーの割り当て 文字 任意のキー
  • radiogroup属性は、type="radio" の場合にのみ指定することができます。
  • checked属性は、type="radio" または type="checkbox" の場合にのみ指定することができます。

command要素を使用することで、メニュー項目ツールボタンなどを作成することができます。また、キーボードの操作で実行されるコマンドも作成が可能です。

command要素の使い方

コンテキストメニューツールバーのコマンドを作成したい場合は、menu要素の中にcommand要素を配置します。(詳しくはmenu要素のページをご覧ください)

次の例では、コンテキストメニューの中に3つのコマンドを配置しています。

<menu type="context" id="exmple">

<command label="コマンド1" onclick="...">
<command label="コマンド2" onclick="...">
<command label="コマンド3" onclick="...">

</menu>

次の例では、ツールバーの中に3つのコマンドを配置しています。

<menu type="toolbar">

<command label="コマンド1" onclick="...">
<command label="コマンド2" onclick="...">
<command label="コマンド3" onclick="...">

</menu>

キーボードの操作で実行されるコマンドは、accesskey属性を使って設定することになります。

次の例では、このコマンドとUのキーとを関連付けています。

<command label="コマンド" accesskey="U" onclick="...">

実行内容の設定について

コマンドの実行内容は、JavaScriptで設定することになります。

次の例では、onclick属性を使ってスクリプトが実行されるようにしています。(実際にはスクリプトのコードが入ります)

<command label="コマンド" onclick="スクリプト">

例えば、次のメニューでコマンド2をクリックすると、スクリプト2が実行されることになります。

<menu type="context" id="exmple">

<command label="コマンド1" onclick="スクリプト1">
<command label="コマンド2" onclick="スクリプト2">
<command label="コマンド3" onclick="スクリプト3">

</menu>

次の例では、特定のキーを押しながらUのキーを押すと、スクリプト4が実行されます。

  • 特定のキーはブラウザにより異なります。(例えば、IEの場合はAltキーになります)
<command label="コマンド4" accesskey="U" onclick="スクリプト4">

label属性について

label属性は、コマンドのラベルを指定します。この属性は必須となります。

この属性で指定した文字列が、コマンド名として表示されることになります。

<command label="表示されるコマンド名" onclick="...">

type属性について

type属性は、コマンドのタイプを指定します。指定できる値は次の3つです。

command
通常のコマンド(初期値)
radio
ラジオボタン型のコマンド(複数の選択肢から1つだけを選べるタイプ)
checkbox
チェックボックス型のコマンド(オン/オフを切り替えられるトグルタイプ)
<command type="checkbox" label="コマンド" onclick="...">

icon属性について

icon属性は、コマンドを表すアイコン画像を指定します。この属性で指定した画像が、メニュー項目やツールバーなどに表示されます。

<command label="コマンド" icon="example.gif" onclick="...">

radiogroup属性について

radiogroup属性は、コマンドのグループ名を指定します。複数のコマンドに同じグループ名を付けることで、1つのグループを作成することができます。

  • この属性は、type="radio" のコマンドにのみ使用することができます。

次の例では、groupAというグループ名によって、1つのグループを作成しています。この場合、3つのコマンドの中から1つだけを選択できることになります。

<command type="radio" radiogroup="groupA" label="コマンドA-1" onclick="...">
<command type="radio" radiogroup="groupA" label="コマンドA-2" onclick="...">
<command type="radio" radiogroup="groupA" label="コマンドA-3" onclick="...">

checked属性について

checked属性は、最初から選択された状態を指定します。

  • この属性は、type="radio" または type="checkbox" のコマンドにのみ使用することができます。
<command type="checkbox" label="コマンド" onclick="..." checked>

disabled属性について

disabled属性は、コマンドの無効化を指定します。

<command type="command" label="コマンド" onclick="..." disabled>

title属性について

command要素にtitle属性を指定すると、そのコマンドのヒント(説明)を示すことができます。

<command type="command" label="コマンド" onclick="..." title="コマンドの説明">

使用例

コンテキストメニューの操作でアラートを表示した例
  • 動作確認用のコードです。

<p contextmenu="exmple" style="padding: 10px; border: 1px #000000 solid;">この段落を右クリックすると、command要素で設定したメニュー項目が表示されます。</p>


<menu type="context" id="exmple">

<command type="command" label="コマンド1" onclick="alert('コマンド1のアラート');">
<command type="command" label="コマンド2" onclick="alert('コマンド2のアラート');">
<command type="command" label="コマンド3" onclick="alert('コマンド3のアラート');">

</menu>

表示例

この段落を右クリックすると、command要素で設定したメニュー項目が表示されます。

  • 未対応のブラウザでは、デフォルトのメニュー項目しか表示されません。
キーボードの操作でアラートを表示した例
  • 動作確認用のコードです。

<command type="command" label="コマンド(Q)" accesskey="Q" onclick="alert('Qキーのアラート');">
<command type="command" label="コマンド(W)" accesskey="W" onclick="alert('Wキーのアラート');">
<command type="command" label="コマンド(E)" accesskey="E" onclick="alert('Eキーのアラート');">

表示例
  • 未対応のブラウザでは何も表示されません。