XUL チュートリアル - スクロールするメニュー (scrolling menu)

このセクションでは、スクロールするメニューと他の要素でそのメカニズムを使う方法を説明します。

大きなメニューを作る

たくさんのコマンドからなるメニューを作る場合、項目すべてが一度にスクリーンに収まり切らないなど、何が起きるか戸惑うかもしれません。Mozilla は、項目間をスクロールできるスクロールメカニズムを提供します。

利用できるスペースが小さすぎる場合、矢印がメニューの両端に現われます。矢印上にマウスを移動させると、メニューは上下にスクロールします。一方、利用できるスペースが十分にある場合は、矢印は現われません。スクロールの正確な振る舞いは、現在のスキンに依存する点に注意して下さい。

この振る舞いは自動的です。スクロールするメニューを取得するために、しなければならないことは何もありません。これは、メニューバー上のメニュー、ポップアップやメニューリスト中のメニューに適用されます。これは、arrowscrollbox 要素を使って実装されています。この要素は、矢印をもつスクロールボックスを作るのに使えます。

arrowscrollbox は、通常のボックスが使える場所ならどこでも使えます。メニュー内だけということはありません。それは、常に、垂直方向のボックスで、内部にどんな要素でも入れることができます。ドロップダウンさせたくないリストを実装するのにも使うことができるでしょう。

以下の例は、ボタンからなるスクロールするリストの作り方を示しています。

<arrowscrollbox>
  <button label="Red"/>
  <button label="Blue"/>
  <button label="Green"/>
  <button label="Yellow"/>
  <button label="Orange"/>
  <button label="Silver"/>
  <button label="Lavender"/>
  <button label="Gold"/>
  <button label="Turquoise"/>
  <button label="Peach"/>
  <button label="Maroon"/>
  <button label="Black"/>
</arrowscrollbox>

この例を試す場合、まず、ウィンドウをフルサイズでオープンします。しかし、ウィンドウの高さを減らしていくと、スクロールの矢印が現われます。再びウィンドウを大きくしていくと、矢印は消えます。

スクロールするボックスのサイズを制限するため、arrowscrollbox の CSS max-height プロパティーを設定することができます。これを使うと、矢印をいつも表示させることができます。

しかし、arrowscrollbox は、メニューやポップアップで使うと非常に便利です。

(進む) 次は、内容のグリッドの作り方を見ることにしましょう。

例: 5.4.1