menu 要素
4.11.4 menu
要素
- カテゴリー:
- フロー・コンテンツ
- この要素の
type
属性が toolbar 状態にある場合: インタラクティブ・コンテンツ - この要素の
type
属性が toolbar 状態、または、list 状態にある場合: パルパブル・コンテンツ - この要素を使うことができるコンテキスト:
- フロー・コンテンツが期待される場所
- コンテンツ・モデル:
- 0 個以上の
li
要素、または、 - フロー・コンテンツ、のいずれか
- コンテンツ属性:
- グローバル属性
type
label
- DOM インタフェース:
-
interface HTMLMenuElement : HTMLElement { attribute DOMString type; attribute DOMString label; };
menu
要素は、コマンドのリストを表します。
type
属性は列挙属性で、宣言されているメニューの種類を示します。この属性は 3 つの状態を持ちます。context
キーワードは、context menu 状態に相当し、この要素はコンテキスト・メニューであると宣言するものです。toolbar
キーワードは、toolbar 状態に相当し、この要素はツールバーであると宣言するものです。この属性は省略することもできます。省略された場合のデフォルトは list 状態となり、この要素はただ単にコマンドのリストに過ぎず、コンテキスト・メニューを宣言するものでも、ツールバーを定義するものでもありません。
menu
要素の type
属性が context menu 状態にあるなら、この要素はコンテキスト・メニューのコマンドを表します。ユーザーは、そのコンテキスト・メニューが有効となっているなら、そのコマンドを実行することができます。
menu
要素の type
属性が toolbar 状態にあるなら、この要素は、ユーザーがすぐに実行することができる有効なコマンドのリストを表します。
menu
要素の type
属性が list 状態にあるなら、この要素は非順序の項目リストを表します(それぞれの項目は li
要素で表されます)。それぞれの項目は、ユーザーが実行したり、有効化することができるコマンドを表します。この要素の子要素に li
要素がなければ、利用可能なコマンドを説明するフロー・コンテンツを表します。
label
属性は、メニューのラベルを与えます。これは、ユーザーエージェントが UI でネストされたメニューを表示するために使われます。例えば、コンテキスト・メニューに、もう一つメニューを含んでいる場合、ネストされたメニューの label
属性を、サブメニューのラベルに使うでしょう。
type
と label
IDL 属性は、それぞれ、同じ名前の対応するコンテンツ属性を反映しなければいけません。
4.11.4.1 イントロダクション
このセクションは非規定です。
menu
要素は、コンテキスト・メニューやツールバーを定義するために使われます。
例えば、次は 3 つのメニューボタンを伴ったツールバーを表します。それぞれのボタンには、一連の選択肢を伴ったドロップダウン・メニューがあります:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li> </menu>
対応ブラウザでは、次のように表示されるでしょう:
古いブラウザでは、3 つの項目を伴った黒丸付きのリストのように見えるでしょう。最初の項目には 4 つのボタンが、2 つ目の項目には 3 つのボタンが、3 つ目の項目には、リンクから構成される項目を伴った黒丸が 2 つネストされるでしょう。
次では類似のルールバーを実装しています。選択した値に応じてウェブ・サイトにユーザーをリダイレクトするボタンが一つあります。
<form action="redirect.cgi"> <menu type="toolbar"> <label for="goto">Go to...</label> <menu label="Go"> <select id="goto"> <option value="" selected="selected"> Select site: </option> <option value="http://www.apple.com/"> Apple </option> <option value="http://www.mozilla.org/"> Mozilla </option> <option value="http://www.opera.com/"> Opera </option> </select> <span><input type="submit" value="Go"></span> </menu> </menu> </form>
対応ブラウザにおけるビヘイビアは、前述の例に似ていますが、ここでは、古いブラウザのビヘイビアは、サブミット・ボタンを伴った select
要素ひとつから構成されます。このサブミット・ボタンは、ツールバーには現れません。なぜなら、そのボタンは、menu
要素、または、その子である li
要素の直下の子ではないからです。
4.11.4.2 メニューとツールバーの生成
メニュー(またはツールバー)は、0 個以上の次のコンポーネントのリストで構成されます:
- コマンド, デフォルトのコマンドとしてマークすることができます。
- セパレータ
- 他のメニュー(ネストしたリストが可能です)
特定の menu
要素に相当するリストは、その子ノード上を反復することによって生成されます。ツリー順に取り出されたそれぞれの子ノードに対する必須の挙動は、そのノードが何かに依存します。それは次の通りです:
- コマンドを定義する要素
- メニューにコマンドを追加しますが、そのファセット(これは http に由来したプライバシーに関するものでしょう)に合わせます。そして、そのイメージをコマンドに関連付けるべきです。そのようなコマンドそれぞれに対して、そのイメージを一度だけフェッチします。これは、そのイメージが一度フェッチされた後、ベース URL が変更されても影響を受けないようにするためです。(Icon ファセットを解決する必要はありません。それは絶対 URL です。)-->.
hr
要素value
属性に空文字列がセットされ、disabled
属性を持ち、そのtextContent
が一つ以上のハイフン (U+002D HYPHEN-MINUS) から成るoption
要素- メニューにセパレータを追加します。
li
要素label
要素- この要素の子要素上を反復します。
label
属性を持たないmenu
要素select
要素- メニューにセパレータを加え、子要素のうち
menu
要素またはselect
要素上を反復します。それから、もう一つセパレータを加えます。 label
属性を持つmenu
要素label
属性を持つoptgroup
要素- メニューにサブメニューを加えます。この要素の
label
属性をメニューのラベルとして使います。サブメニューは、その要素を使って新しいメニューを生成することで構築されなければいけません。この完全な手順はこのセクションで説明します。 - その他のノード
- そのノードを無視します。
前述の処理が全てのノードに対して終了したら、ユーザーエージェントは、下記の通り、該当のメニューに後処理を施さなければいけません:
- セパレータを除いて、ラベルがない、または、ラベルが空文字列のメニュー項目を削除しなければいけません。
- 1 行に 2 つ以上連続したセパレータがあれば、それを一つにまとめなければいけません。
- メニューの最初と最後のセパレータを削除しなければいけません。
4.11.4.3 コンテキスト・メニュー
contextmenu
属性は、その要素のコンテキスト・メニューを与えます。この値は DOM における menu
要素の ID でなければいけません。この属性値を引数にして getElementById()
メソッドを呼び出して得られたノードが null または menu
要素でないなら、その要素には、割り当てコンテキスト・メニューを持ちません。そうでなければ、この要素の割り当てコンテキスト・メニューは、そう認識された要素となります。
要素のコンテキスト・メニューがリクエストされたとき(例えば、ユーザーが要素を右クリックしたり、コンテキスト・メニュー・キーを押したとき)、ユーザーエージェントは、次のリストから適切な規則を適用しなければいけません:
- ユーザーがポインティング・デバイスを使ってコンテキスト・メニューをリクエストした場合
-
ユーザーエージェントは、メニューがリクエストされた要素で
contextmenu
という名前のイベントを発出しなければいけません。これはバブリングしキャンセル可能です。そして、MouseEvent
インタフェースを使います。このイベントのコンテキスト情報は、コンテキスト・メニューのリクエストとして解釈されたジェスチャーの一部として発出された最後のMouseEvent
ユーザー・インタラクション・イベントと同じ値にセットされなければいけません。 - そうでなければ
-
ユーザーエージェントは、メニューがリクエストされた要素で
contextmenu
という名前の疑似マウス・イベントを発出しなければいけません。これはバブリングし、キャンセル可能です。
ゆえに、通常は、contextmenu
イベントの発出は、mouseup
や keyup
イベントのデフォルト・アクションとなるでしょう。イベントの正確なシーケンスはユーザーエージェントに依存しますが、プラットフォームの慣例に基づいて異なってくるでしょう。
contextmenu
イベントのデフォルト・アクションは、この要素、または、その祖先にコンテキスト・メニューが(contextmenu
属性を使って)割り当てられているのかそうでないのかに依存します。もしコンテキスト・メニューが割り当てられていなければ、そのデフォルト・アクションは、デフォルトのコンテキスト・メニューがあるのであれば、それを見せることです。
この要素、または、その祖先の一つにコンテキスト・メニューが割り当てられているなら、ユーザーエージェントは、コンテキスト・メニューが割り当てられている祖先のうち直近のコンテキスト・メニューの menu
要素(自分自身の要素も含む)で、show
という名前のシンプルなイベントを発出しなければいけません。
このイベントのデフォルト・アクションは、menu
要素から構築したコンテキスト・メニューをユーザーエージェントが表示することです。
ユーザーエージェントは、デフォルトのコンテキスト・メニューがあれば、それへのアクセス手段を、すでに表示済みのコンテキスト・メニューとともに提供することも可能です。例えば、二つのメニューのメニュー項目をマージしたり、ページのコンテキスト・メニューをデフォルトのメニューのサブメニューとして提供することができます。
ユーザーが何も選択せずにメニューを閉じたら、特に何も起こりません。
ユーザーがコマンドを表すメニュー項目を選択したら、ユーザーエージェントは、そのコマンドのアクションを呼び出さなければいけません。
コンテキスト・メニューは、表示されている間は、DOM の変更を反映してはいません。それらは、show
イベントのデフォルト・アクションとして構築され、閉じられるまでそのままにしておかなければいけません。
ユーザーエージェントは、コンテキスト・メニューの処理モデルをバイパスする手段を提供することができます。こうすることで、ユーザーはいつでも確実にユーザーエージェントのデフォルトのコンテキスト・メニューにアクセスすることができるようになります。例えば、Shift キーを押しながらの右クリックしたら、contextmenu
イベントが発出されず、その代わりに、常にデフォルトのコンテキスト・メニューを表示する、といったことをユーザーエージェントはハンドリングすることができます。
contextMenu
IDL 属性は、contextmenu
コンテンツ属性を反映しなければいけません。
これは、入力コントロール用のコンテキスト・メニューの例です:
<form name="npc"> <label>Character name: <input name=char type=text contextmenu=namemenu required></label> <menu type=context id=namemenu> <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()"> <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"> </menu> </form>
これは、コントロールのコンテキスト・メニューに、"Pick random name"、"Prefill other fields based on name" という 2 つの項目を追加しています。これらは、上記の例には表示されてはいませんが、スクリプトを呼び出します。
4.11.4.4 ツールバー
menu
要素が toolbar 状態にある type
属性を持つとき、ユーザーエージェントは、その menu
要素に対してメニューを構築しなければいけません。そして、その結果をレンダリングに使わなければいけません。
ユーザーエージェントは、 menu
の DOM に変更があったら、すぐに該当のメニューを再構築して、その変更を反映しなければいけません。
※ 原文:http://www.w3.org/TR/2012/CR-html5-20121217/interactive-elements.html#the-menu-element