スクロールバー

今回は、ウィンドウにスクロールバーを追加する方法を見ていこうと思います。

スクロールバーを追加する

スクロールバーは、多くの場合、利用者が大きな文書内を移動できるようにするために使用されます。 それ以外では、特定の範囲の値を入力する必要がある場合にも使うことができます。 スクロールバーを作成する方法はたくさんありますが、 XUL では scrollbar タグを使って作ることができます。 また、テキスト入力欄のような要素では、その内容が非常に大きい場合には、必要に応じて自動的にスクロールバーが追加されます。

このセクションでは、単独で動作するスクロールバーの作り方について説明します。 これは、おそらく、それほど頻繁に使用されることはないと思いますが、 利用者はスクロールバーを調整することによって、入力値を設定することができます。 スクロールバーは、いくつかの部品で構成されています。 まず、スライダーがあります。これはスクロールバーの主要部分で、調整用のボックスを持っています。 それと、両端の 2 つの矢印ボタンです。 スクロールバーは、これらの要素すべてを、自動的に生成します。

スクロールバーの画像を、以下に示します。

スクロールバーの構文を、以下に示します。

<scrollbar
    id="identifier"
    orient="horizontal"
    curpos="20"
    maxpos="100"
    increment="1"
    pageincrement="10"/>

スクロールバーの属性は以下のようになります。

id

スクロールバーの一意な識別子です。

orient

スクロールバーの向きを指定します。デフォルトは horizontal で、左から右の方へ広げるためのスクロールバーを生成します。vertical を指定した場合は、上から下の方へ広げるためのスクロールバーを生成します。

curpos

スクロールバー上で、前後にスライドできるボックスである、サムの現在の位置を指定します。指定可能な値の範囲は、0 から maxpos の間になります。値に単位は必要はありません。デフォルト値は 0 になります。

maxpos

スクロールバーのサムを最大位置に移動したときの値を指定します。値は数値で、単位はありません。デフォルト値は 100 になります。

increment

利用者が、スクロールバーの矢印をクリックしたとき、 curpos の値がどれだけ変化するかを指定します。 デフォルト値は 1 になります。

pageincrement

利用者がスクロールバーでページ送り操作をしたとき、 curpos の値がどれだけ変化するかを指定します。ページ送りは、スクロールバーのサムと矢印の間のトレイ部分をクリックすることで可能です。デフォルト値は 10 になります。

上の構文として示した例では、0 から 100 までの値をもつことのできるスクロールバーを作ります。 この 100 という値は、この例からは何と対応するものかはわかりませんが、ひょっとしたら、何かのリストの行数と対応しているのかもしれません。 ここには必要な任意の値を設定することが可能です。 この例のスクロールバーの初期値は curposで指定されている値 20 になります。 スクロールバーの矢印をクリックすると、値は 1 増減します。 スクロールバーでページ送り操作をすると、値は 10 変化します。

利用者がスクロールバーの矢印をクリックすると、サムは increment の値によって指定された量だけ動きます。 この属性の値を増やすと、スクロールバーはクリックのたびにもっとたくさん動くことになります。 スクロールバーの左端または上端の位置の値は、0 で、 スクロールバーの右端または下端の値は、maxpos によって指定した値になります。

スクロールバーの値を調整することによって、サムを好きな位置に移動することが可能です。 また、利用者が矢印をクリックしたときに動く量も、好きな値に設定することができます。

次のセクションでは、ツールバーの作り方を見ていきます。