[目次] [前へ: ツールバーとツールボックス] [次へ: ツリーウィジェット]

機能担当: Eric Vaughan

更新履歴:

• 8/22/99 - cropとoncommandに関する情報を追記.

ラベルつきボタンはHTMLのものに大変よく似ているが,HTMLボタンと違い,任意のコンテンツを含めることができない. その代わりラベルつきボタンでは画像1つとテキスト文字列1つを含めることができる XULドキュメントにタイトルつきボタンを祖入するには,titledbutton タグを利用する.

ラベルつきボタンに利用する画像はCSSを使うかsrc 属性を使って指定する. この属性の値は利用すr画像のURLである.

<titledbutton src="http://www.mozilla.org/myImage.gif"/>

src 属性が省略されている場合は,list-style-imageというCSSの プロパティからその画像を取得する

CSS .folderButton { list-style-image: url("http://www.mozilla.org/folder.gif"); } XUL <titledbutton class="folderButton"/>

ラベルつきボタンに利用するテキスト文字列はvalue 属性を使って指定する. そのテキスト文字列は画像の上下左右に置くことができる. 文字列の画像に対する表示位置は align 属性を使って指定する.(つまり,right のアライメントはテキスト文字列が画像の右側に配置されることを表している)

<titledbutton class="folderButton" value="Bookmarks" align="right"/>

ラベルつきボタンはボタンエレメントにあるdisabled 属性を設定することで無効化することができる. この属性は AOM APIのsetAttributeとunsetAttribute を使って 設定したり設定を外したりできる.

ラベルつきボタンがクリックされると,(普通のクリックハンドラに加えて) commandハンドラが起動されるこれはoncommand属性を使って ボタンに設定する.

ボタンにあるtoggled属性の値を1にすると, 押された状態でロックする.この属性が設定されていると,ボタンは押されていない状態で表示される. トグルの値が2のときは,ボタンの状態はそれらを合わせたものである.

ラベルつきボタンの見栄えはCSSを使ってカスタマイズできる自由度が高い.ボタンの反転表示は :hover 疑似クラスを使って指定する. 押されていない状態でロックするには:active疑似クラスを使って指定する.

titledbutton:hover { ... }

ボタンに利用する画像はCSSで指定できるので,異なったスタイルルールでそれぞれが異なる画像を含めることができ, ボタンを様々な状態を表すことができる.よって反転、押さていない、画像のないボタンというのも指定可能である. ある条件でアニメーション画像と固定画像を切替えることによりボタンにアニメーションをさせることさえも可能である. (例えば,ネットスケープのthrobber[訳注：右上のアニメーション]はボタンエレメントのbusy属性が設定されると アニメーションgifに切り替わるようなスタイルルールが設定されている).

ラベルつきボタンの幅が足らない場合,テキスト文字列が削除される. この場合のボタンの削除ルールについてはある属性で指定されている. その属性名はcropというもので,left, middle, rightなどの値をもつ. 例えば,crop属性の値がrightに指定されていると,文字列はボタンの幅に収まるまで 右側の文字から必要なだけ画面表示から削除される. 文字列の右側には省略を表す(...)がボタンに表示される.