XUL チュートリアル - 掲示板

このセクションでは、要素を絶対位置へ配置するのに使える掲示板を説明します。

掲示板 (Bulletin Board)

bulletinboard 要素は一種のボックスで、どんな数の子供でももつことができます。スタックやデックと同様に、どのように子供要素が配置されるのかという点で、通常のボックスと異なります。掲示板を使うと、子供要素を指定の座標に置くことができます。

例えば、掲示板の子供に 2 つのボタンがある場合、その一つを、左端から 20 ピクセル、上端から 50 ピクセルの位置に置き、2 番目のボタンを、左端から 100 ピクセル、上端から 5 ピクセルの位置に置くことができます。これは、子供は水平方向、垂直方向に置かれるのではないので、orient 属性が掲示板には不要だということです。

子供要素の位置は、要素に 2 つの属性を置くことによって指定されます。水平方向の位置には left を使い、垂直方向の位置には top を使います。bulletinboard の子供にこれらの属性を指定しない場合、両方のデフォルト値は 0 です。

<bulletinboard>
  <button label="Goblins" left="5" top="5"/>
  <button label="Trolls" left="60" top="20"/>
  <button label="Vampires" left="10" top="60"/>
</bulletinboard>

この bulletinboard には、3 つの要素があります。各々は、left と top 属性によって与えられた座標に位置しています。ここで、3 つある子供すべてはボタンです。しかし、要素が同じ型である必要はありません。ボックスや別の掲示板を含むどんな要素でも構いません。

bulletinboard のサイズは、子供要素の位置によって決まります。これは、常に、子供要素すべてが見えるサイズになります。そのため、left 属性を 400 に設定すると、掲示板は 400 ピクセルの幅になります。このサイズは、width や max-width などの様々なスタイルプロパティーによって上書きすることができます。

left と top 属性の値を調整するために、スクリプトを使うことができます。これによって、要素を動き回らせることができます。掲示板には、一つの要素の位置を変えても、他の要素の位置は影響を受けないという利点があります。通常のボックスで要素を動かそうとすると、他の要素の位置が変化する場合があります。

子供要素を重ね合わせるように置くこともできます。子供要素を描画する場合、要素は、bulletinboard 内に現われる順で表示されます。つまり、bulletinboard の最初の子供が後ろに表示され、次の子供がその上に表示されるという具合です。最後の要素が一番上に表示されます。要素を動き回らせるには、DOM 関数が使えます。

マウスイベントに応答するとき、一番上にある要素が、最初に、イベントを捉えます。これは、2 つのボタンが重なっている場合、上にあるボタンが、もう一方のボタンに重なっている場所でのマウスクリックを捉えるということです。

(進む) 次のセクションでは、タブボックスを説明します。これは、デックに似ていますが、それ自身のナビゲーションを提供しています。

例: 4.4.1