その他のボタン機能

このセクションでは、ボタンが持っている付加的な機能について見ていきます。

画像を追加する

ボタンに画像を追加するには、button 要素に対して、 URL を指定した image 属性を設定します。画像は、この URL から読み込まれてボタンに表示されます。URL は、相対 URL でも、絶対 URL でもかまいません。

下に示すボタンは、ラベルと「happy.png」という画像の両方を持っています。画像はラベルの左側に表示されるはずです。画像の表示位置は、後述する 2 つの属性を使用することで変更することができます。

例 1 : ソース表示

<button label="Help" image="happy.png"/>

CSS による画像の指定

画像を指定するもう 1 つの方法として、CSS の list-style-image スタイルプロパティをボタンに対して設定する方法があります。この方法は、XUL ファイルを変更することなく、「スキン」（この場合、表示される画像の内容）の変更することを可能にするために設計されています。以下に例を示します。

例 2 : ソース表示

<button id="find-button"
  label="Find" style="list-style-image: url('happy.png')"/>

この例では、「happy.png」画像がボタンに表示されます。 style 属性の機能は、HTML のものと同様です。仕様上は、style 属性は全ての XUL 要素に対して使用できます。実際には、スタイルの宣言は XUL ファイルから分離された、スタイルシートの方で行なうべきであるという事に注意してください。

画像の表示位置

デフォルトでは、ボタンの画像はラベルの左側に表示されます。 2 つの属性を使用して、表示位置を制御することが可能です。

dir 属性は、画像とテキストの並びの順序 (direction) をコントロールします。この属性に、reverse という値を設定することで、画像はテキストの右側に表示されます。値を、normal にするか、この属性を設定しなければ、画像はテキストの左側に表示されます。

orient 属性は、画像をテキストの上または下に配置する場合に使用します。デフォルト値は horizontal で、画像は右または左に配置されます。 vertical という値を設定することで、画像を上または下に配置することが可能です。 vertical に設定した場合、dir 属性は、画像が上か下かをコントロールします。値は左右の場合と同じものが使用され、normal は、画像をテキストの上に配置するという意味になり、reverse は、画像をテキストの下に配置するという意味になります。

例 3 : ソース表示

<button label="Left" image="happy.png"/>
<button label="Right" image="happy.png" dir="reverse"/>
<button label="Above" image="happy.png" orient="vertical"/>
<button label="Below" image="happy.png" orient="vertical" dir="reverse"/>

この例は、ボタンの配置について 4 種類全てを示しています。属性の値にデフォルト値が使用できる場合は、属性の指定が省略されていますので注意してください。

他の要素を含むボタン

ボタンの開始と終了タグによって任意の要素を囲むことにより、ボタンの内部にその内容を生成させることが可能です。これは頻繁に使うようなものではないと思いますが、カスタム要素を作成するような場合には使用する事になるかもしれません。

次の例は、途中の 2 つの単語が赤で表示されるボタンを作成します。

例 4 : ソース表示

<button>
  <description value="This is a"/>
  <description value="rather strange" style="color: red;"/>
  <description value="button"/>
</button>

ボタンの中には、どんな XUL 要素でも置くことが出来ます。 HTML 要素は無視されるため、置きたい場合は、description 要素によってラップする必要があります。ボタンに label 属性が指定されていた場合、ボタン内部に置かれた全ての内容をラベルがオーバライドするため、ラベルの値のみが表示されます。

メニュー付きボタン

menupopup をボタンの内部に置くことによって、ボタンが押されたときに menulist のようにメニューをドロップダウンさせる事が可能です。但し、この場合は、type 属性の値として menu を設定する必要があります。

例 5 : ソース表示

<button type="menu" label="Device">
  <menupopup>
    <menuitem label="Printer"/>
    <menuitem label="Mouse"/>
    <menuitem label="Keyboard"/>
  </menupopup>
</button>

この例では、ユーザがボタンをクリックすると 3 つの項目を含んだメニューがポップアップします。 menulist と違って、ポップアップしたメニューの項目をクリックしてもボタンのラベルが変化しないことに注意してください。このタイプのボタンは、メニューの各項目に実行するタスクのスクリプトを関連付けることで、実行したい操作を選択するためのメニューとして使われます。メニューについての詳細は、もう少し後のセクションで見ていく予定です。

type 属性の値として menu-button を設定することもできます。この場合もメニューの付いたボタンが作成されますが、外見が違っています。上の画像で違いを示します。左のボタンが「menu」で、右のボタンが「menu-button」で作成したものです。どちらにも、メニューが存在する事を示す矢印が表示されています。左の「menu」の方は、ユーザがボタンのどこをクリックしてもメニューが表示されます。右の「menu-button」の方は、ユーザがメニューを出すには矢印をクリックしなければなりません。

次のセクションでは、XUL 要素がウィンドウ内でどのように配置されるかについて、さらに詳しく学びます。

« 前のページ次のページ »