diff options
Diffstat (limited to 'files/ja/archive/mozilla/xul/popupguide')
14 files changed, 0 insertions, 1561 deletions
diff --git a/files/ja/archive/mozilla/xul/popupguide/contextmenus/index.html b/files/ja/archive/mozilla/xul/popupguide/contextmenus/index.html deleted file mode 100644 index a8db21bbe5..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/contextmenus/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: ContextMenus -slug: Archive/Mozilla/XUL/PopupGuide/ContextMenus -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide/ContextMenus ---- -<h3 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC">コンテキストメニュー</h3> - -<p>コンテキストメニューとは、メニュー上のアイテムが、メニューが開かれたコンテキスト (状況、文脈) に特有のものであるようなメニューの事です。ユーザがある要素を右クリックした時に、その要素に関係のあるコマンドのメニューを表示させるためによく使われます。</p> - -<h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88">コンテキストメニューイベント</h4> - -<p>コンテキストメニューを開く方法は色々あります。最も一般的なのは要素を右マウスボタンでクリックする方法です。マウスボタンが 1 つしかない Macintosh システムでは、マウスボタンを押し続けるか、Control キーを押しながらマウスボタンをクリックするとコンテキストメニューが開かれます。Windows では、キーボードのメニューキー (多くのキーボードで Control キーの隣にある、メニューの絵が描かれたキー) を押すか、Shift + F10 キーを押してコンテキストメニューを開く事も出来ます。ユーザがコンテキストメニューを開くのにマウスを使うものだと決めてかかってはいけません。</p> - -<p>マウスを使ってコンテキストメニューを開いた場合、コンテキストはクリックされた要素になります。キーボードを使った場合には、コンテキストはウィンドウの中で現在フォーカスされている要素になります。</p> - -<p>コンテキストメニューが開かれるにはいくつか異なる方法があるので、それら全ての状況を捉えるのに単一のイベントが使われます。どの場合でも、「contextmenu」イベントが発生します。</p> - -<pre><hbox id="container" align="center" oncontextmenu="..."> - <label value="Name:"/> - <textbox id="name"/> -</hbox> -</pre> - -<p>この例では、hbox のどの部分でコンテキストメニューを開こうとしても、<code id="a-oncontextmenu"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncontextmenu">oncontextmenu</a></code> 属性を使って取り付けられたイベントリスナが呼び出されます。textbox には組み込みのコンテキストメニューがあるので、そのコンテキストメニューを開こうとする前にイベントが発生します。しかし、イベントは例えば label が右クリックされた時にも発生するので、イベントハンドラは contextmenu イベントのターゲットが目的のものであるかを確かめる必要があります。</p> - -<p>イベントオブジェクトの <a href="ja/DOM/event.preventDefault">preventDefault</a> メソッドを使うと、contextmenu イベントをキャンセルする事ができます。</p> - -<pre>function checkContextMenu(event) { - if (event.target.localName == "textbox") - event.preventDefault(); -} - -function init() { - var container = document.getElementById("container"); - container.addEventListener("contextmenu", checkContextMenu, true); -} -</pre> - -<p>関数 <code>checkContextMenu</code> はコンテキストメニューのターゲットが textbox かどうかをチェックし、もしそうならば、<a href="ja/DOM/event.preventDefault">preventDefault</a> メソッドを使ってイベントをキャンセルします。このメソッドはコンテキストメニューを無効にする効果があります。関数 <code>init</code> の中で <a href="ja/DOM/element.addEventListener">addEventListener</a> メソッドを使ってイベントリスナが取り付けられています。この関数は load イベントなどのウィンドウの初期化中に呼び出すのがいいでしょう。</p> - -<h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E5.8F.96.E3.82.8A.E4.BB.98.E3.81.91.E3.82.8B" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E5.8F.96.E3.82.8A.E4.BB.98.E3.81.91.E3.82.8B">コンテキストメニューを取り付ける</h4> - -<p>コンテキストメニューを要素に取り付けるには <code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> 属性を使います。この属性はどんな XUL 要素にも適用できます。context 属性の値は同じドキュメントにあるコンテキストメニューの id でなければなりません。</p> - -<p>この例では、コンテキストメニューがグリッドに取り付けられています。</p> - -<p><img alt="Image:Popupguide-contextmenu.png"></p> - -<pre><menupopup id="insdel-menu"> - <menuitem label="Insert"/> - <menuitem label="Delete"/> -</menupopup> - -<grid context="insdel-menu"> - <columns> - <column/> - <column flex="1"/> - </columns> - <rows id="rows"> - <row align="center"> - <label value="Name:"/> - <textbox/> - </row> - </rows> -</grid> -</pre> - -<p>コンテキストメニューを適用したい要素に <code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> 属性を設定すれば、同じコンテキストメニューを複数の要素に取り付けることも出来ます。</p> - -<p>ドキュメントエリア全体にコンテキストメニューを取り付けるのも一つの手法です。例えば、Firefox ブラウザでは Web ページを表示するブラウザエリアにただ 1 つのコンテキストメニューを適用しています。次の例は、browser 要素に「contentAreaContextMenu」という id のコンテキストメニューを取り付けます。</p> - -<pre><browser context="contentAreaContextMenu"> -</pre> - -<h4 id=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.82.92.E7.A4.BA.E3.81.99" name=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.82.92.E7.A4.BA.E3.81.99">デフォルトアイテムを示す</h4> - -<p>いくつかのプラットフォームでは、コンテキストメニューのうち 1 つのアイテムがデフォルトの操作であることが明示されます。一般的には、そのメニューアイテムのラベルが太字で表示されます。どのアイテムがデフォルトアイテムかという事に特に決まりはありませんが、通常は、コンテキストメニューを出さずに普通に左クリックされた時に実行される操作を行うアイテムがデフォルトアイテムとされます。もしそれに該当するアイテムがあれば、<code id="a-default"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/default">default</a></code> 属性を使ってそれをデフォルトアイテムにする事ができます。</p> - -<pre><menupopup id="link-menu"> - <menuitem label="Open Link" default="true"/> - <menuitem label="Open In New Window"/> - <menuitem label="Properties"/> -</menupopup> -</pre> - -<p>1 つめのメニューアイテム (Open Link) の default 属性が true に設定されています。対応するプラットフォームでは、これがデフォルトアイテムであることが示されます。他のプラットフォームではこの属性は無視され、メニューアイテムは普通に表示されます。当然ながら、デフォルトアイテムはコンテキストメニュー毎に 1 つでなければ意味がありません。</p> - -<p>default 属性はアイテムの表示方法に影響するだけで、それ自体が何かの機能を実行するわけではありません。デフォルトの操作を実行させるためにその要素にコードを関連付けなければならないことに変わりは無いので注意してください。</p> - -<h4 id=".E5.AD.90.E8.A6.81.E7.B4.A0.E3.81.A8.E3.81.97.E3.81.A6.E3.81.AE.E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC" name=".E5.AD.90.E8.A6.81.E7.B4.A0.E3.81.A8.E3.81.97.E3.81.A6.E3.81.AE.E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC">子要素としてのコンテキストメニュー</h4> - -<p>要素にコンテキストメニューを関連付ける時、id によって menupopup を参照するよりも、その要素の子要素として menupopup を設置した方が便利な事があります。この方法はコンテキストメニューを 1 つの要素だけに結びつけるときに使う事ができます。また、XBL バインディングの中で id によってポップアップを参照するのは望ましくないでしょうから、この方法を取ると便利です。<code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> 属性が特殊な値である「_child」に設定されると、与えられた id を持つ menupopup を探す代わりに、要素の子要素の中からコンテキストメニューが探されます。例えば、</p> - -<pre><vbox context="_child"> - <label value="Hello"/> - <menupopup> - <menuitem label="Cut"/> - <menuitem label="Copy"/> - <menuitem label="Paste"/> - </menupopup> -</vbox> -</pre> - -<p>この例では、context 属性が「_child」に設定されているので、 vbox の子要素がコンテキストメニューとして採用されます。この特殊な値は、「child」という id と区別するためにアンダースコアから始めなければなりません。menupopup は例にあるように要素の最後の子要素である必要はありませんが、普通はここに置いた方が便利でしょう。</p> - -<h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.81.AB.E3.82.88.E3.82.8B.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E8.A1.A8.E7.A4.BA.E9.9D.9E.E8.A1.A8.E7.A4.BA" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.81.AB.E3.82.88.E3.82.8B.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E8.A1.A8.E7.A4.BA.E9.9D.9E.E8.A1.A8.E7.A4.BA">コンテキストによるメニューアイテムの表示非表示</h4> - -<p>コンテキストメニューが開かれる時、ポップアップが表示される前に popupshowing イベントが発生します。このイベントはメニュー上で表示されるアイテムを変更するのに使用されます。どのアイテムが表示されるかは、一般的にはコンテキストが何かによって異なります。例えば、画像の上で右クリックをすれば画像に関係するアイテムが表示され、リンクの上でクリックすればリンクに関係するアイテムが表示されるでしょう。</p> - -<p>多くの場合、考えられる全てのアイテムを格納した 1 つのコンテキストメニューを使って、必要に応じてアイテムを表示したり隠したりするのが便利でしょう。</p> - -<p>アイテムを非表示にするには、そのアイテムの <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/hidden">hidden</a></span></code> プロパティを true に設定します。アイテムを表示するには、hidden プロパティを false に設定します。</p> - -<pre><script> -function showHideDeleteItem() -{ - var deleteItem = document.getElementById("delete"); - - var rows = document.getElementById("rows"); - deleteItem.hidden = (rows.childNodes.length == 0); -} -</script> - -<menupopup id="inssel-menu" onpopupshowing="showHideDeleteItem()"> - <menuitem label="Insert"/> - <menuitem id="delete" label="Delete"/> -</menupopup> -</pre> - -<p>この例では、popupshowing イベントが発生すると関数 showHideDeleteItem が呼ばれます。この関数は「rows」という id の要素が子要素を持っているかを調べ、もし持っていなければ、「delete」メニューアイテムの <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/hidden">hidden</a></span></code> プロパティを変更して非表示にします。ユーザがコンテキストメニューを開こうとすると、delete メニューアイテムが子要素の数によって表示されるか隠されます。</p> - -<p>メニューアイテムを隠す代わりに、<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/disabled">disabled</a></span></code> プロパティを設定して無効にするという方法もあります。</p> - -<pre>deleteItem.disabled = (rows.childNodes.length == 0); -</pre> - -<p>この例では、<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/disabled">disabled</a></span></code> プロパティを使った方が適切です。クリックされた要素に絶対に適用できないようなメニューは非表示にするべきですが、特定の状況にあるために適用できないようなアイテムは無効にするべきです。</p> - -<h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.81.A8.E3.81.97.E3.81.A6.E4.BD.95.E3.81.8C.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AF.E3.81.95.E3.82.8C.E3.81.9F.E3.81.8B.E5.88.A4.E5.AE.9A.E3.81.99.E3.82.8B" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.81.A8.E3.81.97.E3.81.A6.E4.BD.95.E3.81.8C.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AF.E3.81.95.E3.82.8C.E3.81.9F.E3.81.8B.E5.88.A4.E5.AE.9A.E3.81.99.E3.82.8B">コンテキストとして何がクリックされたか判定する</h4> - -<p>コンテキストメニューはマウスだけではなく他の方法でも開かれ得るという事を覚えておく事は重要です。しかしながら、キーボードを使って開かれた場合でも、メニューが適用されるノード (コンテキスト) はあります。それは現在フォーカスのある要素です。マウスを使った場合には、コンテキストはクリックされた要素です。</p> - -<p>この要素は document の <a href="ja/DOM/document.popupNode">popupNode</a> プロパティを使って取得できます。次の例では、browser に取り付けられたポップアップで、popupNode プロパティをチェックして画像がクリックされたかどうかを判定しています。</p> - -<pre><script> -function showHideItems() -{ - var element = document.popupNode; - var isImage = (element instanceof Components.interfaces.nsIImageLoadingContent && - element.currentURI); - document.getElementById("enlarge").hidden = !isImage; - document.getElementById("details").hidden = !isImage; -} -</script> - -<menupopup id="contentAreaContextMenu" onpopupshowing="showHideItems()"> - <menuitem label="Copy"/> - <menuitem id="enlarge" label="Enlarge Image"/> - <menuitem id="details" label="Image Details"/> -</menupopup> - -<browser src="http://www.mozilla.org" context="contentAreaContextMenu"/> -</pre> - -<p>popupshowing イベントが発生すると、関数 <code>showHideItems</code> が呼ばれます。popupNode を取得し、それが画像かどうかを調べます。nsIImageLoadingContent インターフェイスは全ての種類の画像に実装されています。画像をサポートするタグにはいくつかの種類があるので、タグを比較するよりもこちらを使った方が便利です。またこの判定ではその要素に URI が設定されているかどうかも確かめています。</p> - -<p>最後に、コンテキストが画像かどうかによって 2 つのメニューアイテムの表示非表示が決定されます。結果として、画像の上でコンテキストメニューを開くと 3 つのアイテムが表示され、その他の種類の要素上ではアイテムが 1 つだけ表示されます。</p> diff --git a/files/ja/archive/mozilla/xul/popupguide/extensions/index.html b/files/ja/archive/mozilla/xul/popupguide/extensions/index.html deleted file mode 100644 index 2d97fad1b7..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/extensions/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Extensions -slug: Archive/Mozilla/XUL/PopupGuide/Extensions -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide/Extensions ---- -<p><span id="Adding_a_New_Menu"></span></p> -<h4 id=".E6.96.B0.E8.A6.8F.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E8.BF.BD.E5.8A.A0" name=".E6.96.B0.E8.A6.8F.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E8.BF.BD.E5.8A.A0">新規メニューの追加</h4> -<p>Firefox のメインメニューバーは 'main-menubar' という id を持っています。アプリケーションのメインメニューバーに新しいメニューを追加するには、このメニューバーに対してオーバーレイする必要があります。たとえば、</p> -<pre><menubar id="main-menubar"> - <menu label="Search" insertbefore="tools-menu"> - <menupopup> - <menuitem label="Web"/> - <menuitem label="Mail"/> - </menupopup> - </menu> -</menubar> -</pre> -<p>このメニューはメインメニューバーのツールメニューの前に追加されます。新しいメニューが正しい位置に追加されるように、<code id="a-insertbefore"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code> 属性を 'tools-menu' に設定しています。メニューが <code><menupopup></code> を持たない限りメニューは表示されないので注意してください。</p> -<p><span id="Adding_a_New_Menuitem"></span></p> -<h4 id=".E6.96.B0.E8.A6.8F.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E8.BF.BD.E5.8A.A0" name=".E6.96.B0.E8.A6.8F.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E8.BF.BD.E5.8A.A0">新規メニューアイテムの追加</h4> -<p>メニューのどれかに新しいアイテムを追加したい事があるかもしれません。これはアイテムを追加する要素にオーバーレイすることで可能になります。Firefox のメニューの id の一覧は、<a href="/ja/docs/FirefoxOverlayPoints/Menus">Firefox Menus</a> を参照して下さい。たとえば、ツールメニューの最後にアイテムを追加するには次のようにします。</p> -<pre><menupopup id="menu_ToolsPopup"> - <menuitem label="Thesaurus"/> -</menupopup> -</pre> -<p>他の拡張機能が同じメニューの中に独自のアイテムを追加することがあるという事に注意してください。これが原因で、オーバーレイが適用される順番によっては、新しいアイテムがメニューの最後ではなく他の拡張機能が追加したメニューアイテムの前に追加される事があります。オーバーレイが適用される順番を予測する事はできないので、他の拡張機能が存在する場合にはメニューアイテムが特定の位置にあることを当てにするべきではありません。</p> -<p><span id="Modifying_the_Context_Menu"></span></p> -<h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E6.94.B9.E5.A4.89" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E6.94.B9.E5.A4.89">コンテキストメニューの改変</h4> -<p>拡張機能はブラウザ領域に関連付けられたコンテキストメニューを改変することがよくあります。通常は、このメニューは何がコンテキストクリックされたかや、何にフォーカスがあるかによって特定のメニューを表示します。たとえば、リンクに対してコンテキストメニューを開くと、リンクを新しいウィンドウやタブで開くアイテムや、リンクを保存したりブックマークするアイテムが表示されます。拡張機能はコンテキストメニューを改変することで、追加したメニューを常に表示させることも、特定のコンテンツが選択された時にのみ表示させることもできます。</p> -<p>Firefox では、Web ページを表示するブラウザ領域はコンテキストメニューを 1 つだけ持っています。コンテキストメニューのターゲットの種類によって別々のコンテキストメニューを使用するのではなく、ただ 1 つのコンテキストメニューを使って、ターゲットに対して適用できないアイテムは必要に応じて隠されるようになっています。したがって、この単一のメニューにオーバーレイすることで Firefox のコンテキストメニューにアイテムを追加できます。このコンテキストメニューの id は 'contentAreaContextMenu' です。この例では、Firefox のコンテキストメニューの最後に 1 つのアイテムを追加します。</p> -<pre><popup id="contentAreaContextMenu"> - <menuitem id="thumbnail-show" label="View Thumbnail" oncommand="Thumbnails.view();"/> -</popup> -</pre> -<p>menupopup 要素ではなく popup 要素を使用していることに注意してください。これは Firefox でこの要素が使用されているためです。</p> -<p>上のコードはコンテキストメニューの最後に新しいアイテムを追加します。コンテキストメニューの最後ではなく特定の位置にアイテムを設置したければ、<code id="a-insertbefore"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code> もしくは <code id="a-insertafter"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code> 属性を使って id で指定された他のアイテムの前か後に挿入することができます。たとえば、次のコードは「すべて選択」コマンドのすぐ後にコマンドを挿入します。</p> -<pre><popup id="contentAreaContextMenu"> - <menuitem label="Select Links" oncommand="Thumbnails.selectAllLinks();" - insertafter="context-selectall"/> -</popup> -</pre> -<p><a href="ja/FirefoxOverlayPoints/Menus#Firefox_Context_Menu">Firefox Context Menu</a> で Firefox のコンテキストメニューにあるアイテムの id の一覧を参照して下さい。</p> -<p><span id="Showing_and_Hiding_Context_Menu_Items"></span></p> -<h5 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E8.A1.A8.E7.A4.BA.E9.9D.9E.E8.A1.A8.E7.A4.BA" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E8.A1.A8.E7.A4.BA.E9.9D.9E.E8.A1.A8.E7.A4.BA">コンテキストメニューアイテムの表示非表示</h5> -<p>追加したメニューアイテムをコンテキストによって表示したり隠したりするには、popupshowing イベントをリッスンするイベントハンドラを使用します。たとえば、画像がコンテキストクリックされた場合、追加したメニューアイテムが実行する操作が画像に対して適用できないものならば、それを非表示にしたいと思うかもしれません。</p> -<pre>function init() -{ - var contextMenu = document.getElementById("contentAreaContextMenu"); - if (contextMenu) - contextMenu.addEventListener("popupshowing", ThumbnailsShowHideItems, false); -} - -function ThumbnailsShowHideItems(event) -{ - var show = document.getElementById("thumbnail-show"); - show.hidden = (document.popupNode.localName != "IMG"); -} -</pre> -<p>ユーザがポップアップを開く前に popupshowing イベントハンドラを取り付けるため、関数 init は load イベントハンドラで呼び出すようにします。この例では、ポップアップが表示されようとする時に関数 ThumbnailsShowHideItems が呼ばれます。この関数は 'thumbnail-show' という id を持つ拡張機能が追加したメニューアイテムを取得し、コンテキストメニューのターゲットが画像でなければそれを隠します。document の <a href="ja/DOM/document.popupNode">popupNode</a> プロパティはコンテキストメニューのターゲットを保持します。</p> -<p>コンテキストメニュー上のアイテムの表示非表示に関する詳細は、<a href="ja/XUL/PopupGuide/ContextMenus#Hiding_and_Showing_Menu_Items_based_on_Context">コンテキストによるメニューアイテムの表示非表示</a>を参照して下さい。</p> -<p><span id="Determining_what_Element_was_Context_Clicked"></span></p> -<h5 id=".E3.81.A9.E3.81.AE.E8.A6.81.E7.B4.A0.E3.81.8C.E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AF.E3.81.95.E3.82.8C.E3.81.9F.E3.81.8B.E5.88.A4.E5.88.A5.E3.81.99.E3.82.8B" name=".E3.81.A9.E3.81.AE.E8.A6.81.E7.B4.A0.E3.81.8C.E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AF.E3.81.95.E3.82.8C.E3.81.9F.E3.81.8B.E5.88.A4.E5.88.A5.E3.81.99.E3.82.8B">どの要素がコンテキストクリックされたか判別する</h5> -<p>どの要素がコンテキストメニューのターゲットか、つまりコンテキストクリックされた要素を判別する方法に関する一般的な情報は<a href="ja/XUL/PopupGuide/ContextMenus#Determining_what_was_Context_Clicked">コンテキストとして何がクリックされたか判定する</a>を参照して下さい。</p> -<p>Firefox は独自の popupshowing イベントリスナを使ってコンテキストメニューのアイテムを調整しています。これによりメニューは異なる種類のターゲットに対して異なるコマンドを持つことができます。ポップアップが開かれている間、グローバル変数 gContextMenu に Firefox のコンテキストメニュー固有の機能をすべて扱うオブジェクトが格納されます。具体的に言うと、このオブジェクトはコンテキストメニューのターゲットの種類を示すプロパティの集合によって初期化されます。たとえば、リンクがコンテキストクリックされると 'onLink' プロパティが true に設定されます。</p> -<p>手動で処理しようとすると大量のコードが必要となるような様々な特殊で複雑なケースを Firefox のコードがあらかじめ処理しているので、自分でターゲットの種類を判別するよりもこれらのプロパティを使用したほうがいいでしょう。次の表は最もよく使われるチェック可能なプロパティの一覧です。</p> -<table> - <tbody> - <tr> - <td>target</td> - <td>コンテキストクリックされた要素。キーボードでコンテキストメニューを開いた場合は、フォーカスのある要素。</td> - </tr> - <tr> - <td>onTextInput</td> - <td>ターゲットがプレーンまたはパスワードタイプの input、textarea、または編集可能な領域ならば true。テキストの編集に関するコマンドを有効または無効にするのに使用できる。</td> - </tr> - <tr> - <td>onImage</td> - <td>ターゲットが画像なら true。</td> - </tr> - <tr> - <td>hasBGImage</td> - <td>祖先要素が背景画像を持っていれば true。</td> - </tr> - <tr> - <td>onMathML</td> - <td>ターゲットが MathML 要素なら true。</td> - </tr> - <tr> - <td>onLink</td> - <td>ターゲットがリンクなら true。</td> - </tr> - <tr> - <td>onMailtoLink</td> - <td>ターゲットが E メールアドレスのリンク (mailto:) なら true。</td> - </tr> - <tr> - <td>linkURL</td> - <td>コンテキストクリックされたリンクの URL。</td> - </tr> - <tr> - <td>inFrame</td> - <td>フレーム内でコンテキストクリックされたなら true。</td> - </tr> - <tr> - <td>isTextSelected</td> - <td>テキストが選択されていれば true。</td> - </tr> - <tr> - <td>isContentSelected</td> - <td>テキストを含む何らかのものが選択されていれば true。</td> - </tr> - </tbody> -</table> -<p>次の例では、ターゲットが画像かリンクでなければメニューアイテムは非表示になります。</p> -<pre>function ThumbnailsShowHideItems(event) -{ - var show = document.getElementById("thumbnail-show"); - show.hidden = !(gContextMenu.onImage || gContextMenu.onLink); -} -</pre> -<div class="noinclude"> - </div> diff --git a/files/ja/archive/mozilla/xul/popupguide/index.html b/files/ja/archive/mozilla/xul/popupguide/index.html deleted file mode 100644 index 323bf34767..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: PopupGuide -slug: Archive/Mozilla/XUL/PopupGuide -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide ---- -<h2 id="Popups_and_Menus" name="Popups_and_Menus">ポップアップとメニュー</h2> -<p>作成できるポップアップの種類には様々なものがあります。ポップアップとは、メニュー、もしくは、タイトルバーやボーダーなどのメインウィンドウの外郭を拡張する装飾のないフローティングウィンドウの事です。</p> - - - - - - -<h3 id="Popup_Types" name="Popup_Types">ポップアップの種類</h3> - -<p>XUL では、ポップアップメニューや他の種類のポップアップウィジェットを作成するのに、要素に取り付けられる方法や開かれる方法によって異なる様々な種類の要素が利用できます。ここではそれぞれの種類の概要を紹介します。詳細はリンク先を参照して下さい。</p> - -<p>このガイドでは、「ポップアップ」という用語は全ての種類のポップアップを指すのに対して、「メニュー」という用語はポップアップの特定の種類を指します。具体的には、下の一覧の初めの 2 種類がメニューです。</p> - -<dl> - <dt><a href="/ja/docs/XUL/PopupGuide/Menus">メニュー</a></dt> - <dd>メニューは、ユーザによって実行される一連のコマンドがあり、それぞれのコマンドに対してボタンを設置するスペースを使いたくない時に使用されます。メニューは普段は隠されており、選択されるとコマンドの一覧が格納されたポップアップが現れます。ユーザがコマンドを選択すると、メニューは再び見えなくなります。</dd> - <dd>メニューは <code>menupopup</code> 要素を使って作成します。 <code>menupopup</code> 要素はアイテムを一覧で表示し、サブメニューを表示でき、アイテム間でのキーボードによるナビゲーションを可能にします。メニューにはメニューに関係する要素しか格納してはいけません。</dd> - <dt><a href="/ja/docs/XUL/PopupGuide/ContextMenus">コンテキストメニュー</a></dt> - <dd>コンテキストメニューは普通のメニューに似ていますが、ユーザがコンテキストメニューを開く時にクリックした対象に対して、格納されたコマンドが適用されるという点で異なります。大抵は、クリックされた要素に対して適用できないようなコマンドは隠されます。</dd> - <dt><a href="/ja/docs/XUL/PopupGuide/Panels">パネル</a></dt> - <dd>パネルにはどんな内容でも格納する事ができます。パネルは既存の UI の上に一時的に何らかのコントロールを表示したい時に便利です。例えば、検索用のフィールドをポップアップで表示して、検索語句が入力されたらポップアップを消すといった事ができます。</dd> - <dd>パネルは <code>panel</code> 要素を使って作成します。</dd> - <dt><a href="/ja/docs/XUL/PopupGuide/Tooltips">ツールチップ</a></dt> - <dd>マウスがある UI コントロールの上に置かれると、ツールチップはそのコントロールについて説明するヘルプが書かれた小さなボックスを表示します。マウスがそのコントロールから離れると、ツールチップは自動的に消えます。</dd> - <dd>ツールチップは、要素に <code>tooltiptext</code> 属性を設定するか、 <code>tooltip</code> 要素を使う事によって作成できます。</dd> -</dl> - - - - - - -<h3 id="Working_with_Popups" name="Working_with_Popups">ポップアップを取り扱う</h3> -<p>以下の追加情報はメニューやポップアップの操作に関するものです。</p> - - -<dl> - <dt>メニューやポップアップを開く</dt> - <dd>ほとんどのメニューやポップアップは、要素に結び付けられていれば自動的に開かれます。スクリプトを使ってポップアップを開くには、 <code>openPopup</code> メソッドか <code>openPopupAtScreen</code> を使います。ポップアップの開き方についてのより詳しい情報は<a href="/ja/docs/XUL/PopupGuide/OpenClose#Opening_a_Popup">ポップアップを開く</a>もしくは<a href="/ja/docs/XUL/PopupGuide/OpenClose#Opening_Menus">メニューを開く</a>を参照して下さい。</dd> - <dt>メニューやポップアップを閉じる</dt> - <dd>ポップアップの閉じ方に関する情報は<a href="/ja/docs/XUL/PopupGuide/OpenClose#Closing_a_Popup_with_the_hidePopup_method">ポップアップを閉じる</a>もしくは <a href="/ja/docs/XUL/PopupGuide/OpenClose#Closing_Menus">メニューを閉じる</a>を参照して下さい。</dd> - <dt>ポップアップの配置方法</dt> - <dd>ポップアップのスクリーン上の位置を決定する方法や、ポップアップの位置を他の要素に揃える方法は、<a href="/ja/docs/XUL/PopupGuide/Positioning">ポップアップの配置</a>を参照して下さい。</dd> - <dt>ポップアップが開かれているかどうか確かめる</dt> - <dd>ポップアップやメニューが開かれているかどうかを確認するには、<a href="/ja/docs/XUL/PopupGuide/OpenClose#Determining_if_a_Popup_is_Open">ポップアップが開いているかどうか判別する</a>を参照して下さい。</dd> - <dt>ポップアップを移動する</dt> - <dd>ポップアップは <code>moveTo</code> メソッドを使って移動する事ができます。<a href="/ja/docs/XUL/PopupGuide/MoveResize#Moving_a_Popup">ポップアップの移動</a>を参照して下さい。</dd> - <dt>ポップアップをリサイズする</dt> - <dd><code>sizeTo</code> メソッドを使うとポップアップの大きさを調整する事ができます。<a href="/ja/docs/XUL/PopupGuide/MoveResize#Resizing_a_Popup">ポップアップのリサイズ</a>を参照して下さい。</dd> - <dt>メニューをボタンに取り付ける</dt> - <dd>ボタンが押された時にメニューを表示させる方法を知りたければ、<a href="/ja/docs/XUL/PopupGuide/MenuButtons">メニューボタン</a>を参照して下さい。</dd> - <dt>メニューのアイテムの機能</dt> - <dd>メニュー上のアイテムの様々な機能を学ぶには、<a href="/ja/docs/XUL/PopupGuide/MenuItems">menuitem 要素の機能</a>をご覧下さい。</dd> - <dt>メニューのアイテムを変更する</dt> - <dd>メニューに要素を追加、挿入、削除するには<a href="/ja/docs/XUL/PopupGuide/MenuModification">メニューの変更</a>をご覧下さい。</dd> - <dt>ポップアップ開閉時のイベント</dt> - <dd>ポップアップが開かれる時には <a href="/ja/docs/XUL/PopupGuide/PopupEvents#The_popupshowing_event">popupshowing</a> イベントと <a href="/ja/docs/XUL/PopupGuide/PopupEvents#The_popupshown_event">popupshown</a> イベントが発生します。ポップアップが閉じられる時には <a href="/ja/docs/XUL/PopupGuide/PopupEvents#The_popuphiding_event">popuphiding</a> イベントと <a href="/ja/docs/XUL/PopupGuide/PopupEvents#The_popuphidden_event">popuphidden</a> イベントが発生します。これらのイベントに関する情報は<a href="/ja/docs/XUL/PopupGuide/PopupEvents">ポップアップイベント</a>をご覧下さい。</dd> - <dt>ポップアップ内部でのキーの扱い</dt> - <dd>メニューやパネル内部でどのようにしてキーが扱われるかについての情報は<a href="/ja/docs/XUL/PopupGuide/PopupKeys">ポップアップ内部でのキーの扱い</a>を参照してください。</dd> - <dt>メニューに関するプラットフォーム固有の注意事項</dt> - <dd>Macintosh で Application メニューを作成する方法など、特定のプラットフォームでメニューを扱うときの注意事項については、<a href="/ja/docs/XUL/PopupGuide/PlatformMenus">プラットフォームごとの特殊なメニューに関する考察</a>を参照して下さい。</dd> -</dl> - - - - - - -<h3 id="Using_Popups_in_Extensions" name="Using_Popups_in_Extensions">拡張機能でポップアップを使う</h3> -<p>拡張機能では、メニューバーのメニューやコンテキストメニューにメニューアイテムを追加する事が出来ます。さらに、全く新しいメニューを追加する事も可能です。例えば、拡張機能専用のダイアログを開くための新しいコマンドをツールメニューに追加したいことがあるかもしれません。また、ブラウザのコンテキストメニューにアイテムを追加する拡張機能の作成もよく行われます。詳しくは<a href="/ja/docs/XUL/PopupGuide/Extensions">拡張機能におけるメニューとポップアップの使用</a>を参照して下さい。</p> diff --git a/files/ja/archive/mozilla/xul/popupguide/menubuttons/index.html b/files/ja/archive/mozilla/xul/popupguide/menubuttons/index.html deleted file mode 100644 index 86231b6bce..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/menubuttons/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: MenuButtons -slug: Archive/Mozilla/XUL/PopupGuide/MenuButtons -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide/MenuButtons ---- -<p> -<span id="Menu_Buttons"></span> -</p> -<h3 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.83.9C.E3.82.BF.E3.83.B3" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.83.9C.E3.82.BF.E3.83.B3">メニューボタン</h3> -<p>メニューはいくつかの方法でボタンに取り付けることができます。button 要素と toolbarbutton 要素はともにメニューボタンの作成に使用される 2 つの特殊な型をサポートしています。 -</p> -<ul><li>button または toolbarbutton の <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を 'menu' に設定すると、押された時にメニューを開くボタンが作成できます。ボタンのラベルや画像の隣に、メニューが存在する事をユーザーに示す矢印が表示されます。 -</li><li>button または toolbarbutton の <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を 'menu-button' に設定すると、普通に押すことができるボタンが作成されます。しかし、ボタンの一部に矢印が表示され、それを押すとメニューが開きます。 -</li></ul> -<p>どちらの場合でも、menupopup 要素をボタンの直接の子として設置してください。 -</p><p><span id="The_'menu'_button"></span> -</p> -<h4 id=".27menu.27_.E3.83.9C.E3.82.BF.E3.83.B3" name=".27menu.27_.E3.83.9C.E3.82.BF.E3.83.B3">'menu' ボタン</h4> -<p>'menu' 型のボタンは、ボタンを押してもメニューが表示されるだけで、直接コマンドを実行しません。これは menu タグと同じように動作し、実行するコマンドの一覧を提示するのに使用します。この型のボタンは、ボタンの <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を 'menu' にすることで作成できます。 -</p><p>たとえば次の例では、「View」ボタンを押すと、ユーザーがラジオ型のメニューアイテムの中から選択できるようにメニューが開きます。おそらく、どれかを選択すると、アプリケーションの見た目がそれにしたがって変更されるのでしょう。キーボードを使う場合は、ボタンにフォーカスがあるときに下キー押すとメニューが開きます。 -</p> -<pre><button type="menu" label="View"> - <menupopup> - <menuitem label="Icons" type="radio" name="view"/> - <menuitem label="List" type="radio" name="view"/> - <menuitem label="Details" type="radio" name="view"/> - </menupopup> -</button> -</pre> -<p><img alt="Image:Popupguide-menubutton.png"> -</p><p>メニューが閉じても、ボタンにはどの見た目が選択されているかが表示されないことに注意してください。表示させたければ、menulist を使うのがいいでしょう。 -</p><p>toolbarbutton に対してもボタンと同じ方法を使えます。下の例では画像を持つ toolbarbutton にメニューが関連付けられています。 -</p> -<pre><toolbarbutton type="menu" image="cookies.png"> - <menupopup> - <menuitem label="Block Cookies" type="checkbox"/> - <menuitem label="Clear Cookies"/> - </menupopup> -</toolbarbutton> -</pre> -<p><span id="The_'menu-button'_button"></span> -</p> -<h4 id=".27menu-button.27_.E3.83.9C.E3.82.BF.E3.83.B3" name=".27menu-button.27_.E3.83.9C.E3.82.BF.E3.83.B3">'menu-button' ボタン</h4> -<p>'menu-button' 型のボタンは、ボタンにメニューを取り付けると同時に、それ自体にボタンが押された時に実行されるデフォルトの動作を設定したい場合に使用します。これはボタンをデフォルトのコマンドを実行するためのラベルや画像の部分と、メニューを表示するための部分の 2 つに分けることで実現されます。この型のボタンは、ボタンの <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を 'menu-button' にすることで作成できます。 -</p> -<pre><toolbarbutton type="menu-button" label="Save" oncommand="alert('Save');"> - <menupopup> - <menuitem label="Save This Document"/> - <menuitem label="Save All" oncommand="alert('Save All'); event.stopPropagation();"/> - </menupopup> -</toolbarbutton> -</pre> -<p>ここで 'Save' ボタンは type に 'menu-button' が設定されているので、押された時にメニューが開く小さな矢印が表示されます。ボタンのラベル部分を押すと、ボタンで command イベントが呼び出され、'Save' という警告が表示されます。しかしながら、サブメニューのアイテムには違うコマンドを関連付けることが可能です。 -</p><p>command イベントが発生すると、そのイベントは要素のチェーンをたどってドキュメントの最上位まで浮上 (<span style="color: green;">bubble up</span>)します。メニューの 1 つめのアイテム 'Save This Document' が選択されると、command イベントがボタンまで浮上するので、同様に 'Save' という警告が表示されます。この場合、このメニューアイテムはボタンの通常の部分を押すのと同じ操作を実行します。2 つめのアイテム 'Save All' は 'Save All' というテキストの警告を表示する独自の command イベントを持っています。<a href="ja/DOM/event.stopPropagation">stopPropagation</a> メソッドを使って浮上を止めているので、ボタンでは command イベントは同じように呼ばれません。 -</p><p>この結果、ある 1 つのコマンドを実行し、他のコマンドを実行するためのメニューを持つボタンが完成します。この例のように、普通 'menu-button' 型のボタンはメニューがその操作に関するより限定されたオプションを提供する時に使用されます。この例を拡張して、Save ボタンメニューにまだ保存されていないドキュメントの一覧を挿入してそれぞれを個別に保存できるようにすることも可能でしょう。 -</p><p>上の例の 1 つめのアイテムをデフォルトのアイテムに設定して、ユーザーにこのコマンドがメインのボタンを押した時に実行されるものだということを示したいこともあるでしょう。これはそのアイテムの <code id="a-default"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/default">default</a></code> 属性を <code>true</code> に設定すれば可能になります。 -</p> -<pre><menuitem label="Save This Document" default="true"/> -</pre> -<p><code id="a-default"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/default">default</a></code> 属性の詳細は<a href="ja/XUL/PopupGuide/ContextMenus#Indicating_the_Default_Item">デフォルトアイテムを示す</a>を参照して下さい。 -</p><p>'menu' 型と同様に、'menu-button' 型は <code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code> と <code><a href="/ja/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code> 要素のどちらにも適用できます。 -</p> -<div class="noinclude"> -</div> diff --git a/files/ja/archive/mozilla/xul/popupguide/menuitems/index.html b/files/ja/archive/mozilla/xul/popupguide/menuitems/index.html deleted file mode 100644 index 365b303f32..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/menuitems/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: MenuItems -slug: Archive/Mozilla/XUL/PopupGuide/MenuItems -translation_of: Archive/Mozilla/XUL/PopupGuide/MenuItems ---- -<div><span id="Features_of_the_menuitem_Element"></span></div> -<h2 id="menuitem_.E8.A6.81.E7.B4.A0.E3.81.AE.E6.A9.9F.E8.83.BD" name="menuitem_.E8.A6.81.E7.B4.A0.E3.81.AE.E6.A9.9F.E8.83.BD">menuitem 要素の機能</h2> -<p>menuitem 要素は単にメニューコマンドのラベルであるだけではなく、さまざまな機能を持っています。</p> - - - -<div><span id="Adding_Shortcut_Keys_to_Menu_Items"></span></div> -<h3 id=".E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.AB.E3.83.83.E3.83.88.E3.82.AD.E3.83.BC.E3.81.AE.E8.BF.BD.E5.8A.A0" name=".E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.AB.E3.83.83.E3.83.88.E3.82.AD.E3.83.BC.E3.81.AE.E8.BF.BD.E5.8A.A0">ショートカットキーの追加</h3> -<p>メニューアイテムにはショートカットキーを関連付けることができます。メニューが開かれている間しか機能しないアクセスキーとは違い、ショートカットキーはどんな時でも機能します。ショートカットキーを作成するには、key 要素を使います。実際にキーボードショートカットを処理するのは key 要素ですが、ショートカットはメニューアイテムのラベルの横に表示されます。これにより、ユーザーはメニューを見ることで、利用できるショートカットキーを知ることができます。</p> -<div style="overflow: hidden;"> -<pre class="brush:xml"><keyset> - <key id="open-key" modifiers="accel" key="O" /> - <key id="close-key" modifiers="accel" key="C" /> -</keyset> -<menubar> - <menu label="View"> - <menupopup> - <menuitem label="Open" key="open-key" /> - <menuitem label="Close" key="close-key" /> - </menupopup> - </menu> -</menubar> -</pre></div> -<p><img alt="Image:Popupguide-menushortcut.png" src="/@api/deki/files/303/=Popupguide-menushortcut.png"></p> -<p><code id="a-key"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code> 属性によって、2 つのメニューアイテムにショートカットキーが関連付けられています。key 属性は同じドキュメント内の key 要素の id に設定しなければなりません。このようにすると、メニューアイテムのラベルの横にショートカットキーが表示されます。この例の "Open" アイテムは、"accel" 修飾キーを押しながら "O" キーを押すことで実行できます。"accel" 修飾キーはプラットフォームによって異なりますが、ショートカットキーで一般的に使用されるキーになります。たとえば、accel キーが Control キーならば、メニューには "Ctrl + O" と表示されるでしょう。</p> -<p>普通はやる必要はありませんが、<code id="a-acceltext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> 属性を使うと、メニューに表示されるキーボードショートカットのラベルをカスタマイズすることができます。これはたとえば、現在開かれているウィンドウの一覧を表示するメニューなど、アイテムに関連付けられるキーが変化するような場合に使用するのがいいでしょう。</p> - -<pre><code><menuitem label="First Window" acceltext="1" /></code></pre> - -<p>こうするとキーボードショートカットのラベルが "1" になりますが、そのキーを処理するコードも書く必要があります。</p> - - - -<div><span id="Adding_Icons_to_Menu_Items"></span></div> -<h3 id=".E3.82.A2.E3.82.A4.E3.82.B3.E3.83.B3.E3.81.AE.E8.BF.BD.E5.8A.A0" name=".E3.82.A2.E3.82.A4.E3.82.B3.E3.83.B3.E3.81.AE.E8.BF.BD.E5.8A.A0">アイコンの追加</h3> -<p><code id="a-image"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> 属性を使うと、メニューアイテムにアイコンを追加できます。アイコンはメニューアイテムのラベルの左に表示されます。アイコンが表示されるようにするためには、image 属性に加えて、"menuitem-iconic" という特殊なクラスを設定しなければなりません。</p> - -<pre><menuitem id="add-bookmark" class="menuitem-iconic" label="Add Bookmark" image="addbookmark.png" /></pre> - -<p>アイコン画像はメニューアイテム上に表示されるので、かなり小さい画像を使用しなければなりません。メニューアイテムの画像のサイズは、厳密には使用されているテーマによって異なりますが、一般的には 16 x 16 pixel 前後にするべきです。<code id="a-image"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> 属性を使ってアイコンを指定する代わりに、スタイルシートで "list-style-image" プロパティを使って画像を参照することもできます。</p> - -<pre class="brush:js">#add-bookmark { - list-style-image: url('addbookmark.png'); -}</pre> - -<p>この手法は menu 要素に対して画像を適用するのにも使用できますが、その場合クラス名には "menu-iconic" を指定しなければなりません。</p> - -<pre><code><menuitem id="bookmark" class="menu-iconic" label="Bookmarks" image="bookmarks.png" /></code></pre> - - - -<div><span id="Checkbox_Menu_Items"></span></div> -<h3 id=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E5.9E.8B.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0" name=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E5.9E.8B.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0">チェックボックス型メニューアイテム</h3> -<p>トグル式の動作をするメニューアイテムを使用したい場合があるでしょう。たとえば、ツールバーの表示非表示を切り替えるメニューアイテムなどです。このメニューアイテムには、ツールバーの現在の状態を示すために、ラベルの隣にチェックボックスが表示されます。チェックボックスがオンならばツールバーは表示されており、オフならば表示されていません。ユーザーはメニューアイテムを選択する事でツールバーの表示を切り替えることができます。</p> -<p>このような種類のメニューアイテムは、<code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を "checkbox" という値に設定すると作成できます。</p> - -<pre class="brush:xml"><menu label="View" accesskey="V"> - <menupopup> - <menuitem label="Show Toolbar" accesskey="T" type="checkbox" checked="true" /> - <menuitem label="Show Status Bar" accesskey="S" type="checkbox" /> - </menupopup> -</menu></pre> - -<p><img alt="Image:Popupguide-menucheckbox.png" src="/@api/deki/files/301/=Popupguide-menucheckbox.png"></p> - -<p>2 つあるメニューアイテムが共にチェックボックス型になっています。1 つめのメニューアイテムは <code id="a-checked"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> 属性が true に設定されているので、デフォルトでチェックされています。2 つめのメニューアイテムはデフォルトではチェックされていません。ユーザーがメニューアイテムを選択すると command イベントが発生するので、ツールバーやステータスバーなどの状態を変化させるコードを command イベントリスナから実行することができます。メニューアイテムの checked 属性は command イベントが発生する前に自動的に更新されるので、自分で属性値を更新する必要はありません。</p> -<p>チェック状態は command イベントが発生する前に更新されるので、command イベントリスナ内でメニューアイテムの checked 属性を使用する場合には、チェック状態はすでに新しい状態にあるということに注意してください。</p> - -<pre class="brush:xml"><script> -function changeToolbarState(event) { - if (event.target.getAttribute("checked") == "true") - showToolbar(); - else - hideToolbar(); -} -</script> -... -<menuitem label="Show Toolbar" accesskey="T" type="checkbox" - oncommand="changeToolbarState();"/> -</pre> - -<p>この例では、メニューアイテムがチェックされているとツールバーを表示し、チェックされていなければツールバーを隠します。</p> -<p>メニューアイテムが選択された時に、チェックボックスの状態を自動的に更新して欲しくない場合があるかもしれません。これは実行される動作が失敗する可能性がある場合に有効です。単純にチェックボックスの状態を元に戻すというやり方もありますが、余計にややこしくなる可能性があります。 <code id="a-autocheck"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/autocheck">autocheck</a></code> 属性を使うと、チェックボックスが自動的に更新されないようにできます。autocheck 属性を <code>false</code> に設定すると、チェックボックスの状態は自動的に更新されなくなるので、チェック状態を変更するコードを自分で書かなければなりません。</p> - - -<pre class="brush:xml"><script> -function changeToolbarState(event) { - if (event.target.getAttribute("checked") == "true") - hideToolbar(); - event.target.removeAttribute("checked"); - } else { - if (!showToolbar()) - return; - event.target.setAttribute("checked", "true"); - } -} -</script> -... -<menuitem - label="Show Toolbar" - accesskey="T" - type="checkbox" - autocheck="false" - oncommand="changeToolbarState();" /></pre> - -<p>このバージョンの <code>changeToolbarState</code> 関数は <code id="a-checked"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> 属性を自分で変更します。メニューアイテムの autocheck 属性が false に設定されているので、checked 属性は自動的に更新されません。コードの条件ブロック部分が入れ替えられていることに注目してください。メニューアイテムがチェックされていたらツールバーを隠し、チェックされていなければツールバーを表示するようになっています。これはあらかじめチェック状態が変更されないからです。この例では関数 showToolbar が失敗する可能性を想定しており、もし false が返されたら checked 属性は変更されません。</p> -<p>チェック状態を解除する時には、checked 属性を単に false に設定するのではなく、属性自体を取り除くようにしてください。この例では <a href="/ja/docs/DOM/element.removeAttribute">removeAttribute</a> メソッドによって属性を削除しています。</p> - - - -<div><span id="Radio_Menu_Items"></span></div> -<h3 id=".E3.83.A9.E3.82.B8.E3.82.AA.E5.9E.8B.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0" name=".E3.83.A9.E3.82.B8.E3.82.AA.E5.9E.8B.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0">ラジオ型メニューアイテム</h3> -<p>一度に一つしかチェックできないようなメニューアイテムのグループを作成したい場合には、ラジオ型のメニューアイテムを使用します。ラジオ型はチェックボックス型と似たような動作をしますが、あるアイテムが選択されると、同じグループにある他のアイテムはすべてチェックが外される点が異なります。ラジオ型のメニューアイテムのチェック状態は、チェックボックス型と同様に自動的に更新されるので、自分で更新する必要はありません。</p> -<p>ラジオボタンのように動作するメニューアイテムを作成するには、<code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を "<code>radio</code>" に設定します。それに加えて、<code id="a-name"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/name">name</a></code> 属性を、メニューアイテムが属するグループの名前に設定します。name 属性の値はどんな名前にしてもかまいませんが、同じメニュー内にあり、同じ名前を持つメニューアイテムは、すべて同じグループに属することになります。</p> - -<pre class="brush:xml"><menu label="Sort" accesskey="S"> - <menupopup> - <menuitem label="By Name" accesskey="N" type="radio" name="sort" /> - <menuitem label="By Date" accesskey="D" type="radio" name="sort" checked="true" /> - <menuitem label="By Subject" accesskey="S" type="radio" name="sort" /> - <menuseparator/> - <menuitem label="Ascending" accesskey="A" type="radio" name="order" checked="true" /> - <menuitem label="Descending" accesskey="c" type="radio" name="order" /> - </menupopup> -</menu></pre> - -<p><img alt="Image:Popupguide-menuradio.png" src="/@api/deki/files/302/=Popupguide-menuradio.png"></p> -<p>このメニューでは、 3 つのラジオ型メニューアイテムがすべて "sort" という同じ名前を持っています。そのため、それらのうち 1 つのアイテムを選択すると、そのアイテムがチェックされ、同じグループの他のアイテムはすべてチェックが外されます。最後の 2 つのメニューアイテムは "order" という違うグループに属しています。一方を選択するともう一方のチェックが外されますが、他のグループに属するアイテムには影響を及ぼしません。</p> -<p>それぞれのグループのうち 1 つのアイテムで、<code id="a-checked"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> 属性が true に設定されていることに注目してください。これがメニューのデフォルトの値になります。この値が設定されていなければ、デフォルトではグループ内のどのアイテムもチェックされません。</p> -<p>チェックボックス型のメニューアイテムと同様に、<code id="a-autocheck"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/autocheck">autocheck</a></code> 属性を使って、チェック状態の自動変更を無効にすることができます。この属性はそれぞれのラジオ型メニューアイテムに対して設定する必要があります。</p> - - - -<div><span id="Disabling_a_Menuitem"></span></div> -<h3 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E7.84.A1.E5.8A.B9.E5.8C.96" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E7.84.A1.E5.8A.B9.E5.8C.96">メニューアイテムの無効化</h3> -<p>アイテムを初期状態で無効にするには、次の例のように <code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> 属性を true に設定します。</p> - -<pre><code><menuitem label="Undo" accesskey="U" disabled="true" /></code></pre> - -<p>無効化されると、アイテムはグレーアウトして表示され、関連付けられた動作は実行できなくなります。アイテムが無効化されていると、command イベントは発生しません。適切でないメニューアイテムを無効にするには、<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/disabled">disabled</a></span></code> プロパティを true に設定します。アイテムをふたたび有効にするには、disabled プロパティを false に設定します。無効状態の変更は、popupshowing イベント内で行うのがいいでしょう。popupshowing イベントの詳細は <a href="/ja/docs/XUL/PopupGuide/PopupEvents#The_popupshowing_Event">popupshowing イベント</a>の節を参照して下さい。</p> -<p>メニューアイテムにコマンドが関連付けられている場合には、コマンドを無効にすることでメニューアイテムを無効にすることができます。たとえば下の例では、<code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> 属性によって "Delete" コマンドが無効化されています。</p> - -<pre class="brush:xml"><command id="cmd_delete" disabled="true" oncommand="alert('Deleted!');" /> -<menuitem label="Delete" accesskey="F" command="cmd_deleted" /></pre> - -<p>メニューアイテムがコマンドに結びつけられているため、コマンドが無効化されるとメニューアイテムも無効化されます。コマンドの無効状態が変化すると、それに従ってメニューアイテムの無効状態も更新されます。これは同じコマンドにいくつかのメニューアイテムやボタンを結び付けている場合に役立ちます。コマンドの無効状態を一度変更するだけで、そのコマンドに結び付けられたすべての要素に無効状態が反映されるからです。</p> - - - -<div><span id="Modifying_a_Menuitem"></span></div> -<h3 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E5.A4.89.E6.9B.B4" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.A2.E3.82.A4.E3.83.86.E3.83.A0.E3.81.AE.E5.A4.89.E6.9B.B4">メニューアイテムの変更</h3> -<p>メニューアイテムのラベルとアクセスキーは、スクリプトから label プロパティと accessKey プロパティを変更する事で動的に変更できます。<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/accessKey">accessKey</a></span></code> というプロパティ名では小文字と大文字が使われているのに対して、XUL の <code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> という属性名は小文字のみが使われていることに注意してください。</p> -<p>たとえば、"Undo" メニューアイテムのラベルを、何を元に戻すかによって変更したいことがあるかもしれません。下の例でこれを実践しています。</p> - -<pre class="brush:js">if (gUndoBufferType == "typing") { - menuitem.label = "Undo Typing"; -} else if (gUndoBufferType == "paste") { - menuitem.label = "Undo Paste"; -} else { - menuitem.label = "Undo"; -}</pre> - - -<p>メニューにアイテムを追加したり削除する方法の例は、<a href="/ja/docs/XUL/PopupGuide/MenuModification">メニューの変更</a>を参照して下さい。</p> diff --git a/files/ja/archive/mozilla/xul/popupguide/menumodification/index.html b/files/ja/archive/mozilla/xul/popupguide/menumodification/index.html deleted file mode 100644 index bbf8b05a62..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/menumodification/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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><script> -function addToMenu() -{ - var menu = document.getElementById("edit-menu"); - menu.appendItem("Insert", "insert"); -} -</script> - -<menu id="edit-menu"/> -<button label="Add" oncommand="addToMenu()"/> -</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><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> -</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><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> -</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> diff --git a/files/ja/archive/mozilla/xul/popupguide/menus/index.html b/files/ja/archive/mozilla/xul/popupguide/menus/index.html deleted file mode 100644 index 535e81c0d7..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/menus/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: Menus -slug: Archive/Mozilla/XUL/PopupGuide/Menus -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide/Menus ---- -<p> -<span id="Menus"></span> -</p> -<h3 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC">メニュー</h3> -<p>メニューはユーザが実行できるコマンドの一覧を提供します。 -</p><p><span id="Menu_Types"></span> -</p> -<h4 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E7.A8.AE.E9.A1.9E" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E7.A8.AE.E9.A1.9E">メニューの種類</h4> -<p>メニューは <code>menupopup</code> タグを使って作成します。メニューは一般にメニューバーかボタンに取り付けられます。メニューかボタンがクリックされるとメニューが開かれ、利用できるコマンドが一覧表示されます。ユーザはコマンドを選んで実行したり、 Esc キーを押すかメニューの外側をクリックする事で操作をキャンセルすることができます。 -</p><p>XUL にはメニューを作成するためのタグがいくつか用意されています。それらのタグを使って、メニューをメニューバー上に設置したり、ボタンに取り付けることが出来ます。また、メニューをメニューの中に入れ子にすることによってサブメニューが作成できます。メニューやサブメニューを開いたり閉じたりするのに特別なコードを書く必要は無く、メニューはスクリーン上の適切な位置に自動的に設置されます。 -</p><p>menupopup を取り付けられる要素には 4 種類のものがあります。どの場合でも、menupopup 要素はその要素の直接の子として設置します。以下にそれらの要素の概要を示します。それぞれの詳しい例は後ほどお見せします。 -</p> -<dl><dt>menu -</dt><dd>menu タグはメニューバーにメニューを設置する時に使用します。アプリケーションウィンドウの上端 (またはスクリーン上部のメニューバー) にある「ファイル」や「編集」などがメニューの例です。この種類のメニューは普通、アプリケーション全体に対して適用するコマンドのために使われます。その時点で適用できないコマンドは無効にするべきですが、実際のトップレベルメニューはほとんどの場合ウィンドウによって変化することはありません。 -</dd><dt>button -</dt><dd>ボタンの <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を「menu」にすると、メニューをボタンに取り付けることが出来ます。こうすると、普通のボタンではなく小さな矢印やその他のインジケータの付いたボタンが作成されます。ボタンをクリックするとメニューが表示され、コマンドを選択できます。この種類のメニューは、一連のコマンドを提供したいけれどメニューバーを使いたくない場合、例えばダイアログボックスなどでよく使用されます。詳しくは<a href="ja/XUL/PopupGuide/MenuButtons">メニューボタン</a>を参照して下さい。 -</dd><dt>toolbarbutton -</dt><dd>ツールバーボタンもメニューをサポートしています。これは他のボタンと同じように動作します。詳細は<a href="ja/XUL/PopupGuide/MenuButtons">メニューボタン</a>を参照して下さい。 -</dd><dt>menulist -</dt><dd>menulist はユーザに一覧の中からアイテムを選択させたい時に使用します。この種類のメニューでは、その中のアイテムのうちの一つが選択されます。他のアイテムが選択されると、そのアイテムのラベルが menulist のラベルとして設定されます。他のユーザインターフェイスではこの種のウィジェットはコンボボックスと呼ばれています。 -</dd></dl> -<p>menupopup タグの代わりに popup タグが使用されているのを見かける事があるかもしれません。 popup タグは非推奨ですが、menupopup タグと同等のものです。 -</p><p><span id="Menu_Tag_Overview"></span> -</p> -<h4 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E7.94.A8.E3.82.BF.E3.82.B0.E3.81.AE.E6.A6.82.E8.A6.81" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E7.94.A8.E3.82.BF.E3.82.B0.E3.81.AE.E6.A6.82.E8.A6.81">メニュー用タグの概要</h4> -<p>以下は「File」というラベルの付けられたメニューを一つだけ持つ簡単なメニューバーの例です。 -</p><p><img alt="Image:Popupguide-menubar.png"> -</p> -<pre><menubar id="sample-menubar"> - <menu id="file-menu" label="File"> - <menupopup id="file-popup"> - <menuitem label="New"/> - <menuitem label="Open"/> - <menuitem label="Save"/> - <menuseparator/> - <menuitem label="Exit"/> - </menupopup> - </menu> -</menubar> -</pre> -<p>この例では 5 つのタグが使われています。簡単に説明します。 -</p> -<dl><dt>menubar -</dt><dd>ウィンドウまたはスクリーンの上端に表示されるメニューの列です。この中には menu 要素を格納するべきです。 -</dd></dl> -<dl><dt>menu -</dt><dd>「File」や「Tools」などの、メニューバー上のメニューのラベルです。メニューはサブメニューのラベルとしても使用されます。 -</dd></dl> -<dl><dt>menupopup -</dt><dd>メニュー上に表示されるアイテムを格納したポップアップです。上の例の menupopup は「File」メニューの子で、メニューのラベルがクリックされると表示されます。 -</dd></dl> -<dl><dt>menuitem -</dt><dd>メニュー上に表示される個々のアイテムです。ユーザがマウスを menuitem の上に移動すると、アイテムがハイライトされます。カーソルキーを使っても選択中のアイテムを変更できます。 menuitem は実行するコマンドと関連付けられます。 -</dd></dl> -<dl><dt>menuseparator -</dt><dd>メニューのアイテムの間の区切りです。 -</dd></dl> -<p>上の例では、「File」メニューには 4 つの menuitem と 1 つの menuseparator があります。menu と menuitem はそれぞれその目的を表すラベルを持っています。 -</p><p>他の種類のタグを menupopup 上に表示させる事は出来ません。メニューとは違う多目的のポップアップを作成したければ、panel を使用してください。詳しくは <a href="ja/XUL/PopupGuide/Panels">パネル</a> を参照して下さい。 -</p><p><span id="The_menubar_element"></span> -</p> -<h5 id="menubar_.E8.A6.81.E7.B4.A0" name="menubar_.E8.A6.81.E7.B4.A0">menubar 要素</h5> -<p>メニューバーは XUL の menubar タグを使って作成します。通常は、メニューバーはアプリケーションのメインウィンドウの上部を横切るように配置されます。Macintosh では、メニューバーはスクリーンの上端に配置されます。この違いに対処するのに何か特別な事をする必要はありません。XUL ウィンドウがパースされる時、最初に見つかった menubar がそのウィンドウのメインメニューバーとして使用され、Macintosh ではそれがメインウィンドウから隠されてスクリーン上部のネイティブメニューに変換されます。このため、ウィンドウはメニューバーを 1 つだけ持つべきですが、それぞれのウィンドウが違うメニューバーを持つことは可能です。 -</p><p>menubar の中には menu 要素をそれぞれのメニューに対して 1 つ置きます。下は 3 つのメニューを持つメニューバーの例です。 -</p> -<pre><menubar id="sample-menubar"> - <menu id="file-menu" label="File"> - ... - </menu> - <menu id="tools-menu" label="Tools"> - ... - </menu> - <menu id="help-menu" label="Help"> - ... - </menu> -</menubar> -</pre> -<p>menubar に他の要素を置く事も可能ですが、それらは Macintosh では表示されないという事を覚えておいてください。そのため、その要素の機能を他の場所で使用できないか確かめるべきです。もしくは、複数のプラットフォームで異なる方法をとるようなコードを書いてください。menubar に他の要素を設置する時に、それを他のメニューの隣ではなく反対側におきたい事があるかもしれません。これは伸び縮みする spacer を置く事で可能になります。 -</p> -<pre><menubar id="sample-menubar"> - <menu id="file-menu" label="File"> - ... - </menu> - <spacer flex="1"/> - <image src="logo.png"/> -</menubar> -</pre> -<p>この例では、ロゴ画像がメニューバーの端に設置されます。 -</p><p><span id="The_menupopup_element"></span> -</p> -<h5 id="menupopup_.E8.A6.81.E7.B4.A0" name="menupopup_.E8.A6.81.E7.B4.A0">menupopup 要素</h5> -<p>menupopup 要素は、メニューアイテムを表示するポップアップです。menubar のメニューに対して使う時は、menupopup を menu 要素の子要素として設置します。以下は簡単なヘルプメニューの例です。 -</p> -<pre><menu label="Help"> - <menupopup> - <menuitem label="Contents"/> - <menuitem label="Search Help"/> - </menupopup> -</menu> -</pre> -<p>通常は、menupopup は隠されています。「Help」ラベルが押されると、menupopup がウィンドウの上端に、Help メニューのラベルの底辺に揃えて表示されます。メニューコマンドが選択されるかメニューがキャンセルされると、menupopup は再びスクリーンに表示されなくなります。 -</p><p><span id="The_menu_element"></span> -</p> -<h5 id="menu_.E8.A6.81.E7.B4.A0" name="menu_.E8.A6.81.E7.B4.A0">menu 要素</h5> -<p>menu 要素は menubar 上のラベルやサブメニューのラベルに使われます。サブメニューについての情報は、下の<a href="ja/XUL/PopupGuide/Menus#Submenus">サブメニュー</a>を参照して下さい。 -</p><p>menu 要素のラベルは <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性を使って指定します。下の例では、メニューに「View」というラベルが付けられています。 -</p> -<pre><menu label="View"> - <menupopup> - <menuitem label="Toolbar"/> - <menuitem label="Status Bar"/> - </menupopup> -</menu> -</pre> -<p>メニューがクリックされると、メニューはその中に格納された menupopup を開きます。このため、menupopup は menu の直接の子として設置するようにして下さい。 -</p><p>メニューはキーボードを使っても開く事ができます。ユーザは特定のキーを押してメニューのラベルをハイライトさせて、カーソルキーを使ってメニュー間を移動します。このキーはプラットフォーム毎に異なり、例えば Windows では F10 キーが使われます。メニューコマンドに簡単にアクセスできるようにするもう一つの方法として、それぞれの menu 要素にアクセスキーと呼ばれるショートカットキーを追加する方法があります。いくつかのプラットフォームでは、アクセスキーを追加すると、どのキーを押せばいいのかを示すためにメニューのラベルの中の一文字に下線が引かれます。このため、アクセスキーは必ずメニューのラベルに表示される文字のどれかと一致させるべきです。 -</p><p>メニューに対してアクセスキーを設定するには、下の例のように <code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> 属性を使います。 -</p> -<pre><menu label="File" accesskey="F"/> -</pre> -<p>このメニューは (一般的には Alt キーと同時に) アクセスキーを押すことで開く事が出来ます。 -</p><p>当然のことながら、アクセスキーは menubar の中で一意のものであるべきです。よってもし「Find」というラベルのメニューを追加したければ、違うアクセスキーを設定する必要があるでしょう。 -</p> -<pre><menubar> - <menu label="File" accesskey="F"/> - <menu label="Find" accesskey="d"/> -</menubar> -</pre> -<p>この例では、「File」メニューのアクセスキーが「F」に、「Find」メニューのアクセスキーが「d」に設定されています。アクセスキーは大文字と小文字を区別しませんが、大文字小文字が一致するものがあれば必ずそちらに下線が引かれます。例えば、アクセスキー「W」は「Window」というメニューラベルの最初の文字にマッチしますが、アクセスキー「w」は最後の文字にマッチします。アクセスキーを設定する時には常に大文字小文字を一致させた方がいいでしょう。 -</p><p><span id="The_menuitem_element"></span> -</p> -<h5 id="menuitem_.E8.A6.81.E7.B4.A0" name="menuitem_.E8.A6.81.E7.B4.A0">menuitem 要素</h5> -<p>menuitem 要素はメニューのポップアップ上に現れる個々のアイテムに使われます。menu 要素と同様に、 <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性と <code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> 属性を使ってアイテムに対してラベルとアクセスキーを設定できます。 -</p> -<pre><menuitem label="Open" accesskey="O"/> -</pre> -<p><img alt="Image:Popupguide-menuaccesskey.png"> -</p><p>menuitem のアクセスキーはそれが格納されているメニューが開かれている間しか機能しないので、アクセスキーはそのメニューの中でのみ一意のものであれば良いという事になります。 -</p><p>メニューが開かれている間にアイテムがマウスでクリックされるかアクセスキーが押されると、menuitem で command イベントが発生します。これを利用して、menuitem に特定の動作を関連付ける事が出来ます。例えば「Open」メニューアイテムに、開くファイルを選択するためのファイルピッカーを開く動作を関連付けたり出来ます。この例では、 <code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code> 属性を使って command イベントリスナをアイテムに取り付けています。ここではただ単に警告メッセージを開くだけにしています。 -</p> -<pre><menuitem label="Open" accesskey="O" oncommand="alert('Open a File!');"/> -</pre> -<p>メニューアイテムに動作を関連付けるには、 command 要素を使う方法もあります。下の例は先ほどの例と同じ効果がありますが、command イベントを直接とらえる代わりに command 要素を使っています。 -</p> -<pre><command id="cmd_open" oncommand="alert('Open a File!');"/> -... -<menuitem label="Open" accesskey="O" command="cmd_open"/> -</pre> -<p><code id="a-command"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code> 属性には同じドキュメント内にあるコマンド要素の id を設定します。この場合は「cmd_open」です。こうすると、command イベントは menuitem ではなく command 要素で発生します。これは例えばメニューバーのメニューアイテムや、コンテキストメニュー、ツールバーボタンなどのいくつかの要素に同じ動作を実行させたい時に便利です。それぞれの要素に command を結びつければ、実行するコードを command 要素に一度設置するだけで済むからです。 -</p><p>menuitem には、ラベルの横にアイコンや関連付けられたショートカットを表示させる事も出来ます。メニューにショートカットキーを追加する方法の詳細は<a href="ja/XUL/PopupGuide/MenuItems#Adding_Shortcut_Keys_to_Menu_Items">メニューアイテムにショートカットキーを追加する</a>を参照して下さい。また、メニューにアイコンを追加する方法は<a href="ja/XUL/PopupGuide/MenuItems#Adding_Icons_to_Menu_Items">メニューアイテムにアイコンを追加する</a>を参照して下さい。 -</p><p>チェックボックス型のメニューアイテムやラジオボタン型のメニューアイテムを作成する方法は <a href="ja/XUL/PopupGuide/MenuItems#Checkbox_Menu_Items">チェックボックス型メニューアイテム</a> もしくは <a href="ja/XUL/PopupGuide/MenuItems#Radio_Menu_Items">ラジオボタン型メニューアイテム</a>を参照して下さい。 -</p><p>メニューアイテムは <code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> 属性を true にする事で無効にすることが出来ます。この例は<a href="ja/XUL/PopupGuide/MenuItems#Disabling_a_Menuitem">メニューアイテムの無効化</a>を参照して下さい。 -</p><p><span id="The_menuseparator_element"></span> -</p> -<h5 id="menuseparator_.E8.A6.81.E7.B4.A0" name="menuseparator_.E8.A6.81.E7.B4.A0">menuseparator 要素</h5> -<p>menuseparator 要素を使うとメニューの間に区切りを作成する事が出来ます。メニューの中で関連性のあるコマンドは一つにまとめ、異なるグループの間には区切りを入れるのがいいでしょう。そうするとメニュー上のアイテムを見分けるのが簡単になります。menuseparator に使用できる特別な属性はありません。 -</p> -<pre><menuseparator/> -</pre> -<p><span id="Submenus"></span> -</p> -<h4 id=".E3.82.B5.E3.83.96.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC" name=".E3.82.B5.E3.83.96.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC">サブメニュー</h4> -<p>メニュー上のアイテムに、それが選択された時にのみ開かれるもう一つのメニューにしまい込まれた追加のコマンドを持たせたい事があるでしょう。menu 要素を他の menupopup の中に入れ子にすると、サブメニューを作成できます。マウスがサブメニューのラベルの上に移動するか、カーソルキーでサブメニューを選択すると、そのメニューのポップアップが表示されます。マウスが離れるか選択アイテムが変更されると、メニューは閉じられます。 -</p> -<pre><menubar id="sample-menubar"> - <menu id="view-menu" label="View"> - <menupopup> - <menuitem label="Toolbar"/> - <menuitem label="Status Bar"/> - <menuseparator/> - <menu label="Sort" accesskey="S"> - <menupopup> - <menuitem label="By Name"/> - <menuitem label="By Date"/> - </menupopup> - </menu> - </menupopup> - </menu> -</menubar> -</pre> -<p><img alt="Image:Popupguide-submenus.png"> -</p><p>この例では、トップレベルの「View」メニューが 2 つのメニューアイテムと、 1 つの区切り線と、menu タグで作成された 1 つのサブメニューを持っています。このメニューは「Sort」というラベルとアクセスキー「S」を持っています。また、このメニューは 2 つのアイテムを持つ menupopup を子に持っています。この menupopup の構文は外側の menupopup と同じものです。 -</p><p>さらに、「Sort」menupopup の中のアイテムとしてもう一つ menu 要素を使用すれば、 3 段階目のメニューを追加する事も出来ます。ですが、そうするとユーザにとっての使用が難しいものになってしまいがちなので、あまり深いレベルのサブメニューは追加しない方がいいでしょう。 -</p><p><span id="Sharing_Menus_Between_Windows"></span> -</p> -<h4 id=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E9.96.93.E3.81.A7.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E5.85.B1.E6.9C.89.E3.81.99.E3.82.8B" name=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E9.96.93.E3.81.A7.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E5.85.B1.E6.9C.89.E3.81.99.E3.82.8B">ウィンドウ間でメニューを共有する</h4> -<p>いくつかのウィンドウで同じメニューバーを共有したければ、メニューバーをオーバーレイに設置してそれを全てのウィンドウに適用するというのが一般的な手法です。こうするとコードが重複することなくそれぞれのウィンドウにメニューバーを共有させる事が出来ます。例えば、 Tools メニューを全てのウィンドウで共有させたければ、メニューをオーバーレイの中に作成し、それぞれのウィンドウには一行だけ書いてそのメニューを追加します。 -</p> -<pre><menu id="menu-tools"/> -</pre> -<p>オーバーレイには、そのメニューの内容が完全に記述された、同じ「menu-tools」という id を持つ <code>menu</code> を設置してください。 -</p><p>もしウィンドウ間でちょっとした違いを持たせたければ、load イベントリスナでメニューアイテムを表示したり隠したりするのもいいでしょう。例えば、ウィンドウが開かれる時にアイテムを非表示にしたければこのようにします。 -</p> -<pre>function initMenus() -{ - var item = document.getElementById("menu-file-open"); - item.hidden = true; -} -</pre> -<p>「menu-fileOpen」という id を持つメニューを隠すために <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/hidden">hidden</a></span></code> プロパティが true に設定されています。この関数は window の <code id="a-onload"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onload">onload</a></code> 属性の中で呼び出すことが出来ます。 -</p> -<div class="noinclude"> -</div> diff --git a/files/ja/archive/mozilla/xul/popupguide/moveresize/index.html b/files/ja/archive/mozilla/xul/popupguide/moveresize/index.html deleted file mode 100644 index 4f5e0f7e6d..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/moveresize/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: MoveResize -slug: Archive/Mozilla/XUL/PopupGuide/MoveResize -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide/MoveResize ---- -<p> -<span id="Moving_and_Resizing_a_Popup"></span> -</p> -<h3 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E7.A7.BB.E5.8B.95.E3.81.A8.E3.83.AA.E3.82.B5.E3.82.A4.E3.82.BA" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E7.A7.BB.E5.8B.95.E3.81.A8.E3.83.AA.E3.82.B5.E3.82.A4.E3.82.BA">ポップアップの移動とリサイズ</h3> -<p>メニューとポップアップにはそれらを移動やリサイズするためのメソッドがあります。 -</p><p><span id="Moving_a_Popup"></span> -</p> -<h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E7.A7.BB.E5.8B.95" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E7.A7.BB.E5.8B.95">ポップアップの移動</h4> -<p>いったんポップアップが開かれれば、そのポップアップの <span id="m-moveTo"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/moveTo">moveTo</a></code></span> メソッドによってポップアップを移動することができます。 -</p> -<pre>void moveTo(in long left, in long top); -</pre> -<p>引数 <code>left</code> は画面上の水平位置で、引数 <code>top</code> は画面上の垂直位置です。このメソッドは与えられた引数に合致するように <code id="a-left"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code> 属性と <code id="a-top"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code> 属性を変更するので、これらの属性が永続化 (<span style="color: green;">persist</span>)されると、ウィンドウがふたたび表示された時にこの値が復元されます。 -</p><p>次の例はポップアップを画面の左上の端に移動します。 -</p> -<pre>popup.moveTo(0, 0); -</pre> -<p>この表示位置は、オペレーティングシステムが提供するメニューバーやタスクバーなどのユーザインターフェイス要素に重ならないようにずらされます。 -</p><p><span id="Resizing_a_Popup"></span> -</p> -<h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E3.83.AA.E3.82.B5.E3.82.A4.E3.82.BA" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E3.83.AA.E3.82.B5.E3.82.A4.E3.82.BA">ポップアップのリサイズ</h4> -<p>ポップアップの大きさはその内容によって自動的に決定されます。たとえば、メニューの大きさはその中の全てのアイテムを表示するのに十分な大きさになります。メニューは画面上で利用できるスペースよりも大きくなることがあります。この場合、メニューはスクリーンの大きさに合わせて移動されます。たとえば、メニューのポップアップがメニューのラベルの下ではなく上に表示されることがあります。XUL アプリケーションのウィンドウを画面の下端に移動して、メニューまたはメニューを持つボタンをクリックするとこの効果を見ることができます。 -</p><p>それでもポップアップが大きすぎる場合には、スクリーンの大きさに合うようにリサイズされます。メニューの両端に矢印が表示され、ユーザはアイテムをスクロールできるようになります。 -</p><p>ポップアップの <span id="m-sizeTo"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/sizeTo">sizeTo</a></code></span> メソッドを使うと、ポップアップを手動でリサイズできます。 -</p> -<pre>void sizeTo(in long width, in long height); -</pre> -<p>この例では、ポップアップが幅 200 pixel、高さ 300 pixel にリサイズされます。 -</p> -<pre>popup.sizeTo(200, 300); -</pre> -<div class="noinclude"> -</div> diff --git a/files/ja/archive/mozilla/xul/popupguide/openclose/index.html b/files/ja/archive/mozilla/xul/popupguide/openclose/index.html deleted file mode 100644 index 2a982976f8..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/openclose/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: OpenClose -slug: Archive/Mozilla/XUL/PopupGuide/OpenClose -tags: - - XUL - - XUL Popup Guide - - 要更新 -translation_of: Archive/Mozilla/XUL/PopupGuide/OpenClose ---- -<div> <span id="Opening_and_Closing_Popups"></span></div> -<h3 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E9.96.8B.E9.96.89" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E9.96.8B.E9.96.89">ポップアップの開閉</h3> -<p>ポップアップとメニューはスクリプトによって開閉できます。</p> -<p><span id="Opening_Menus"></span></p> -<h4 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E9.96.8B.E3.81.8F" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E9.96.8B.E3.81.8F">メニューを開く</h4> -<p>メニューは特別な事をしなくても必要に応じて自動的に表示されます。たとえばメニューのポップアップはメニューのラベルがクリックされれば開きますし、サブメニューは親メニュー要素の上にマウスを乗せれば開きます。</p> -<p>しかし、手動でメニューを開きたい場合もあるでしょう。menu 要素には open プロパティがあり、true に設定するとメニューが開き、false に設定するとメニューが閉じます。 簡単な例を示します。</p> -<pre>somemenu.open = true; -</pre> -<p>この一行のコードによって変数 somemenu が参照するメニューが開きます。<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/open">open</a></span></code> プロパティを利用できるのは menu や button であり、menupopup ではないということに注意してください。メニューを開くためのボタンの完成例を示します。</p> -<pre><button label="Open Menu" - oncommand="document.getElementById('editMenu').open = true;"/> - -<menu id="editMenu" label="Edit"> - <menupopup> - <menuitem label="Cut"/> - <menuitem label="Copy"/> - <menuitem label="Paste"/> - </menupopup> -</menu> -</pre> -<p>この手法は <code>menu</code>、<code>button</code>、<code>toolbarbutton</code> のいずれのタグを使った menupopup に対しても用いることができます。<code id="a-popup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code> または <code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> 属性によって他の要素に取り付けられた menupopup については、下記の<a href="/ja/docs/XUL/PopupGuide/OpenClose#Opening_a_Popup">ポップアップを開く</a>を参照してください。</p> -<p>他の方法でメニューを開いた時と同様に、メニュー上に表示されるコマンドをカスタマイズできるように popupshowing イベントが発生します。</p> -<p>メニューを開くことができない状況がいくつかあります。</p> -<ul> - <li>メニューがすでに開いているか、開かれようとしている場合。当然ながら、すでに開いているメニューを開こうとしても何も効果はありません。</li> - <li>メニューが他のメニューの子であり、親メニューが開いていない場合。この場合、先に親メニューを開く必要があります。サブメニューを開くには、まず親メニューを開き、popupshown イベントリスナ内で子メニューを開きます。このやり方の例は <a href="/ja/docs/XUL/PopupGuide/PopupEvents#The_popupshown_Event">popupshown イベント</a> を参照してください。</li> - <li>Web ページなどの非特権コンテンツウィンドウのメニューは、ウィンドウにフォーカスがあり、現在アクティブなタブにある間にしかポップアップを開くことができません。つまり、バックグラウンドタブの中のドキュメントはメニューやポップアップを開くことはできません。</li> -</ul> -<p><span id="Closing_Menus"></span></p> -<h4 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E9.96.89.E3.81.98.E3.82.8B" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E9.96.89.E3.81.98.E3.82.8B">メニューを閉じる</h4> -<p>ユーザがメニューの中のどれかを選択すると、メニューは自動的に閉じます。メニューアイテムが選択されると、何らかの動作を実行するために command イベントが発生します。ユーザは Escape キーを押してコマンドの選択をキャンセルすることもできます。このときメニューは 1 つだけ閉じますが、そのメニューが親メニューを持つ場合、親メニューは開いたままです。また、メニューの外側をクリックしてメニューの選択をキャンセルすることもできます。この場合、そのメニューだけではなく、その全ての親メニューも閉じられます。</p> -<p>メニューをスクリプトから閉じるには、開くときとは逆に <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/open">open</a></span></code> プロパティを false に設定します。open プロパティを利用できるのは menu や button であり、menupopup ではありません。</p> -<pre>somemenu.open = false; -</pre> -<p>このコマンドは 1 つのレベルのメニューしか閉じないので、必要ならば同様のコマンドで親メニューを閉じなければなりません。しかし、この例の somemenu はすでに開いていないので、somemenu の子メニューはすべて閉じられます。たとえば、「ファイル」メニューに、最近使用したファイルの一覧を格納したサブメニューがあるとします。両方のメニューが開かれた状態でサブメニューの <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/open">open</a></span></code> プロパティを false に設定すると、サブメニューは閉じますが、親の「ファイル」メニューは開いたままです。反対に、「ファイル」メニューの open プロパティを false に設定すると、両方のメニューが閉じます。</p> -<p>この手法は <code>menu</code>、<code>button</code>、<code>toolbarbutton</code> のいずれのタグを使った menupopup に対しても用いることができます。<code id="a-popup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code> または <code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> 属性によって他の要素に取り付けられた menupopup については、下記の<a href="/ja/docs/XUL/PopupGuide/OpenClose#Closing_a_Popup_with_the_hidePopup_method">ポップアップを閉じる</a>を参照してください。</p> -<p>メニューが閉じると、menupopup で popuphiding イベントが発生します。popuphiding イベントをリスンするイベントリスナを取り付けることで、popupshowing イベント中に追加したコマンドを削除するといったことが可能になります。</p> -<p>メニューやポップアップは、それを含むドキュメントやウィンドウが閉じられたときや、menupopup 要素がドキュメントから削除されたときにも閉じられます。こういった場合には、イベントの発生元となる要素が存在しないので、popuphiding や popuphidden イベントは発生しません。これらのイベントで行われるような<span style="border-bottom: 1px dashed green;" title="uninitialization">終了処理</span>を実行したければ、unload イベント中に行うのがいいでしょう。</p> -<p><span id="Testing_Menu_Open_State"></span></p> -<h4 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.8C.E9.96.8B.E3.81.84.E3.81.A6.E3.81.84.E3.82.8B.E3.81.8B.E8.AA.BF.E3.81.B9.E3.82.8B" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.8C.E9.96.8B.E3.81.84.E3.81.A6.E3.81.84.E3.82.8B.E3.81.8B.E8.AA.BF.E3.81.B9.E3.82.8B">メニューが開いているか調べる</h4> -<p>メニューが開いているかどうかを調べるには、そのメニューの <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/open">open</a></span></code> プロパティを調べます。open プロパティが true に設定されていればそのメニューは開いており、そうでなければ閉じられています。</p> -<pre>var open = somemenu.open; -</pre> -<p><span id="Opening_a_Popup"></span></p> -<h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E9.96.8B.E3.81.8F" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E9.96.8B.E3.81.8F">ポップアップを開く</h4> -<p><code>menu</code> タグ、<code>button</code> タグ、<code>toolbarbutton</code> タグを使った menupopup を開くには、上記の<a href="/ja/docs/XUL/PopupGuide/OpenClose#Opening_Menus">メニューを開く</a>を参照してください。</p> -<p><code id="a-popup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code> attribute によって取り付けられたポップアップは、ユーザが左マウスボタンをクリックすると開きます。キーボードによってこの動作を再現することはできないので、必ずそのメニューの機能にアクセスする別の方法を用意するようにしてください。これはユーザインタフェースのほかの場所に代わりになるコマンドを設置するか、メニューを開くショートカットを用意することで可能になります。メニューが開かれれば、通常どおりキーボードによってアイテム間を移動して選択することができます。</p> -<p><code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> 属性によって取り付けられたポップアップは、ユーザがコンテキストメニューを開こうとする動作を行ったときに開きます。この動作はプラットフォームごとに異なりますが、一般的には要素を右マウスボタンでクリックする必要があります。マウスボタンが 1 つしかない Macintosh システムでは、マウスボタンを押し続けるか、Control キーを押しながらマウスボタンをクリックするとコンテキストメニューが開かれます。Windows では、キーボードのメニューキー (多くのキーボードで Control キーの隣にある、メニューの絵が描かれたキー) を押すか、Shift + F10 キーを押してコンテキストメニューを開く事も出来ます。したがって、ユーザがコンテキストメニューを開くのにマウスを使うものだと決めてかかってはいけません。</p> -<p><span id="The_openPopup_method"></span></p> -<h5 id="openPopup_.E3.83.A1.E3.82.BD.E3.83.83.E3.83.89" name="openPopup_.E3.83.A1.E3.82.BD.E3.83.83.E3.83.89">openPopup メソッド</h5> -<p>ポップアップの <span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドを使うと、ポップアップの種類に関係なくプログラムからポップアップを開くことができます。このメソッドは menupopup、panel、tooltip のどの種類のポップアップでも使用でき、また <code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> 属性によって取り付けられたポップアップなど他の方法で開かれるポップアップでも使用できます。</p> -<p><span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドは、ポップアップをどこにどのように配置するかを指定する 6 つの引数を取ります。これらの引数について以下で説明します。<code>openPopup</code> メソッドは次のように定義されています。</p> -<pre>void openPopup(in DOMElement anchorElement, - in String position, - in long x, - in long y, - in boolean isContextMenu, - in boolean attributesOverride); -</pre> -<p>まず例を示します。</p> -<pre>somepopup.openPopup(anchor, "after_start", 0, 0, false, false); -</pre> -<p>この例は anchor で参照されるほかの要素のすぐ下にポップアップを開きます。これは anchor が <code><a href="/ja/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> 要素であった場合の動作を模倣しています。メニューに対して <code>openPopup</code> メソッドを使うこともできますが、そのメニューの <code id="a-open"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code> 属性を true に設定した方が、menupopup の位置を代わりに処理してくれるのでより簡単です。open 属性は親のメニューや親のボタンで利用できるのに対して、<code>openPopup</code> メソッドは menupopup 要素で利用できるということに注意してください。</p> -<p>ポップアップのアンカーとは、それに隣接してポップアップが表示される要素ノードのことです。たとえば、あるボタンの隣にポップアップを表示させたければ、そのボタンへの参照を第一引数として <code>openPopup</code> メソッドに渡します。次の例では、ポップアップが文書要素からの相対的な位置に開かれます。</p> -<pre>somepopup.openPopup(document.documentElement, "end_before", 0, 0, false, false); -</pre> -<p>openPopup の第二引数はアンカーの <code>position</code> で、これはアンカーのどの辺に対してポップアップを配置するかを指定します。たとえば上の例で使用されている end_before という値を指定すると、ポップアップの左辺がアンカー要素の右辺に接し、双方の上端が揃うように配置されます。この引数はわかりにくいので、<a href="/ja/docs/XUL/PopupGuide/Positioning">ポップアップの位置決め</a>で詳しい利用方法と取り得る値、またそれぞれの値でポップアップがどのように位置合わせされるかを示す画像を参照してください。</p> -<p>openPopup の第三引数と第四引数は、オフセット値 <code>x</code> と <code>y</code> です。これらのオフセット値にゼロ以外の値を指定すると、ポップアップが位置決めされてからさらにポップアップの位置を指定することができます。これにより、ポップアップを特定の要素の位置に固定させつつ、その位置を細かく調整することが可能になります。正の値を指定するとポップアップの位置が右か下に調整され、負の値を指定すると左か上に調整されます。</p> -<p>次の例ではポップアップが要素の下に表示されますが、右に 10 pixel、上に 2 pixel オフセットされます。</p> -<pre>somepopup.openPopup(anchor, "after_start", 10, -2, false, false); -</pre> -<p>アンカーと位置決めは、ポップアップが開かれるときの位置のみを指定するということに注意してください。ポップアップが開いている間にアンカーが移動または削除されても、ポップアップはそれに従いません。しかし、ポップアップが開かれている間にポップアップを動かすことは可能です。<a href="/ja/docs/XUL/PopupGuide/MoveResize">ポップアップの移動とリサイズ</a>を参照してください。</p> -<p>openPopup の第五引数 <code>isContextMenu</code> は、ポップアップをコンテキストメニューとして開くかどうかを指定するフラグです。コンテキストメニューとして開きたければ true を、そうでなければ false を渡します。この引数に何を設定するかはあなたがどんな方法で openPopup を呼び出すかによって明らかでしょう。同じメニューをどちらの方法で開くこともできるので、このフラグはポップアップがどのように表示されるかには影響しないということに注意してください。これが影響するのは、メニューのフォーカスやハイライトが処理される方法です。状況に応じて適切な値を渡している限りは、双方の細かい違いを知る必要はありません。</p> -<p>しかしながら、Firefox のブックマークを使ってこのフラグの効果を確かめることができます。ブックマークのサブメニュー (ブックマークフォルダ) を開いてみてください。マウスが他のメニューの上に移動するとともにハイライトが変更され、マウスが離れるとサブメニューが閉じることがわかります。今度は同じブックマーク上でコンテキストメニューを開いてみてください。マウスを移動しても他のメニューには影響が無いのがわかります。この違いは isContextMenu フラグの使用によって処理されたものです。</p> -<p><code>openPopup</code> メソッドの最後の引数 <code>attributesOverride</code> は、ポップアップの要素自体に設置された属性が、与えられた引数を上書きするかどうかを指定します。これによりポップアップは <code id="a-position"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>、<code id="a-left"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>、<code id="a-top"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code> 属性で指定された位置決めの動作を使用することができます。これらの属性の詳細は<a href="/ja/docs/XUL/PopupGuide/Positioning">ポップアップの位置決め</a>にあります。</p> -<p><span id="Unanchored_Popups_with_openPopup"></span></p> -<h5 id="openPopup_.E3.81.AB.E3.82.88.E3.82.8B.E3.82.A2.E3.83.B3.E3.82.AB.E3.83.BC.E3.81.95.E3.82.8C.E3.81.AA.E3.81.84.E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97" name="openPopup_.E3.81.AB.E3.82.88.E3.82.8B.E3.82.A2.E3.83.B3.E3.82.AB.E3.83.BC.E3.81.95.E3.82.8C.E3.81.AA.E3.81.84.E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97">openPopup によるアンカーされないポップアップ</h5> -<p><span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドの第一引数が null だと、アンカーされないポップアップが作成されます。この場合、第二引数 position は使用されないため、空文字列を渡してもかまいません。例を示します。</p> -<pre>somepopup.openPopup(null, "", 60, 50, false, false); -</pre> -<p>アンカーされないポップアップはオフセット値 x と y 、この場合は 60 と 50 を、ウィンドウまたはフレームの端からのオフセットとして使用します。この方法では、ポップアップは特定のノードではなく、ウィンドウからの相対的な位置に配置されます。たとえば、マウスをクリックした時に、現在マウスポインタがある位置にポップアップを表示させたいことがあるでしょう。click イベントリスナの例を示します。</p> -<pre>function mouseClicked(event) -{ - var panel = document.getElementById("some-panel"); - panel.openPopup(null, "", event.clientX, event.clientY, false, false); -} -</pre> -<p><span id="The_openPopupAtScreen_method"></span></p> -<h5 id="openPopupAtScreen_.E3.83.A1.E3.82.BD.E3.83.83.E3.83.89" name="openPopupAtScreen_.E3.83.A1.E3.82.BD.E3.83.83.E3.83.89">openPopupAtScreen メソッド</h5> -<p>2 つめのメソッド <span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span> は、ポップアップを画面上の特定の座標に配置するのに利用できます。このメソッドではポップアップは要素にアンカーされず、引数 <code>x</code> と <code>y</code> で指定された特定の位置に表示されます。</p> -<pre>void openPopupAtScreen(in long x, in long y, in boolean isContextMenu); -</pre> -<p>引数 <code>isContextMenu</code> は、コンテキストメニューを開くように指示します。これは <code>openPopup</code> メソッドのものと同じ機能を持っています。次の例では、水平位置 100、垂直位置 200 にポップアップが開かれます。</p> -<pre>popup.openPopupAtScreen(100, 200, false); -</pre> -<p>ポップアップが部分的もしくは全体的にスクリーンから出るような位置に座標が指定されると、ポップアップは全体が見えるように移動され、必要に応じてリサイズされる事に注意してください。</p> -<p><span id="Closing_a_Popup_with_the_hidePopup_method"></span></p> -<h4 id="hidePopup_.E3.83.A1.E3.82.BD.E3.83.83.E3.83.89.E3.81.A7.E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E9.96.89.E3.81.98.E3.82.8B" name="hidePopup_.E3.83.A1.E3.82.BD.E3.83.83.E3.83.89.E3.81.A7.E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E9.96.89.E3.81.98.E3.82.8B">hidePopup メソッドでポップアップを閉じる</h4> -<p>ユーザが Escape キーを押すかポップアップの外側のどこかをクリックすると、ポップアップメニューは閉じます。</p> -<p><code>menu</code>、<code>button</code>、<code>toolbarbutton</code> タグを使った menupopup を閉じる方法は、上記の<a href="/ja/docs/XUL/PopupGuide/OpenClose#Closing_Menus">メニューを閉じる</a>を参照して下さい。</p> -<p>スクリプトによってポップアップを閉じるには、ポップアップの <span id="m-hidePopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/hidePopup">hidePopup</a></code></span> メソッドを使います。このメソッドは引数を取りません。</p> -<pre>popup.hidePopup(); -</pre> -<p><span id="Determining_if_a_Popup_is_Open"></span></p> -<h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.8C.E9.96.8B.E3.81.84.E3.81.A6.E3.81.84.E3.82.8B.E3.81.8B.E3.81.A9.E3.81.86.E3.81.8B.E5.88.A4.E5.88.A5.E3.81.99.E3.82.8B" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.8C.E9.96.8B.E3.81.84.E3.81.A6.E3.81.84.E3.82.8B.E3.81.8B.E3.81.A9.E3.81.86.E3.81.8B.E5.88.A4.E5.88.A5.E3.81.99.E3.82.8B">ポップアップが開いているかどうか判別する</h4> -<p>メニューに関しては、menu、button もしくは toolbarbutton の <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/open">open</a></span></code> プロパティを調べれば判別できます。true ならメニューは開いています。</p> -<p>他の種類のポップアップでは、<code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/state">state</a></span></code> プロパティを調べればポップアップが開いているかどうかを判別できます。このプロパティはメニュー、パネル、ツールチップを含む全ての種類のポップアップで利用できます。表示されているポップアップの <code>state</code> プロパティは <code>open</code> という値を持ち、ポップアップが閉じると <code>state</code> プロパティの値は <code>closed</code> になります。このプロパティは読み込み専用で、<code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>、<code><a href="/ja/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> または<code><a href="/ja/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code> 要素で利用できます。</p> -<p><code>state</code> プロパティは他にもう 2 つの値を持つことがあります。これらの値は、ポップアップが開いている状態から閉じている状態へ、またはその逆へと移行する間に使用されます。ポップアップが表示されようとしている時には <code>state</code> プロパティは <code>showing</code> という値を持ち、ポップアップが消されようとしている時には <code>hiding</code> という値を持ちます。前者は <a href="/ja/docs/XUL/PopupGuide/PopupEvents#The_popupshowing_event">popupshowing</a> イベント中に起こり、後者は <a href="/ja/docs/XUL/PopupGuide/PopupEvents#The_popuphiding_event">popuphiding</a> イベント中に起こります。</p> -<p>たとえば、<code>state</code> プロパティは <code>panel</code> がすでに開かれているかどうかを判別するのに使用できます。パネルが開かれている場合、ユーザはメインウィンドウ内のユーザインタフェースを直接操作していないので、操作を無効にするといったことも可能になります。</p> diff --git a/files/ja/archive/mozilla/xul/popupguide/panels/index.html b/files/ja/archive/mozilla/xul/popupguide/panels/index.html deleted file mode 100644 index f2abd44094..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/panels/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Panels -slug: Archive/Mozilla/XUL/PopupGuide/Panels -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide/Panels ---- -<p> - -<span id="Panels"></span> -</p> -<h3 id=".E3.83.91.E3.83.8D.E3.83.AB" name=".E3.83.91.E3.83.8D.E3.83.AB">パネル</h3> -<p>パネルはあらゆる種類の内容に対応するポップアップです。データを選択または入力するための一時的なポップアップを提供する時に使用します。 -</p><p><span id="The_panel_element"></span> -</p> -<h4 id="panel_.E8.A6.81.E7.B4.A0" name="panel_.E8.A6.81.E7.B4.A0">panel 要素</h4> -<p>パネルを作成するには <code><a href="/ja/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> 要素を使います。パネルは panel 要素の子要素として設置されたどんな要素でも表示できます。例えば、次のパネルは検索用のテキストボックスを表示します。 -</p> -<pre><panel id="search-panel"> - <label control="search" value="Terms:"/> - <textbox id="search"/> -</panel> -</pre> -<p><img alt="Image:Popupguide-panel.png"> -</p><p><code id="a-popup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code> 属性を使うとパネルを要素に取り付けることができ、例えばボタンを押すとパネルが開くといった事が可能になります。popup 属性は同じドキュメント内のパネルの id に設定しなければなりません。 <code id="a-popup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code> 属性を持つ要素の上で左マウスボタンを押すと、対応するパネルが表示されます。例えば、ラベルに上記のポップアップを取り付けるには、次のコードを使います。 -</p> -<pre><label value="Search" popup="search-panel"/> -</pre> -<p>こうすると検索語句を入力するためのパネルを開く検索ボタンが出来上がります。このパネルはマウスポインタの位置にパネルの左上の角が来るように表示されます。この場合、マウスポインタの下ではなくボタンの下にポップアップを表示させたいと思うかもしれません。これはボタンにパネルを取り付けるときによくある状況なので、 <code id="a-position"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code> 属性を使ってポップアップの位置を配置をコントロールできるようになっています。普通は <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を <code>menu</code> に設定して作成するメニュー型のボタンを使った方が良いということに注意してください。以下が完全なサンプルです。 -</p> -<pre><panel id="search-panel" position="after_start"> - <label control="search" value="Terms:"/> - <textbox id="search"/> -</panel> - -<label value="Search" popup="search-panel"/> -</pre> -<p>「after_start」という値を持つ <code id="a-position"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code> 属性がパネル要素に追加されています。これによって、マウスがクリックされた位置ではなく、ラベルの底辺に沿うようにパネルが表示されるようになります。この属性と、他に使用できる値についてのより詳しい情報は、<a href="ja/XUL/PopupGuide/Positioning">ポップアップの位置決め</a>を参照して下さい。 -</p><p>popup 属性の代わりに <code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> 属性を使えば、コンテキストメニューのようにパネルを開く事も可能です。これは menupopup 属性の代わりに panel 要素が使われる事を除けば、コンテキストメニューを使うのと同様に動作します。詳細は<a href="ja/XUL/PopupGuide/ContextMenus">コンテキストメニュー</a>を参照して下さい。 -</p><p><span id="Opening_a_Panel_with_Script"></span> -</p> -<h4 id=".E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.A7.E3.83.91.E3.83.8D.E3.83.AB.E3.82.92.E9.96.8B.E3.81.8F" name=".E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.A7.E3.83.91.E3.83.8D.E3.83.AB.E3.82.92.E9.96.8B.E3.81.8F">スクリプトでパネルを開く</h4> -<p>パネルは、全てのポップアップと同様に、スクリプトからポップアップを開くのに使用できる <span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドを持っています。例えば、次のコードはボタンの下にパネルを開きます。 -</p> -<pre>panel.openPopup(button, "after_start", 0, 0, false, false); -</pre> -<p>同様に、 <span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span> メソッドはパネルをスクリーン上の特定の位置に開きます。この 2 つのメソッドの詳細は<a href="ja/XUL/PopupGuide/OpenClose">ポップアップの開閉</a>を参照して下さい。 -</p><p><span id="Closing_a_Panel"></span> -</p> -<h4 id=".E3.83.91.E3.83.8D.E3.83.AB.E3.82.92.E9.96.89.E3.81.98.E3.82.8B" name=".E3.83.91.E3.83.8D.E3.83.AB.E3.82.92.E9.96.89.E3.81.98.E3.82.8B">パネルを閉じる</h4> -<p>パネルはユーザがパネルの外側をクリックすると自動的に閉じられます。しかし、パネルの中にそれを閉じるためのボタン等の要素が設置される事も珍しくありません。例えば、上記の検索パネルの例に、押された時にパネルを閉じるボタンを追加できます。 -</p> -<pre><script> -function doSearch() -{ - document.getElementById("search-panel").hidePopup(); -} -</script> - -<panel id="search-panel" position="after_start"> - <textbox id="search"/> - <button label="Search" oncommand="doSearch();"/> -</panel> - -<toolbarbutton label="Search" popup="search-panel"/> -</pre> -<p>この例では、Search ボタンが押されると関数 doSearch が呼ばれます。この関数はポップアップを取得してその <span id="m-hidePopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/hidePopup">hidePopup</a></code></span> メソッドを呼び出します。もちろん、この関数には検索を開始するコードも含まれるべきでしょう。 -</p><p><span id="The_noautohide_attribute"></span> -</p> -<h4 id="noautohide_.E5.B1.9E.E6.80.A7" name="noautohide_.E5.B1.9E.E6.80.A7">noautohide 属性</h4> -<p>パネルはユーザがパネルの外側をクリックするか、escape キーを押すと閉じます。これはユーザが操作をキャンセルする通常の方法です。また、たくさんのコントロールがあるためにパネルが比較的大きい場合には、パネルの中にキャンセルボタンや「閉じる」ボタンを設置したい場合もあるでしょう。 -</p><p>しかしながら、ユーザがパネルの外側をクリックしても、パネルを開いたままにしておきたい事もあるかもしれません。これはフローティングツールパネルを作成したい時に便利です。これを実行するには、パネルの <code id="a-noautohide"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/noautohide">noautohide</a></code> 属性を true に設定します。 -</p> -<pre><panel id="search-panel" noautohide="true"> - <textbox id="search"/> - <button label="Search" oncommand="doSearch();"/> - <button label="Cancel" oncommand="this.parentNode.hidePopup();"/> -</panel> -</pre> -<p>こうするとパネルはどこをクリックしても閉じなくなってしまうので、パネルは必ず自分自身を閉じる手段を提供しなければなりません。この例ではキャンセルボタンを追加しています。 -</p><p><span id="Focus_in_Panels"></span> -</p> -<h3 id=".E3.83.91.E3.83.8D.E3.83.AB.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9" name=".E3.83.91.E3.83.8D.E3.83.AB.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9">パネルにおけるフォーカス</h3> -<p>パネル内部の要素はマウスを使ってフォーカスすることができ、また Tab キーを押して現在フォーカスのある要素を変更する事ができます。ポップアップが開かれると、メインウィンドウの要素にフォーカスがあった場合にはその要素からフォーカスが外され、その要素で <code>blur</code> イベントが発生します。初期状態ではポップアップ内のどの要素にもフォーカスがありませんが、ユーザは Tab キーを押す事でパネル内部の最初の要素にフォーカスを当てる事ができます。パネルが開かれた時に初期状態で特定の要素にフォーカスが当たるようにしたければ、<code>popupshown</code> イベントハンドラの中でフォーカスを変更してください。例えば、上記の例で最初から textbox にフォーカスされるようにしたければ、このようにします。 -</p> -<pre><panel id="search-panel" onpopupshown="document.getElementById('search').focus()"> -</pre> -<p>パネルが閉じると、パネル内部の要素に focus イベントを持つ要素があれば、その要素からフォーカスが取り除かれます。こういったポップアップの開閉時のフォーカスを取り除くプロセスは、<code>popupshowing</code> イベントもしくは <code>popuphiding</code> イベントが発生した後に起こります。したがって、これらのイベントがキャンセルされるとフォーカスは変更されません。 -</p><p>パネルが開かれたときのフォーカスの変更を無効にするには、<code id="a-noautofocus"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/noautofocus">noautofocus</a></code> 属性を <code>true</code> に設定します。 -</p> -<pre><panel noautofocus="true"> -</pre> -<p>こうすると、パネルが開かれたときにフォーカスされていたメインウィンドウ内の要素にフォーカスが残ります。ただし、パネルが閉じたときにもパネル内にフォーカスが残ったままになるので注意してください。 -</p> -<div class="noinclude"> -</div> diff --git a/files/ja/archive/mozilla/xul/popupguide/platformmenus/index.html b/files/ja/archive/mozilla/xul/popupguide/platformmenus/index.html deleted file mode 100644 index 9b5fd3e2cc..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/platformmenus/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: PlatformMenus -slug: Archive/Mozilla/XUL/PopupGuide/PlatformMenus -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide/Platform_considerations ---- -<p> -<span id="Special_Per-Platform_Menu_Considerations"></span> -</p> -<h3 id=".E3.83.97.E3.83.A9.E3.83.83.E3.83.88.E3.83.95.E3.82.A9.E3.83.BC.E3.83.A0.E3.81.94.E3.81.A8.E3.81.AE.E7.89.B9.E6.AE.8A.E3.81.AA.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E8.80.83.E5.AF.9F" name=".E3.83.97.E3.83.A9.E3.83.83.E3.83.88.E3.83.95.E3.82.A9.E3.83.BC.E3.83.A0.E3.81.94.E3.81.A8.E3.81.AE.E7.89.B9.E6.AE.8A.E3.81.AA.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AB.E9.96.A2.E3.81.99.E3.82.8B.E8.80.83.E5.AF.9F">プラットフォームごとの特殊なメニューに関する考察</h3> -<p>多くのメニューコマンドは、慣例によって設置される場所が決定されます。たとえば、「編集」メニューはその機能が利用できるアプリケーションでは必ず「元に戻す」コマンドから始まり、「やり直し」、「切り取り」、「コピー」、「貼り付け」といったように続きます。 -</p><p>メニューアイテムの中には、プラットフォームごとに異なる特定の共通のラベルを持ち、プラットフォームごとに異なる特定の共通の場所に設置されるものがあります。たとえば Windows では、アプリケーションを終了するためのメニューには「終了」というラベルが付けられ、通常は「ファイル」メニューの最後に設置されます。 -</p><p>Macintosh では、「ファイル」メニューの横にアプリケーションの名前が付いた追加のメニューが存在します。このメニューの中にはそのアプリケーションに関連するアイテムがいくつか格納されます。たとえばアプリケーションの設定画面を開いたり、アプリケーションを終了させるメニューアイテムはこの場所に設置するのが適切です。 -</p><p>これは、アプリケーションメニューに設置する必要があるメニューアイテムに対して必ず特定の共通の id を設定することによって実現されます。Mac ではこれらのメニューアイテムはアプリケーションメニューに移動されますが、他のプラットフォームでは元の位置に置かれたままにされます。これにより、すべてのプラットフォームに対して同じ XUL コードを書くのがより簡単になります。以下は自動的に処理されるメニューアイテムの id の一覧です。 -</p> -<table> -<tbody><tr> -<td>menu_FileQuitSeparator -</td><td>「終了」アイテムの直前にあるセパレータ -</td></tr><tr> -<td>menu_FileQuitItem -</td><td>アプリケーションを終了するアイテム -</td></tr><tr> -<td>menu_PrefsSeparator -</td><td>「環境設定/オプション」アイテムの直前にあるセパレータ -</td></tr><tr> -<td>menu_preferences -</td><td>アプリケーションの環境設定を開くアイテム -</td></tr><tr> -<td>aboutSeparator -</td><td>「～について」アイテムの直前のセパレータ -</td></tr><tr> -<td>aboutName -</td><td>アプリケーションの「～について」ダイアログを開くアイテム -</td></tr><tr> -<td>menu_mac_services -</td><td>システムサービスを提供するメニュー -</td></tr><tr> -<td>menu_mac_hide_app -</td><td>アプリケーションを隠すためのアイテム -</td></tr><tr> -<td>menu_mac_hide_others -</td><td>このアプリケーション以外のすべてのアプリケーションを隠すためのアイテム -</td></tr><tr> -<td>menu_mac_show_all -</td><td>すべてのアプリケーションのウィンドウを表示するアイテム -</td></tr></tbody></table> -<p>最後の 4 つのアイテムは通常は使われませんが、完全を期すために記載しました。 -</p><p>例を示します。 -</p> -<pre><menubar> - <menu label="Tools"> - <menupopup> - <menuitem label="Spell Check"/> - <menuitem id="menu_preferences" label="Preferences" - oncommand="window.openDialog('options.xul', '_new', 'chrome');"/> - </menupopup> - </menu> -</menubar> -</pre> -<p><img alt="Image:Popupguide-specialmenubar.png"> -</p><p>このメニューアイテムは Macintosh ではアプリケーションメニューに設置されますが、他のプラットフォームでは Tools メニューに残されます。アプリケーションメニューに移動されると、ラベルとショートカットキーはプラットフォームの慣例によって上書きされます。しかし、プラットフォームに関わらず、ユーザが実行すればそのメニューアイテムで command イベントが発生します。 -</p> -<div class="noinclude"> -</div> diff --git a/files/ja/archive/mozilla/xul/popupguide/popupevents/index.html b/files/ja/archive/mozilla/xul/popupguide/popupevents/index.html deleted file mode 100644 index 81c2359c52..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/popupevents/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: PopupEvents -slug: Archive/Mozilla/XUL/PopupGuide/PopupEvents -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide/PopupEvents ---- -<h2 id="Popup_Events" name="Popup_Events">ポップアップイベント</h2> -<p>ポップアップやメニューに関連するイベントにはいくつかの種類があります。</p> -<p>以下の一覧はそれらのイベントの概要です。</p> -<table class="standard-table"> - <tbody> - <tr> - <th><code>contextmenu</code></th> - <td>コンテキストメニューを開くように要求したときに、キーボードとマウスのどちらによって開かれるかに関わらず発生する。このイベントは、コンテキストメニューを関連付けられていない要素に対しても発生する。詳しい利用法は<a href="/ja/docs/XUL/PopupGuide/ContextMenus#Context_Menu_Events">コンテキストメニューイベント</a>を参照。</td> - </tr> - <tr> - <th><code>popupshowing</code></th> - <td><code>menupopup</code> 、<code>panel</code> 、<code>tooltip</code> において、それらが表示される直前に発生する。一般に、コンテキストに基づいてポップアップ上のアイテムを追加または調整するのに使用される。</td> - </tr> - <tr> - <th><code>popupshown</code></th> - <td><code>menupopup</code> 、<code>panel</code> 、<code>tooltip</code> において、それらが表示されるとすぐに発生する。</td> - </tr> - <tr> - <th><code>popuphiding</code></th> - <td><code>menupopup</code> 、<code>panel</code> 、 <code>tooltip</code> において、それらが隠されようとするとすぐに発生する。ユーザがメニューからアイテムを選択した場合にも、他の部分をクリックしてポップアップを閉じた場合にも発生する。</td> - </tr> - <tr> - <th><code>popuphidden</code></th> - <td><code>menupopup</code> 、<code>panel</code> 、 <code>tooltip</code> において、それらが隠されるとすぐに発生する。</td> - </tr> - </tbody> -</table> -<h3 id="The_popupshowing_event" name="The_popupshowing_event"><code>popupshowing</code> イベント</h3> -<p>ポップアップが表示される直前には、そのポップアップで <code>popupshowing</code> イベントが発生します。このイベントは、ポップアップが開かれる方法に関係なく、ユーザの操作によって開かれた場合にも、スクリプトから <span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドや <span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span> メソッドを呼び出した場合にも発生します。<code>popupshowing</code> イベントのリスナーは、一般にコンテキストに基づいてポップアップの内容を調整するのに使用されます。たとえば画像上で右クリックしたら画像に関係するアイテムをコンテキストメニューに表示し、リンク上で右クリックしたらリンクに関係するアイテムを表示するといったことができます。<code>popupshowing</code> イベントリスナーでは、メニューが表示される前に、必要に応じてメニューの追加や変更を行うことができます。<code>popupshowing</code> イベントのコンテキストメニューに対する使用例は<a href="/ja/docs/XUL/PopupGuide/ContextMenus#Hiding_and_Showing_Menu_Items_based_on_Context">コンテキストによるメニューアイテムの表示非表示</a>を参照してください。</p> -<p>また、この方法はどんな種類のポップアップにも使用できます。この例では、パネル内部のラベルが現在の時間に基づいて初期化されます。</p> -<pre class="brush:xml"><panel id="time-panel" onpopupshowing="this.lastChild.value = (new Date()).toLocaleFormat('%T')"> - <label value="Time:" /> - <label id="time" /> -</panel> - -<toolbarbutton label="Show Time" popup="time-panel" /> -</pre> -<p><img src="/@api/deki/files/305/=Popupguide-popupshowing.png"></p> -<p><code>popupshowing</code> リスナー内から <a href="/ja/docs/Web/API/Event/preventDefault" title="なし"><code>preventDefault</code></a> メソッドを呼び出すことにより、メニューやポップアップの表示を抑止することができます。<code>popupshowing</code> イベントのデフォルトの動作は、ポップアップの表示を継続させることです。preventDefault メソッドはこの動作の発生を抑止するため、ポップアップは開かれなくなります。</p> -<pre class="brush:xml"><menu label="Edit"> - <menupopup onpopupshowing="if (gDisallowed) event.preventDefault();"> - <menuitem label="Undo" /> - <menuitem label="Redo" /> - </menupopup> -</menu> -</pre> -<p>この例では、グローバル変数 <code>gDisallowed</code> をチェックしたあと、 <a href="/ja/docs/Web/API/Event/preventDefault" title="なし"><code>preventDefault</code></a> メソッドを呼び出しています。If you want to prevent a context menu from opening it is better to call <code>preventDefault</code> with a handler for the contextmenu event instead, to avoid the extra steps necessary to fire the <code>popupshowing</code> event if it isn't needed.</p> -<p>入れ子のサブメニューを使う時には、<code>popupshowing</code> イベントの中で、そのイベントが適切なポップアップに対応するものかどうか必ず確認するようにしてください。なぜなら、ポップアップイベントは浮上 (<span style="color: green;">bubble</span>)するので、親メニューはそれ自体が開いた時にも、サブメニューが開いた時にも <code>popupshowing</code> イベントを受け取るからです。例を示します。</p> -<pre class="brush:xml"><menu label="File"> - <menupopup onpopupshowing="if (event.target == this) adjustFileMenu(this);"> - <menu label="Open"> - <menupopup> - <menuitem label="File..." /> - <menuitem label="Page" /> - </menupopup> - </menu> - </menupopup> -</menu> -</pre> -<p>イベントのターゲットを調べて、イベントが目的の menupopup に対応するものかを調べています。このようにしなければ、関数 adjustFileMenu は外側の menupopup が開かれた時にも、内側の menupopup が開かれた時にも呼び出されてしまいます。イベントの浮上はすべてのポップアップイベントで発生します。</p> -<h3 id="The_popupshown_event" name="The_popupshown_event"><code>popupshown</code> イベント</h3> -<p><code>popupshown</code> イベントは、ポップアップが表示されるとすぐに発生します。<span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドや <span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span> メソッドを呼び出した場合、ポップアップはそれらのメソッドが返るまで開かれません。したがって、<code>popupshown</code> イベントはスクリプトが終了し、UI が更新されるとすぐに発生します。<code>popupshown</code> イベントはこれがいつ起こるかを知るのに役立ちます。</p> -<p><code>popupshown</code> イベントの利用法の 1 つとして、他のメニューを開くために使用する方法があります。この方法は、次の例のように、プログラムからサブメニューを開かなければならないときに必要になります。なぜなら、親メニューを開かずにサブメニューを直接開くことはできないからです。</p> -<pre class="brush:xml"><script> -function openFileMenu() { - var filemenu = document.getElementById("file-menu"); - - filemenu.addEventListener("popupshown", fileMenuOpened, false); - filemenu.open = true; -} - -function fileMenuOpened(event) { - if ( event.target != document.getElementById("file-menupopup") ) { - return; - } - - var filemenu = document.getElementById("file-menu"); - filemenu.removeEventListener("popupshown", fileMenuOpened, false); - - var openmenu = document.getElementById("open-menu"); - openmenu.open = true; -} -</script> - - -<menu id="file-menu" label="File"> - <menupopup id="file-menupopup"> - <menu id="open-menu" label="Open"> - <menupopup> - <menuitem label="File..." /> - <menuitem label="Page" /> - </menupopup> - </menu> - </menupopup> -</menu> - -<button label="Open" oncommand="openFileMenu();" /> -</pre> -<p>ボタンを押すと、関数 <code>openFileMenu</code> が呼ばれます。この関数は、 <a href="/ja/docs/Web/API/Element/addEventListener" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>addEventListener</code></a> メソッドを使って "File" メニューに <code>popupshown</code> イベントリスナーを取り付けます。これにより、"File" メニューで <code>popupshown</code> イベントが発生すると、関数 <code>fileMenuOpened</code> が呼ばれるようになります。</p> -<p>関数 <code>fileMenuOpened</code> は、まずイベントのターゲットが適切なポップアップかどうかを調べ、そうでなければすぐに返ります。次に、<code>popupshown</code> イベントリスナーをふたたび削除します。イベントリスナーが重複して追加されないようにするため、必ずこれを実行しなければなりません。最後に、関数 <code>openFileMenu</code> と同じ方法を使って "Open" サブメニューを開きます。このようにすると、外側のメニューと内側のメニューの両方を開くボタンが完成します。</p> -<h3 id="The_popuphiding_event" name="The_popuphiding_event"><code>popuphiding</code> イベント</h3> -<p>ポップアップが閉じると、画面から消える直前に、そのポップアップで <code>popuphiding</code> イベントが発生します。<code>popuphiding</code> イベントに対するリスナーを利用すると、<code>popupshowing</code> イベントとは逆に、ポップアップ上のアイテムをふたたび削除したり隠したりできます。<code>popuphiding</code> イベントは、ポップアップが隠された方法に関わらず、ユーザがメニューからアイテムを選択した場合でも、ポップアップの外側をクリックした場合でも、<kbd>Escape</kbd> キーを押してメニューをキャンセルした場合でも発生します。また、<code>popupshowing</code> イベントと <code>popuphiding</code> イベントは、ユーザがメニューバー上でマウスを動かして、メニューやサブメニューを表示させたり隠したりした場合にも発生します。</p> -<p>この例では、ポップアップが隠れるたびに <code>textbox</code> の内容が消去されます。</p> -<pre class="brush:xml"><panel onpopuphiding="document.getElementById('search').value = '';"> - <textbox id="search" /> - <button label="Search" oncommand="doSearch();" /> -</panel> -</pre> -<p>イベントの <a href="/ja/docs/Web/API/Event/preventDefault" title="なし"><code>preventDefault</code></a> メソッドを呼び出すと、ポップアップが非表示になるのを抑止することができます。そうすると、ポップアップは閉じられなくなります。通常は、これはするべきではありません。たとえば、確実に値が入力されるようにしたければ、値が入力されていなくてもコードがそれを処理できるように UI を作り直した方がはるかに良いでしょう。そうしないと、ユーザはポップアップが閉じられないことに混乱してしまいます。</p> -<p>ユーザがメニューの中から何かを選択した場合には、 <code>menupopup</code> が閉じるのをキャンセルすることはできません。キャンセルするにはすでに遅すぎるからです。この場合、選択された menuitem にすでに <code>command</code> イベントが送られており、その操作はすでに実行されています。これは、ポップアップが取り除かれた後に <code>popuphiding</code> イベントが発生する特殊なケースの 1 つです。こうなっている理由は、非常によくあるケースである、メニューアイテムの動作がモーダルダイアログを開くものである場合のためです。この場合、ダイアログが開かれる前に、まずメニューを取り除く必要があります。そうしないと、すでにアクティブではない親ウィンドウにメニューが残されたままにされてしまいます。そのため、ポップアップがまず取り除かれるのです。すなわち、<code>popuphiding</code> イベントはモーダルダイアログが閉じられるまで発生しないということに注意してください。</p> -<p>メニューが閉じられても <code>popuphiding</code> イベントが発生しない場合があります。そのため、<code>popuphiding</code> イベントリスナでは必要なコードを呼び出さないようにするべきです。メニューやポップアップを再初期化する場合には、<code>popupshowing</code> イベントで行う方が良いでしょう。<code>popuphiding</code> イベントが送られないケースの 1 つは、メニューがドキュメントから削除された場合です。これはイベントを送る対象となる要素がすでに存在しないからです。もう 1 つは、ドキュメントがアンロードされた場合です。</p> -<h3 id="The_popuphidden_event" name="The_popuphidden_event"><code>popuphidden</code> イベント</h3> -<p><code>popuphidden</code> イベントは、ポップアップが閉じられた後に発生します。</p> -<p>メニューが連鎖的に開かれている場合、すなわち、あるメニューと少なくとも 1 つの階層のサブメニューが開かれている場合、まず最も低い階層の<span style="color: darkgreen; background: #ef9;">【訳注: 最も深い】</span>サブメニューで <code>popuphiding</code> イベントが発生します。それからそのメニューが閉じ、<code>popuphidden</code> イベントが発生します。そして、次に高い階層のメニューで、すべてのメニューが閉じられるまでこの行程が繰り返されます。すなわち、サブメニューが長く連なって開かれている場合、<code>popuphiding</code> イベントと <code>popuphidden</code> イベントが順番に何度も発生するということになります。最上位のメニューが <code>popuphidden</code> イベントを受け取った時、すべてのメニューが閉じられたことを知ることができます。</p> diff --git a/files/ja/archive/mozilla/xul/popupguide/positioning/index.html b/files/ja/archive/mozilla/xul/popupguide/positioning/index.html deleted file mode 100644 index df27781b4c..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/positioning/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Positioning -slug: Archive/Mozilla/XUL/PopupGuide/Positioning -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide/Positioning ---- -<p> -<span id="Positioning_Popups"></span> -</p> -<h3 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E9.85.8D.E7.BD.AE" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E9.85.8D.E7.BD.AE">ポップアップの配置</h3> -<p>スクリーン上でポップアップの配置を制御するにはいくつか方法があります。 -</p><p><span id="Default_Positioning_of_Popups"></span> -</p> -<h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E9.85.8D.E7.BD.AE" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E9.85.8D.E7.BD.AE">ポップアップのデフォルト配置</h4> -<p>トップレベルのメニューポップアップは、デフォルトでは、関連付けられたメニューやボタンの下端がポップアップの上端に重なるように表示されます。水平方向には、メニューやボタンの左端がメニューポップアップの左端と一直線になります。 -</p><p>サブメニューは、デフォルトでは親メニューアイテムの右側に、メニューの上端と親メニューアイテムの上端が一直線になるように配置されます。ただし、テキストが右から左へと表示される (<span style="color: green;">right to left</span>)ロケールでは、サブメニューは左に表示されます。 -</p><p>トップレベルメニューとサブメニューのどちらの場合でも、下や右にメニューの全体の大きさを表示する十分なスペースが無ければ、上や左に表示されます。どちらの側にも十分なスペースが無ければ、メニューの大きさが縮小されます。 -</p><p><code id="a-popup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code> 属性や <code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> 属性によって取り付けられたポップアップでは、デフォルトでは、ポップアップの左上角 (右から左のロケールでは右上角) がマウスがクリックされた位置になるように表示されます。コンテキストメニューは、同じ場所をふたたびクリックするだけでメニューを消せるように、右下に数 pixel オフセットされて表示されます。コンテキストメニューがキーボードのみによって開かれた場合、ドキュメントの左上の隅にメニューが表示されます。 -</p><p>ツールチップは、必ず現在のマウス位置の近くに、少しだけ垂直方向にオフセットされて表示されます。 -</p><p><span id="The_position_attribute"></span> -</p> -<h4 id="position_.E5.B1.9E.E6.80.A7" name="position_.E5.B1.9E.E6.80.A7">position 属性</h4> -<p>すべての種類のポップアップは、2 通りの方法で表示位置を制御できます。1 つめは、ポップアップの <span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドを使う時に位置を指定する方法です。これはスクリプトによってポップアップを開く時に使用します。2 つめは、menupopup、panel、tooltip 要素にいくつかの属性を設置して位置を指定する方法です。以下で説明する 3 つの属性は、これら 3 種類の要素で同じように機能します。 -</p><p><code id="a-position"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code> 属性は、ポップアップが取り付けられた要素に対する位置あわせの方法を指定します。 -</p> -<ul><li>menu や button、toolbarbutton 要素内に置かれた menupopup では、<code>position</code> 属性はそれら親要素に対してどのようにアンカーされるかを制御します。 -</li><li><code id="a-popup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code> 属性によって取り付けられた menupopup では、<code>position</code> 属性は <code>popup</code> 属性を持つ要素に対してどのようにアンカーされるかを制御します。 -</li><li>コンテキストメニュー、すなわち <code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> 属性によって取り付けられ、マウスをコンテキストクリックすることで開かれたメニューでは、<code>position</code> 属性は無視されます。同じ場所をふたたびクリックするだけで閉じられるように、メニューは数 pixel オフセットされて表示されます。 -</li><li>ツールチップでは、<code>position</code> 属性は <code id="a-tooltip"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code> 属性を持つ要素に対してどのようにアンカーされるかを制御します。ツールチップでは通常 <code>position</code> 属性を使う必要はないでしょう。デフォルトの位置であるマウスポインタの近くに表示させるだけでいいはずです。 -</li></ul> -<p>たとえば、 -</p> -<pre><menupopup id="editItems" position="end_before"> - <menuitem label="Cut"/> - <menuitem label="Copy"/> - <menuitem label="Paste"/> -</menupopup> - -<label value="Clipboard" popup="editItems"/> -</pre> -<p>この例では、menupopup が <code id="a-popup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code> 属性によって取り付けられており、ラベルを左クリックするとポップアップが表示されます。position 属性は 「end_before」 の位置にポップアップを表示するように指定されており、これによりポップアップはラベルの右側に、上端をそろえて表示されます。position 属性が取り得る値にはいくつか種類があるので、それぞれのケースでどのようにポップアップの位置あわせが行われるかを示す画像と共にここで説明します。 -</p><p>以下は左から右の (<span style="color: green;">left to right</span>)ユーザーインターフェイスであることを想定しています。右から左の (<span style="color: green;">right to left</span>)ユーザーインターフェイスでも同じ値を使用できますが、ポップアップの表示位置や位置あわせは逆側になります。 </p> -<table> -<tbody><tr> -<td><b><code>before_start</code></b> -<p>ポップアップの左辺とアンカーの左辺が一直線になり、ポップアップの底辺がアンカーの上端に接する。 -</p> -</td><td><img alt="Image:Popupguide-position-beforestart.png"> -</td></tr> -<tr> -<td><b><code>before_end</code></b> -<p>ポップアップの右辺とアンカーの右辺が一直線になり、ポップアップの底辺がアンカーの上端に接する。 -</p> -</td><td><img alt="Image:Popupguide-position-beforeend.png"> -</td></tr> -<tr> -<td><b><code>after_start</code></b> -<p>ポップアップの左辺とアンカーの左辺が一直線になり、ポップアップの上端がアンカーの底辺に接する。この値はメニューボタンで一般的に使われる。 -</p> -</td><td><img alt="Image:Popupguide-position-afterstart.png"> -</td></tr> -<tr> -<td><b><code>after_end</code></b> -<p>ポップアップの右辺とアンカーの右辺が一直線になり、ポップアップの上端がアンカーの底辺に接する。 -</p> -</td><td><img alt="Image:Popupguide-position-afterend.png"> -</td></tr> -<tr> -<td><b><code>start_before</code></b> -<p>ポップアップの上端とアンカーの上端が一直線になり、ポップアップの右辺がアンカーの左辺に接する。 -</p> -</td><td><img alt="Image:Popupguide-position-startbefore.png"> -</td></tr> -<tr> -<td><b><code>start_after</code></b> -<p>ポップアップの底辺とアンカーの底辺が一直線になり、ポップアップの右辺がアンカーの左辺に接する。 -</p> -</td><td><img alt="Image:Popupguide-position-startafter.png"> -</td></tr> -<tr> -<td><b><code>end_before</code></b> -<p>ポップアップの上端とアンカーの上端が一直線になり、ポップアップの左辺がアンカーの右辺に接する。この値はサブメニューで使用される。 -</p> -</td><td><img alt="Image:Popupguide-position-endbefore.png"> -</td></tr> -<tr> -<td><b><code>end_after</code></b> -<p>ポップアップの底辺とアンカーの底辺が一直線になり、ポップアップの左辺がアンカーの右辺に接する。 -</p> -</td><td><img alt="Image:Popupguide-position-endafter.png"> -</td></tr> -<tr> -<td><b><code>overlap</code></b> -<p>ポップアップの左上角がアンカーの左上角と合わさるように表示される。 -</p> -</td><td> -</td></tr> -<tr> -<td><b><code>after_pointer</code></b> -<p>マウスポインタの位置から何 pixel か垂直方向にオフセットされてポップアップが表示される。 -</p> -</td><td> -</td></tr> -</tbody></table> -<p>menupopup に position 属性が無ければ、ポップアップはデフォルトの位置、この場合はマウスポインタの位置に表示されます。 -</p><p>スクリプトから <span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドによってポップアップを開く時には、position 属性の代わりに 第 2 引数で位置を指定できます。たとえば、次のようなコードで上の例のポップアップを開くことができます。 -</p> -<pre>menupopup.openPopup(label, "end_before", 0, 0, false, false); -</pre> -<p>上の例と同じく、位置の指定が 「end_before」 となっていることに注目してください。両方に値が指定された場合、openPopup に与えられた値の方が属性よりも優先されます。ただし、openPopup の引数 attributesOverride (最後の引数、上の例では false) が true だと、openPopup に与えられた値よりも属性の方が優先されます。これにより、スクリプトと XUL コードはポップアップの開き方に関してさまざまな方法で協調することができます。 -</p><p><span id="Positioning_using_Coordinates"></span> -</p> -<h4 id=".E5.BA.A7.E6.A8.99.E3.81.AB.E3.82.88.E3.82.8B.E9.85.8D.E7.BD.AE" name=".E5.BA.A7.E6.A8.99.E3.81.AB.E3.82.88.E3.82.8B.E9.85.8D.E7.BD.AE">座標による配置</h4> -<p>openPopup の引数 x と y によって、ポップアップの位置をさらに変更することができます。ポップアップはアンカーによって位置が決定された後、引数 x と y によって特定の距離だけオフセットされます。この例は <a href="ja/XUL/PopupGuide/OpenClose#The_openPopup_method">openPopup メソッド</a> の節にあります。 -</p><p>スタイルシートや <code id="a-style"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code> 属性によって menupopup や panel、tooltip に margin が指定されていると、その margin はポップアップの外側に対して適用されます。次の例では menupopup の上部に 2 ex の margin があり、そのためポップアップが開かれる時にはボタンの底辺から 2 ex 離れて表示されます。 </p> -<pre><button label="Popup" type="menu"> - <menupopup style="margin-top: 2ex;"> - <menuitem label="Cat"/> - <menuitem label="Dog"/> - </menupopup> -</button> -</pre> -<p>この手法はツールチップに対して内部的に使用されています。Firefox ブラウザを見てみると、ツールチップはマウスポインタの位置ではなく、少し下に表示されるのがわかります。これはデフォルトのテーマでツールチップの上部に 21 pixel の margin が設定されており、その分だけ下に表示されるようになっているためです。説明対象の要素をツールチップが覆い隠さないようにするためにこの方法が使われています。 -</p><p><span id="Screen_Positioning"></span> -</p> -<h4 id=".E7.94.BB.E9.9D.A2.E4.B8.8A.E3.81.AE.E9.85.8D.E7.BD.AE" name=".E7.94.BB.E9.9D.A2.E4.B8.8A.E3.81.AE.E9.85.8D.E7.BD.AE">画面上の配置</h4> -<p>スクリプトから画面上の特定の位置にポップアップを開くには、<span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span> メソッドを使います。この詳細は <a href="ja/XUL/PopupGuide/OpenClose#The_openPopupAtScreen_method">openPopupAtScreen メソッド</a> の節にあります。 -</p><p>すべてのポップアップにおいて、<code id="a-left"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code> 属性 <code id="a-top"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code> 属性によってポップアップの画面上の表示位置を pixel 座標で指定することができます。これらの属性が使われると、ポップアップはその属性が指定した位置に表示されます。position 属性と同様に、最後の引数が true でなければ <span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span> メソッドの引数が優先されます。 -</p><p>例を示します。 -</p> -<pre><panel left="100" top="200"> - <button label="Test"/> -</panel> -</pre> -<p><code id="a-left"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code> 属性と <code id="a-top"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code> 属性は、自動で閉じないパネルを使用するときにもっとも便利です。これらの属性を使うと、ポップアップが移動された時に left の位置と top の位置が記録されるようになり、また persist 属性を使うとそれらの属性をセッションをまたいで保存することができます。このようにすると、パネルは常に前回と同じ画面上の位置に開かれるようになります。 -</p> -<div class="noinclude"> -</div> diff --git a/files/ja/archive/mozilla/xul/popupguide/tooltips/index.html b/files/ja/archive/mozilla/xul/popupguide/tooltips/index.html deleted file mode 100644 index 8507ba18e1..0000000000 --- a/files/ja/archive/mozilla/xul/popupguide/tooltips/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Tooltips -slug: Archive/Mozilla/XUL/PopupGuide/Tooltips -tags: - - XUL - - XUL Popup Guide -translation_of: Archive/Mozilla/XUL/PopupGuide/Tooltips ---- -<p> -<span id="Tooltips"></span> -</p> -<h3 id=".E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97" name=".E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97">ツールチップ</h3> -<p>ツールチップは、マウスの下にあるコントロールについて説明するヘルプをユーザに提供するために使用されます。例えば、ツールバーボタンの上にマウスを動かして少し待つと、そのボタンの機能について説明するテキストが格納された小さなポップアップが表示されます。マウスを再び動かすと、ツールチップは消えます。ツールチップは、メインインターフェイスを複雑なものにすることなくユーザインターフェイスについての追加説明を提供する手段として便利です。 -</p><p>ツールチップはマウスを使わないと表示させることができないので、他の方法で見ることのできない重要な情報は決して含まないように注意してください。 -</p><p><span id="The_tooltiptext_attribute"></span> -</p> -<h4 id="tooltip_.E5.B1.9E.E6.80.A7" name="tooltip_.E5.B1.9E.E6.80.A7">tooltip 属性</h4> -<p>ほとんどの場合、ツールチップは 1 つのラベルのみを表示します。これは全ての XUL 要素に適用できる <code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性を使って可能になります。この属性の値にはツールチップに表示するテキストを設定します。 -</p> -<pre><toolbarbutton label="Back" tooltiptext="Go back one page"/> -</pre> -<p>この例では、ツールバー上の「戻る」ボタンにツールチップに表示するためのテキストを追加しています。これはツールバーがラベルを表示しないように設定されている場合にも便利でしょう。 -</p><p>もしある要素が <code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性を持っておらず、その親要素が持っている場合、親のツールチップが適用されます。例えば次の例では、ツールバーにツールチップが設定されています。 -</p> -<pre><toolbar tooltiptext="File Buttons"> - <toolbarbutton label="Open" tooltiptext="Open a File"/> - <toolbarbutton label="Close"/> -</toolbar> -</pre> -<p>「Open」ボタンには <code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性があるので、独自のツールチップを持っています。しかし、「Close」ボタンにはツールチップが付加されていませんが、親のツールバーには付加されています。このため、「Close」ボタンのうえにマウスが移動すると、ツールバーの空の部分と同じように、ツールバーのツールチップが適用されます。 -</p><p>この例の「File Buttons」というツールチップテキストはあまり良いツールチップではありません。これはユーザに対して何も付加的な情報を伝えていないので、この例のような使い方はするべきではありません。 -</p><p><span id="The_tooltip_element"></span> -</p> -<h4 id="tooltip_.E8.A6.81.E7.B4.A0" name="tooltip_.E8.A6.81.E7.B4.A0">tooltip 要素</h4> -<p>ツールチップは tooltip 要素を使って表示させる事もできます。これはポップアップの一種ですが、違った見た目を持っています。<code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性を使った要素は、内部のテキストに合った大きさの小さな黄色いボックスのような見た目を一般的に持つ、デフォルトの tooltip 要素の中にツールチップを表示します。このデフォルトのツールチップは自動的に作成されるので、普通は <code><a href="/ja/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code> 要素を使う必要はありません。 -</p><p>しかし、普通とは違った見た目を持っていたり、1 つのテキストラベルに加えて他の要素をサポートするツールチップを使う事も可能です。 -</p><p>このツールチップは tooltip 要素を使って作成できます。tooltip 要素は、その内容をツールチップの中に表示します。 -</p> -<pre><tooltip id="iconic"> - <image src="help.png"/> - <label value="Save a file to a remote site"/> -</tooltip> - -<button label="Save" tooltip="iconic"/> -</pre> -<p>この例では、「iconic」という id のツールチップに画像とラベルが格納されています。<code id="a-tooltip"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code> 属性によってボタンがそのツールチップに関連付けられています。tooltip 属性の値は tooltip 要素の id に設定しなければならず、この場合は「<code>iconic</code>」に設定しています。これによりこのツールチップが button 要素のツールチップとして表示されます。 -</p><p>このように、要素にツールチップを設定するには、ラベルを表示するための <code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性を使う方法と、より複雑な内容を表示するための tooltip 属性を使うという 2 つの方法があります。ある要素が両方の属性を使っていた場合には、 tooltiptext 属性の方が使用され、デフォルトのツールチップが表示されます。 -</p><p>もし tooltip 要素の中に何も要素が置かれなければ、tooltip 要素は標準のツールチップと同様にふるまい、表示されます。 -</p><p>特殊なツールチップである tooltip 要素を使う場合には、その中のラベルはツールチップが適用される要素に基づいて変更されません。そのため、いくつかの要素に同じツールチップを使いたい場合には、ツールチップの内容をそれに応じて設定しなければなりません。popupshowing イベントリスナを使えば、必要に応じてツールチップを調節する事ができます。popupshowing イベントはツールチップが現れる直前に tooltip 要素で発生します。例えば、 -</p> -<pre><tooltip id="iconic" onpopupshowing="this.lastChild.value = document.tooltipNode.label;"/> -</pre> -<p>document の <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/tooltipNode">tooltipNode</a></span></code> プロパティは現在マウスが上に乗っている要素を保持します。この例では、マウスが上に乗っている要素の label を取得するためにこのプロパティが調べられています。そしてその label が tooltip の最後の子要素の value として設定されています。前の例では、tooltip の最後の子要素は label でした。こうすると、tooltip 内の label 要素の value が、マウスが上に移動した要素に基づいて変更されるようになります。 -</p><p><span id="Tooltips_in_Trees"></span> -</p> -<h4 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97">ツリーにおけるツールチップ</h4> -<p>ツリーは全体が単一の要素によって表示されるので、<code id="a-tooltip"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code> 属性と <code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code> 属性はツリーの個々の行 (<span style="color: green;">row</span>)やセル (<span style="color: green;">cell</span>)には適用されません。しかし、ツリーは値が切り詰められたセルに対して自動的にツールチップを表示します。例えば、セルが長いラベルを持っており、そのラベルの長さよりも列 (<span style="color: green;">column</span>)が短ければ、そのセルの上にマウスが移動した時に、ユーザが全体の値を見られるようにツールチップが表示されます。 -</p> -<div class="noinclude"> -</div> |