files/ja/archive/mozilla/xul/popupguide/menumodification/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

---
title: MenuModification
slug: Archive/Mozilla/XUL/PopupGuide/MenuModification
tags:
  - XUL
  - XUL Popup Guide
translation_of: Archive/Mozilla/XUL/PopupGuide/MenuModification
---
<p>
<span id="Modifying_a_Menu"></span>
</p>
<h3 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E5.A4.89.E6.9B.B4" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E5.A4.89.E6.9B.B4">メニューの変更</h3>
<p>メニューにはアイテムを追加したり削除するためのメソッドがいくつかあります。
</p><p><span id="Adding_Items_to_a_Menu"></span>
</p>
<h4 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AB.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AB.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">メニューにアイテムを追加する</h4>
<p>メニューに関連付けられたポップアップの末尾に新しいアイテムを追加するには、<span id="m-appendItem"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem</a></code></span> メソッドを使います。このメソッドは新しく menuitem 要素を作成し、それをポップアップ内に挿入します。このメソッドは menu 要素でしか利用できません。
</p>
<pre>&lt;script&gt;
function addToMenu()
{
  var menu = document.getElementById("edit-menu");
  menu.appendItem("Insert", "insert");
}
&lt;/script&gt;

&lt;menu id="edit-menu"/&gt;
&lt;button label="Add" oncommand="addToMenu()"/&gt;
</pre>
<p>この例では、ボタンを押すと関数 addToMenu が呼び出されます。この関数はメニューのポップアップに Insert というラベルを持つ新しいアイテムを追加します。appendItem の第一引数は menuitem のラベルで、第二引数はそのアイテムに関連付けられる値です。この値は menuitem の <code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> 属性として設定され、どんな用途にも利用できます。この例ではメニューに子要素の menupopup が無いことに注目してください。<span id="m-appendItem"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem</a></code></span> メソッドは、<code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> 要素が存在しない場合にはそれを作成します。メニューがすでに menupopup を持っていれば、その menupopup に新しい menuitem が追加されます。
</p><p><code>appendItem</code> メソッドは新しいアイテムを常にメニューの末尾に追加するのに対し、<span id="m-insertItem"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/insertItem">insertItem</a></code></span> メソッドは同じ方法でアイテムをメニューの他の場所に挿入することができます。
</p>
<pre>menu.insertItem(0, "Delete", "delete");
</pre>
<p>この例では、<code>insertItem</code> メソッドによって新しく「Delete」というアイテムをメニューのポップアップの最初に挿入しています。第一引数は新しいアイテムが挿入されるインデックスです。この場合はインデックスとして 0 が与えられています。これは最初のアイテムの前の位置を意味します。インデックスは 0 から数え始めるので、4 番目のアイテムの前にアイテムを挿入するには引数として 3 を渡します。第二引数と第三引数は、appendItem と同様に新しいアイテムのラベルと値です。
</p><p><code>appendItem</code> と <code>insertItemAt</code> メソッドはともに新しい menuitem を返すので、それに対してさらにアクセスキーの追加などの変更を加えることができます。
</p>
<pre>var item = menu.appendItem("Insert", "insert");
item.accessKey = "I";
</pre>
<p><span id="Appending_Submenus"></span>
</p>
<h4 id=".E3.82.B5.E3.83.96.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E8.BF.BD.E5.8A.A0" name=".E3.82.B5.E3.83.96.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E8.BF.BD.E5.8A.A0">サブメニューの追加</h4>
<p>メニューにサブメニューを追加するための組み込みメソッドはありません。これを行うには、すべての要素に対して使用できるノード変更のための継承メソッドを使わなければなりません。まずメニューの menupopup を取得し、<a href="ja/DOM/element.appendChild">appendChild</a> メソッドによって新しいアイテムを追加します。
</p>
<pre>&lt;script&gt;
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");
}
&lt;/script&gt;

&lt;menu label="File" onpopupshowing="addSubMenu()"&gt;
  &lt;menupopup id="file-popup"/&gt;
&lt;/menu&gt;
</pre>
<p>関数 <code>addSubMenu</code> は、メニューを開こうとする時に発生する popupshowing イベント中に呼び出されます。このメソッドは「file-popup」という id を持つポップアップへの参照を取得します。新しい要素が createElement メソッドによって作成されます。<a href="ja/DOM/document.createElement">createElement</a> メソッドは、作成する要素のタグを表す引数を 1 つ取ります。このメニューを作成した後、それをポップアップに追加します。ラベルを適当に設定すればメニューが出来上がるので、<span id="m-appendItem"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem</a></code></span> メソッドを使ってそのサブメニューに 2 つのアイテムを追加します。結果として、2 つのアイテムを持つサブメニューがメニューに動的に追加されます。
</p><p><code>appendChild</code> メソッドはすべての要素に対して利用可能で、新しいノードを他のノードの中に追加するのに使用します。<code>appendItem</code> メソッドはメニューやその他の特定の要素に固有のもので、より簡単に新しい <code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> をメニューに追加できます。
</p><p>実際に上の例を使う場合には、popupshowing イベントリスナでアイテムがふたたび削除されるようにする必要があるでしょう。そうしなければ、メニューが開かれるたびに新しいサブメニューが追加されます。これは明らかに望ましくありません。もう一つの方法として、メニューが一度だけしか追加されないようにする方法もあります。これを行うには、上記の関数 <code>addSubMenu</code> を次のように書き直します。
</p>
<pre>&lt;script&gt;
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");
}
&lt;/script&gt;
</pre>
<p><code>hasChildNodes</code> メソッドを使って、ノードが子要素を持っているかどうかを調べます。<a href="ja/DOM/element.hasChildNodes">hasChildNodes</a> メソッドは最初に関数が呼ばれた時には false を返しますが、2 回目に呼ばれた時には、すでにメニューにアイテムが追加されているので true を返します。
</p><p><span id="Removing_Items_from_a_Menu"></span>
</p>
<h4 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.8B.E3.82.89.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.82.92.E5.89.8A.E9.99.A4.E3.81.99.E3.82.8B" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.8B.E3.82.89.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.82.92.E5.89.8A.E9.99.A4.E3.81.99.E3.82.8B">メニューからアイテムを削除する</h4>
<p>メニューからアイテムを削除するには <span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/removeItemAt">removeItemAt</a></code></span> メソッドを使います。引数は 1 つだけで、削除するアイテムのインデックスです。この例では、メニューにアイテムが追加され、すぐにまた削除されます。
</p>
<pre>menu.appendItem("Open", "");
menu.removeItemAt(menu.itemCount - 1);
</pre>
<p><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/itemCount">itemCount</a></span></code> プロパティにはメニューの中にあるアイテムの数が格納されます。
</p><p>メニューから全てのアイテムを削除するには、それぞれのアイテムを一つ一つ削除するよりも、単純に <code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> を直接削除した方がいいでしょう。
</p>
<div class="noinclude">
</div>