Ajaxフレームワーク UI部品リファレンス
目次 索引 前ページ次ページ
第2章 画面部品> 2.1 フォーム部品

2.1.8 ComboBox

ComboBoxは、コンボボックスを表示する部品です。コンボボックスは、入力フィールドと選択リストからなる部品です。


検証を実行するValidationHelper、入力制限を行うLimiterなどの機能付加部品を利用することができます。

■表示例


ComboBoxを画面の最下部に配置した場合や、選択リストの高さを設定しないで多数の選択項目を設定した場合など、選択リストを開いたときに画面に収まらないことがあります。
このような場合、ブラウザによってはキー操作でしか選択できなくなるなど操作性が悪くなってしまうため、選択リストが画面内に収まるように部品を配置してください。

■記述形式

<div rcf:type="ComboBox" ... ></div>


子要素は指定できません。


本部品は、前後に改行コードが挿入されて表示されます。

■プロパティ

表の項目の意味は、“Text”の“プロパティ”を参照してください。

名前

データ型

説明

省略

省略値

属性指定

更新

部分更新

list

Array

選択リストに表示する項目の値を指定します。
配列の内容はStringです。

可

[]

値、バインド

可

可

buttonImage

Object

選択リストの表示/非表示を操作するボタンのイメージを指定します。詳細は、“buttonImageプロパティの指定形式”を参照してください。

可

標準のイメージ(注1)

値

不可

不可

fixButtonImageSize

Boolean

選択リストの表示/非表示を操作するボタンのイメージのサイズを固定にするかどうかを指定します。

  • true: 部品全体のサイズにかかわらず、ボタンのイメージのサイズは固定のままです。
  • false:部品全体のサイズに従って、ボタンのイメージのサイズが拡大・縮小されます。

詳細は、“fixButtonImageSizeプロパティ指定時の表示例”を参照してください。

可

false

値

不可

不可

buttonImageSize

Object

選択リストの表示/非表示を操作するボタンのイメージの表示サイズ(高さ、幅)を指定します。単位はピクセルです。(注3)
ボタンのイメージが指定サイズと異なる場合は指定サイズに拡大・縮小されます。(注4)
オブジェクトの指定方法は“buttonImageSizeプロパティの指定方法”を参照してください。
fixButtonImageSizeがfalseの場合、本プロパティは無視されます。

可

ボタンのイメージのサイズ(注2)

値

不可

不可

注1) 標準のイメージのサイズは、幅15ピクセル、高さ18ピクセルです。

注2) 標準のイメージを使用する場合、ボタンのイメージのサイズは、幅15ピクセル、高さ18ピクセルになります。buttonImageプロパティでボタンのイメージを指定した場合は、指定したボタンのイメージのサイズになります。

注3) 部品全体のサイズ(標準サイズは幅150ピクセル、高さ20ピクセル)よりボタンのイメージのサイズが大きい場合、表示が崩れる場合があります。その場合は、ボタンのイメージのサイズが部品全体のサイズより小さくなるように調整してください。

注4) buttonImageSizeプロパティを指定した場合、選択リストの表示/非表示を操作するボタンのイメージのサイズは、強制的に指定したサイズに拡大・縮小されるため、ボタンのイメージの見映えが異なる場合があります。

TextInputのプロパティも指定できます。詳細は、“TextInput”の“プロパティ”を参照してください。
部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。


titleプロパティに長い文字列を指定すると、以下のような現象が起こることがあります。

なお、空文字列を指定した場合は、表示されません。


buttonImageプロパティの指定形式
buttonImageプロパティを指定する形式について、以下に示します。 
{
  base: "URL",
  mouseOver: "URL",
  mouseDown: "URL"
}

プロパティの詳細を以下に示します。

プロパティ名

データ型

説明

省略

省略値

base

String

通常表示されるイメージファイルを指定します。

不可

−

mouseOver

String

マウスカーソルが上にあるとき表示されるイメージファイルを指定します。

可

baseの値

mouseDown

String

マウスがクリックされたときに表示される画像ファイルを指定します。

可

baseの値

それぞれのURLには、クエリ文字列およびURLリライティングで用いるセションIDを付加することができます。詳細は、“ユーザーズガイド”を参照してください。

fixButtonImageSizeプロパティの指定時の表示例
fixButtonImageSizeの値によって、ボタンの表示サイズが異なります。
buttonImageSizeプロパティの指定方法
buttonImageSizeプロパティを指定する形式について、以下に示します。

heightおよびwidthは、それぞれ数値で指定してください。(単位はピクセル)

{
    height:  25,    //画像の表示サイズ(高さ)
    width:   20     //画像の表示サイズ(幅)
}

heightまたはwidthだけの指定も可能です。省略した場合は、ボタンのイメージのサイズで表示されます。

■スタイルプロパティ

パーツ名

プレフィックス

クラス名

使用可能なスタイル

部品全体

なし

rcf-ComboBox
  • サイズ
  • ボーダー

入力部分

input

rcf-ComboBox-input
  • カラー
  • フォント(注1)
  • テキスト(textIndent、textAlign、whiteSpaceを除く)(注2)

選択リスト

list

rcf-ComboBox-list
  • カラー
  • フォント
  • テキスト(textIndent、textAlign、whiteSpaceを除く)
  • ボーダー
  • サイズのheight

選択項目
(マウスカーソルがない場合)

item

rcf-ComboBox-item
  • ボーダー

選択項目
(マウスカーソルがある場合)

itemHovered

rcf-ComboBox-itemHovered
  • カラー

注1)
Firefoxの場合は、lineHeightも除きます。

注2)
Firefoxの場合は、wordSpacingも除きます。

詳細は、“スタイルプロパティ”を参照してください。

■イベントリスナ

名前

説明

イベントオブジェクト

onClickButton

ボタン上でマウスがクリックされたときに呼ばれます。

ActionEvent

onDblClickButton

ボタン上でマウスがダブルクリックされたときに呼ばれます。

onMouseOverButton

マウスがボタン上に重ねられたときに呼ばれます。

onMouseOutButton

マウスがボタン上から離されたときに呼ばれます。

onMouseDownButton

ボタン上でマウスが押し下げられたときに呼ばれます。

onMouseUpButton

ボタン上でマウスが離されたときに呼ばれます。

onMouseMoveButton

マウスがボタン上で動かされたときに呼ばれます。

onMouseOverList

マウスが選択リスト上に重ねられたときに呼ばれます。

onMouseOutList

マウスが選択リスト上から離されたときに呼ばれます。

onMouseDownList

選択リスト上でマウスが押し下げられたときに呼ばれます。

onMouseMoveList

マウスが選択リスト上で動かされたときに呼ばれます。

本部品の入力フィールドのイベントとして、TextInputと同じイベントリスナを使用します。詳細は、“TextInput”の“イベントリスナ”を参照してください。
部品共通のイベントリスナもあります。詳細は、“画面部品共通イベントリスナ”を参照してください。


■JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

■補足事項

目次 索引 前ページ次ページ
Copyright 2009 FUJITSU LIMITED