メニューのスクロール表示

このセクションでは、メニューのスクロール表示についての説明と、その仕組みを他の要素に対しても使う方法を見ていきます。

大きなメニューを作る

全ての項目が、1 回で画面に入りきらないぐらい多くの操作項目を持つようなメニューを作った場合、どのように処理されるのかを疑問に思ったことがあるかと思います。 Mozilla では、全ての項目をスクロールさせながら見ることができるように、スクロール表示機能を提供しています。

利用可能なスペースが、メニュー表示に必要な大きさより小さい場合、メニューの両端に矢印が現れます。 この矢印の上にマウスを置くことによって、メニューは上下にスクロールします。 利用できるスペースが十分にあれば、矢印は表示されません。 なお、正確には、スクロール表示の動作は、現在のテーマに依存する事に注意してください。

この動作は自動的に発動します。 メニューをスクロール表示にするために、何もする必要はありません。 スクロールの自動表示は、ポップアップ (popup)、メニューリスト (menulist)、メニューバー (menubar) 上のメニュー (menupopup) に対して適用されます。 この機能は、arrowscrollbox 要素を使って実装されています。 この要素は、矢印付きのスクロール表示ボックスを作るために使うことが可能です。

また、arrowscrollbox は、通常のボックスを使うことができる場所なら、どこでも使用可能です。 なお、メニューの中で明示的に使う必要はありません。 このボックスは、常に垂直配置で、内部にどんな要素でも含むことができます。 これは、リストをドロップダウンではない方法で実装するときに使うことができると思います。

スクロール表示ボックスの例

以下の例は、スクロール表示されるボタンのリストの作り方です (矢印ボタンを見るにはウィンドウをリサイズする必要があります)

var el = env.locale; 例 1 : ソース 表示

<arrowscrollbox orient="vertical" flex="1">
  <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 が主に使われるのは、やはり、メニューとポップアップの中になります。

次のセクションでは、XUL 要素にイベントハンドラを追加する方法を見ていきます。