Positioning

ポップアップの配置

スクリーン上でポップアップの配置を制御するにはいくつか方法があります。

ポップアップのデフォルト配置

トップレベルのメニューポップアップは、デフォルトでは、関連付けられたメニューやボタンの下端がポップアップの上端に重なるように表示されます。水平方向には、メニューやボタンの左端がメニューポップアップの左端と一直線になります。

サブメニューは、デフォルトでは親メニューアイテムの右側に、メニューの上端と親メニューアイテムの上端が一直線になるように配置されます。ただし、テキストが右から左へと表示される (right to left)ロケールでは、サブメニューは左に表示されます。

トップレベルメニューとサブメニューのどちらの場合でも、下や右にメニューの全体の大きさを表示する十分なスペースが無ければ、上や左に表示されます。どちらの側にも十分なスペースが無ければ、メニューの大きさが縮小されます。

popup 属性や context 属性によって取り付けられたポップアップでは、デフォルトでは、ポップアップの左上角 (右から左のロケールでは右上角) がマウスがクリックされた位置になるように表示されます。コンテキストメニューは、同じ場所をふたたびクリックするだけでメニューを消せるように、右下に数 pixel オフセットされて表示されます。コンテキストメニューがキーボードのみによって開かれた場合、ドキュメントの左上の隅にメニューが表示されます。

ツールチップは、必ず現在のマウス位置の近くに、少しだけ垂直方向にオフセットされて表示されます。

position 属性

すべての種類のポップアップは、2 通りの方法で表示位置を制御できます。1 つめは、ポップアップの openPopup メソッドを使う時に位置を指定する方法です。これはスクリプトによってポップアップを開く時に使用します。2 つめは、menupopup、panel、tooltip 要素にいくつかの属性を設置して位置を指定する方法です。以下で説明する 3 つの属性は、これら 3 種類の要素で同じように機能します。

position 属性は、ポップアップが取り付けられた要素に対する位置あわせの方法を指定します。

menu や button、toolbarbutton 要素内に置かれた menupopup では、position 属性はそれら親要素に対してどのようにアンカーされるかを制御します。
popup 属性によって取り付けられた menupopup では、position 属性は popup 属性を持つ要素に対してどのようにアンカーされるかを制御します。
コンテキストメニュー、すなわち context 属性によって取り付けられ、マウスをコンテキストクリックすることで開かれたメニューでは、position 属性は無視されます。同じ場所をふたたびクリックするだけで閉じられるように、メニューは数 pixel オフセットされて表示されます。
ツールチップでは、position 属性は tooltip 属性を持つ要素に対してどのようにアンカーされるかを制御します。ツールチップでは通常 position 属性を使う必要はないでしょう。デフォルトの位置であるマウスポインタの近くに表示させるだけでいいはずです。

たとえば、

<menupopup id="editItems" position="end_before">
  <menuitem label="Cut"/>
  <menuitem label="Copy"/>
  <menuitem label="Paste"/>
</menupopup>

<label value="Clipboard" popup="editItems"/>

この例では、menupopup が popup 属性によって取り付けられており、ラベルを左クリックするとポップアップが表示されます。position 属性は「end_before」の位置にポップアップを表示するように指定されており、これによりポップアップはラベルの右側に、上端をそろえて表示されます。position 属性が取り得る値にはいくつか種類があるので、それぞれのケースでどのようにポップアップの位置あわせが行われるかを示す画像と共にここで説明します。

以下は左から右の (left to right)ユーザーインターフェイスであることを想定しています。右から左の (right to left)ユーザーインターフェイスでも同じ値を使用できますが、ポップアップの表示位置や位置あわせは逆側になります。

