オーバーラップするカードセットなどの要素を表示する必要があるかもしれません。スタック要素とデック要素 (stack and deck elements) がこのために使用できます。
個々の XUL ボックスは、他の要素すべてを含むことのできるコンテナです。ツールバーやタブ付きパネルなど、多くの特殊用途化されたボックス要素があります。box タグは、特殊なプロパティーをもたない非常に単純なボックスを作ります。しかし、特殊用途化されたボックスは、その内部に要素を配置するという意味で、通常のボックスと同じように働きますが、追加機能をもっています。
実際、多くのコンポーネントは、他の要素を含むことができます。スクロールバーが、デフォルト以外にも、他の要素を含むことができるということは、既に見た通りです。スクロールバーは、開発者が要素を提供しなければ、それ自身の要素を作る特殊な種類のボックスにすぎません。それは、また、スクロールバーのサムネイルの移動を処理します。
次からの幾つかのセクションでは、他の要素を保持するために設計された要素を幾つか紹介することにします。それらは特殊な種類のボックスで、ボックスの属性すべてを使うことができます。
stack 要素は、単純なボックスです。それは、他のボックスと同様に働きますが、その子供すべてを互いの上にレイアウトできる特殊なプロパティーをもちます。スタックの最初の子供が一番下に描かれ、2 番目の子供がその上に描かれます。そして、3 番目の子供と続きます。要素は幾つでも、スタックに保存することができます。
スタックでは、子供は並んでレイアウトされるのではなく、お互いの上にレイアウトされるので、orient プロパティーには、ほとんど意味はありません。スタックのサイズは、その最も大きな子供によって決められます。しかし、スタックとその子供に、CSS プロパティーの width、height、min-width 及びその他の関連するプロパティーを使うことができます。
スタック要素は、既にある要素の上にステータスインジケーターを追加する必要があるといったケースに使うことができます。Mozilla プログレスバーは、スタックを使って作られた 2 つの要素、バーとラベルからなります。
しかし、stack 要素の便利な用法に、それを使って CSS プロパティーの多くをエミュレートできるというのがあります。例えば、以下のようにして、text-shadow 要素に似た効果を作ることができます。
例 4.3.1
<stack> <description value="Shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/> <description value="Shadowed" style="color: red; font-size: 15pt;"/> </stack> |
両方の description 要素は、15 ポイントのサイズのテキストを作ります。しかし、最初の要素は、その左上の方向にパディングを加えることにより、右下に 1 ピクセルずらされています。この結果、同じ 'Shadowed' というテキストが描画されますが、互いにわずかにずれたものになっています。2 番目の description 要素は、赤で描画されているため、効果がよく分かります。
この方法には、text-shadow を使う以上の利点があります。メインテキストとはまったく別にシャドーをスタイルできるからです。それは、自分のフォント、下線、サイズをもつことができます (シャドーをブリンクさせることもできます)。Mozilla は、現在、CSS のテキストのシャドー付けをサポートしていないので、これは役立ちます。欠点は、シャドーによって取られたエリアがスタックサイズを大きくしてしまうことです。シャドー付けは、ボタンを作り、それに無効の外見を与える場合に、非常に役立ちます。
例 4.3.2
<stack style="background-color: #C0C0C0"> <description value="Disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/> <description value="Disabled" style="color: grey;"/> </stack> |
テキストとシャドーカラーのこのアレンジは、プラットフォームによって、無効の外見を作り出します。
マウスクリックやキー押し下げといったイベントは、スタックの一番上にある要素、つまり、スタックに最後に入れられた要素に渡されるということに注意して下さい。これは、ボタンがスタックに最後に入れられた要素である場合にのみ、正しく動作するということです。
deck 要素も、その子供を、stack 要素に非常によく似たやり方で、互いの上にレイアウトしますが、デックは、一度に子供の一つしか表示しません。これは、ウィザードインターフェースにとって役立つでしょう。そこでは、一連の類似したパネルが順番に表示されます。パネルの各々に別々のウィンドウやナビゲーションボタンを作る代わりに、ウィンドウを一つ作り、内容が変わる場所をデックに置くことができます。
スタックと同様に、deck 要素の直接の子供によって、デックのページが作られます。deck 要素に 3子供が 3 つあるとすると、デックは 3 つの子供をもつことになります。表示されるデックのページは、deck 要素の index 属性を設定することによって、変更することができます。インデックスは、どのページを表示するかを指定する数値です。ページの番号は、0 から始まります。そのため、デックの最初の子供はページ 0 で、2 番目の子供はページ 1 というようになります。
以下は、デックの例です。
例 4.3.3
<deck index="2">
<description value="This is the first page"/>
<button label="This is the second page"/>
<box>
<description value="This is the third page"/>
<button label="This is also the third page"/>
</box>
</deck>
|
ここには、ページが 3 つあります。デフォルトは、3 番目のページです。3 番目のページは、内部に 2 つの要素をもつボックスです。その内部のボックスと要素がページを作っています。デックは最大の子供と同じ大きさです。ここでは、3 番目のページとなるはずです。
スクリプトを使って index 属性を変更することにより、ページを切り替えることができます。これについては、イベントと DOM に関するセクションでもっと詳しく説明しています。
(進む) 次のセクションでは、子供要素を配置するのに使える掲示板 (bulletin board) を説明します。