メニューの変更
メニューにはアイテムを追加したり削除するためのメソッドがいくつかあります。
メニューにアイテムを追加する
メニューに関連付けられたポップアップの末尾に新しいアイテムを追加するには、appendItem メソッドを使います。このメソッドは新しく menuitem 要素を作成し、それをポップアップ内に挿入します。このメソッドは menu 要素でしか利用できません。
<script>
function addToMenu()
{
var menu = document.getElementById("edit-menu");
menu.appendItem("Insert", "insert");
}
</script>
<menu id="edit-menu"/>
<button label="Add" oncommand="addToMenu()"/>
この例では、ボタンを押すと関数 addToMenu が呼び出されます。この関数はメニューのポップアップに Insert というラベルを持つ新しいアイテムを追加します。appendItem の第一引数は menuitem のラベルで、第二引数はそのアイテムに関連付けられる値です。この値は menuitem の value 属性として設定され、どんな用途にも利用できます。この例ではメニューに子要素の menupopup が無いことに注目してください。appendItem メソッドは、menupopup 要素が存在しない場合にはそれを作成します。メニューがすでに menupopup を持っていれば、その menupopup に新しい menuitem が追加されます。
appendItem メソッドは新しいアイテムを常にメニューの末尾に追加するのに対し、insertItem メソッドは同じ方法でアイテムをメニューの他の場所に挿入することができます。
menu.insertItem(0, "Delete", "delete");
この例では、insertItem メソッドによって新しく「Delete」というアイテムをメニューのポップアップの最初に挿入しています。第一引数は新しいアイテムが挿入されるインデックスです。この場合はインデックスとして 0 が与えられています。これは最初のアイテムの前の位置を意味します。インデックスは 0 から数え始めるので、4 番目のアイテムの前にアイテムを挿入するには引数として 3 を渡します。第二引数と第三引数は、appendItem と同様に新しいアイテムのラベルと値です。
appendItem と insertItemAt メソッドはともに新しい menuitem を返すので、それに対してさらにアクセスキーの追加などの変更を加えることができます。
var item = menu.appendItem("Insert", "insert");
item.accessKey = "I";
サブメニューの追加
メニューにサブメニューを追加するための組み込みメソッドはありません。これを行うには、すべての要素に対して使用できるノード変更のための継承メソッドを使わなければなりません。まずメニューの menupopup を取得し、appendChild メソッドによって新しいアイテムを追加します。
<script>
function addSubMenu()
{
var popup = document.getElementById("file-popup");
var newmenu = document.createElement("menu");
popup.appendChild(newmenu);
newmenu.label = "New";
newmenu.appendItem("Document", "doc");
newmenu.appendItem("Image", "image");
}
</script>
<menu label="File" onpopupshowing="addSubMenu()">
<menupopup id="file-popup"/>
</menu>
関数 addSubMenu は、メニューを開こうとする時に発生する popupshowing イベント中に呼び出されます。このメソッドは「file-popup」という id を持つポップアップへの参照を取得します。新しい要素が createElement メソッドによって作成されます。createElement メソッドは、作成する要素のタグを表す引数を 1 つ取ります。このメニューを作成した後、それをポップアップに追加します。ラベルを適当に設定すればメニューが出来上がるので、appendItem メソッドを使ってそのサブメニューに 2 つのアイテムを追加します。結果として、2 つのアイテムを持つサブメニューがメニューに動的に追加されます。
appendChild メソッドはすべての要素に対して利用可能で、新しいノードを他のノードの中に追加するのに使用します。appendItem メソッドはメニューやその他の特定の要素に固有のもので、より簡単に新しい menuitem をメニューに追加できます。
実際に上の例を使う場合には、popupshowing イベントリスナでアイテムがふたたび削除されるようにする必要があるでしょう。そうしなければ、メニューが開かれるたびに新しいサブメニューが追加されます。これは明らかに望ましくありません。もう一つの方法として、メニューが一度だけしか追加されないようにする方法もあります。これを行うには、上記の関数 addSubMenu を次のように書き直します。
<script>
function addSubMenu()
{
var popup = document.getElementById("file-popup");
if (popup.hasChildNodes())
return;
var newmenu = document.createElement("menu");
popup.appendChild(newmenu);
newmenu.label = "New";
newmenu.appendItem("Document", "doc");
newmenu.appendItem("Image", "image");
}
</script>
hasChildNodes メソッドを使って、ノードが子要素を持っているかどうかを調べます。hasChildNodes メソッドは最初に関数が呼ばれた時には false を返しますが、2 回目に呼ばれた時には、すでにメニューにアイテムが追加されているので true を返します。
メニューからアイテムを削除する
メニューからアイテムを削除するには removeItemAt メソッドを使います。引数は 1 つだけで、削除するアイテムのインデックスです。この例では、メニューにアイテムが追加され、すぐにまた削除されます。
menu.appendItem("Open", "");
menu.removeItemAt(menu.itemCount - 1);
itemCount プロパティにはメニューの中にあるアイテムの数が格納されます。
メニューから全てのアイテムを削除するには、それぞれのアイテムを一つ一つ削除するよりも、単純に menupopup を直接削除した方がいいでしょう。