`before_start` ポップアップの左辺とアンカーの左辺が一直線になり、ポップアップの底辺がアンカーの上端に接する。
`before_end` ポップアップの右辺とアンカーの右辺が一直線になり、ポップアップの底辺がアンカーの上端に接する。
`after_start` ポップアップの左辺とアンカーの左辺が一直線になり、ポップアップの上端がアンカーの底辺に接する。この値はメニューボタンで一般的に使われる。
`after_end` ポップアップの右辺とアンカーの右辺が一直線になり、ポップアップの上端がアンカーの底辺に接する。
`start_before` ポップアップの上端とアンカーの上端が一直線になり、ポップアップの右辺がアンカーの左辺に接する。
`start_after` ポップアップの底辺とアンカーの底辺が一直線になり、ポップアップの右辺がアンカーの左辺に接する。
`end_before` ポップアップの上端とアンカーの上端が一直線になり、ポップアップの左辺がアンカーの右辺に接する。この値はサブメニューで使用される。
`end_after` ポップアップの底辺とアンカーの底辺が一直線になり、ポップアップの左辺がアンカーの右辺に接する。
`overlap` ポップアップの左上角がアンカーの左上角と合わさるように表示される。
`after_pointer` マウスポインタの位置から何 pixel か垂直方向にオフセットされてポップアップが表示される。

menupopup に position 属性が無ければ、ポップアップはデフォルトの位置、この場合はマウスポインタの位置に表示されます。

スクリプトから openPopup メソッドによってポップアップを開く時には、position 属性の代わりに第 2 引数で位置を指定できます。たとえば、次のようなコードで上の例のポップアップを開くことができます。

menupopup.openPopup(label, "end_before", 0, 0, false, false);

上の例と同じく、位置の指定が「end_before」となっていることに注目してください。両方に値が指定された場合、openPopup に与えられた値の方が属性よりも優先されます。ただし、openPopup の引数 attributesOverride (最後の引数、上の例では false) が true だと、openPopup に与えられた値よりも属性の方が優先されます。これにより、スクリプトと XUL コードはポップアップの開き方に関してさまざまな方法で協調することができます。

座標による配置

openPopup の引数 x と y によって、ポップアップの位置をさらに変更することができます。ポップアップはアンカーによって位置が決定された後、引数 x と y によって特定の距離だけオフセットされます。この例は openPopup メソッドの節にあります。

スタイルシートや style 属性によって menupopup や panel、tooltip に margin が指定されていると、その margin はポップアップの外側に対して適用されます。次の例では menupopup の上部に 2 ex の margin があり、そのためポップアップが開かれる時にはボタンの底辺から 2 ex 離れて表示されます。

<button label="Popup" type="menu">
  <menupopup style="margin-top: 2ex;">
    <menuitem label="Cat"/>
    <menuitem label="Dog"/>
  </menupopup>
</button>

この手法はツールチップに対して内部的に使用されています。Firefox ブラウザを見てみると、ツールチップはマウスポインタの位置ではなく、少し下に表示されるのがわかります。これはデフォルトのテーマでツールチップの上部に 21 pixel の margin が設定されており、その分だけ下に表示されるようになっているためです。説明対象の要素をツールチップが覆い隠さないようにするためにこの方法が使われています。

画面上の配置

スクリプトから画面上の特定の位置にポップアップを開くには、openPopupAtScreen メソッドを使います。この詳細は openPopupAtScreen メソッドの節にあります。

すべてのポップアップにおいて、left 属性 top 属性によってポップアップの画面上の表示位置を pixel 座標で指定することができます。これらの属性が使われると、ポップアップはその属性が指定した位置に表示されます。position 属性と同様に、最後の引数が true でなければ openPopup メソッドの引数が優先されます。

例を示します。

<panel left="100" top="200">
  <button label="Test"/>
</panel>

left 属性と top 属性は、自動で閉じないパネルを使用するときにもっとも便利です。これらの属性を使うと、ポップアップが移動された時に left の位置と top の位置が記録されるようになり、また persist 属性を使うとそれらの属性をセッションをまたいで保存することができます。このようにすると、パネルは常に前回と同じ画面上の位置に開かれるようになります。