表示例
記述形式
<div rcf:type="SelectList" ... ></div>
注意
子要素は指定できません。詳細は、「5.1.4 子要素を持たない部品に子要素を記述した場合の動作」を参照してください。
ポイント
本部品は前後に改行コードが挿入されて表示されます。
プロパティ
表の項目の意味は、「Text」の「プロパティ」を参照してください。
名前 | データ型 | 説明 | 省略 | 省略値 | 属性指定 | 更新 | 部分更新 |
|---|---|---|---|---|---|---|---|
options | Array | 選択項目を表す値のリストを指定します。 | 可 | [] | 値、バインド(注3) | 可 | 可 |
getLabel関数を持つオブジェクト | 各選択項目の文字列を確定する関数を指定します。options配列のメンバに応じた文字列変換ロジックを定義します。getLabel関数には、options配列の個々の要素が渡されます。
| 可 | null(デフォルトlabelProvider) | 値 | 不可 | 不可 | |
multiple | Boolean | 複数選択または単一選択を指定します。
| 可 | false | 値 | 不可 | 不可 |
selectedIndex | Number | 単一選択(multiple=false)の場合
複数選択(multiple=true)の場合
optionsプロパティの値が変更された場合、本プロパティは-1(選択なし)に設定されます。 | 可 | -1 | 値、バインド | 可(注1) | 不可 |
selectedIndexes | NumberのArray | 選択されている項目のインデックス(先頭は0)配列を指定します。 | 可 | [] | 値、バインド | 可(注2) | 可(注2) |
title | String | optionsプロパティがStringまたはObjectの配列で、かつ各Objectがtitle属性でない場合、ツールチップで表示されるテキストを指定します。 | 可 | "" | 値 | 可 | 不可 |
enabled | Boolean | 本部品の有効/無効を指定します。
| 可 | true | 値、バインド | 可 | 不可 |
tabIndex | Number | Tabキーで移動するフォーカスの順番を指定します。 | 可 | 0 | 値 | 可 | 不可 |
render関数を持つオブジェクト | ラベルや項目のインデックスを入力値として各項目の表示用ノードを出力する関数を指定します。
| 可 | null | 値 | 不可 | 不可 |
注1) 単一選択(multiple=false)の場合にだけ更新可能
注2) 複数選択(multiple=true)の場合にだけ更新可能
注3) Objectの配列の場合は、バインディング式だけ記述可能
部品共通のプロパティも指定できます。詳細は、「2.8.1 画面部品共通プロパティ」を参照してください。
注意
titleプロパティに長い文字列を指定すると、自動的に改行または省略されることがあります。
また、発生位置はブラウザにより異なります。
なお、空文字列を指定した場合は、表示されません。
ポイント
単一選択の場合
常に1つだけ選択されている状態です。初期値は、selectedIndexプロパティで指定します。指定がない場合、一番上の項目が選択された状態となります。
マウスをクリックして、選択項目を変更できます。
↑↓カーソルキーで、選択項目を移動できます。
複数選択の場合
初期値は、selectedIndexプロパティで指定します。指定がない場合、すべて非選択状態となります。
マウスをクリックすると、選択項目を追加できます。再度クリックすると、非選択状態に戻ります。
↑↓カーソルキーで、マウスオーバーの項目を移動できます。
スペースキーで、マウスオーバーの項目の選択/非選択状態を変更できます。
項目リストの配列(options)のメンバ型によって、以下のように動作が異なります。
メンバ型 | 説明 |
|---|---|
String型 | 引数を加工せずそのまま返却します。 |
Object型 | オブジェクトのlabelプロパティの値をラベル文字列とします。labelプロパティ以外は無視します。(注) |
注) Selectのように、個々の項目にenabled/disabledを指定することはできません。
optionsプロパティにObjectの配列を利用する場合の定義例を以下に示します。
<script type="text/javascript">
//<![CDATA[
/**
* 各オブジェクトには以下のように labelプロパティを定義します。
* titleプロパティが存在する場合、その項目の補足情報にその値が使用されます。
* {
* label: "[項目のラベル]",
* title: "[項目の補足情報]"
* }
**/
// foo, barというラベルを持つ2つの項目を作成する場合
var obj = {
userOptions : [
{ label:"foo", title:"fooタイトル" },
{ label:"bar", title:"barタイトル" }
]
};
//]]>
</script>
<!-- モデル定義 -->
<div rcf:type="Model" rcf:id="model1" rcf:object="obj"></div>
<!-- SelectList定義 -->
<div rcf:type="SelectList" rcf:options="{model1.userOptions}"></div>
labelProviderプロパティには、getLabel関数を持つオブジェクトを指定します。getLabel関数は、リスト項目の文字列を生成するユーザーロジックを記述します。
項目リストの配列(options)メンバがObject(プロパティ:nameとtel)の場合の記述例を、以下に示します。
<script type="text/javascript">
//<![CDATA[
// labelProviderの定義
var userLabelProvider = {
getLabel: function(item) {
return "名前は" + item.name + "です。電話は" + item.tel + "です。";
}
};
// optionsの定義
var obj = {
userOptions : [
{ name:"Taro YAMADA", tel: "xxx-xxx-xxxx"},
{ name:"Hanako TANAKA", tel: "yyy-yyy-yyyy"}
]
};
//]]>
</script>
<!-- モデル定義 -->
<div rcf:type="Model" rcf:id="model1" rcf:object="obj"></div>
<!-- SelectList定義 -->
<div rcf:type="SelectList" rcf:options="{model1.userOptions}" rcf:labelProvider="userLabelProvider"></div>multipleの値によって、selectedIndexおよびselectedIndexesの扱いは以下のようになります。
multiple=false(単一選択)の場合
部品の初期化時に、selectedIndexの値を基準にして、selectedIndexesの値が変更されます。
selectedIndexesの初期値設定は無視されます。
selectedIndexの値 | 変更後のselectedIndexesの値 |
|---|---|
-1 | [](長さ0の配列) |
-1以外 | selectedIndexの値を持った長さ1の配列 |
タグに初期値が指定されていた場合も、上記のルールに従って動作します。
タグに指定されたselectedIndexesの設定は無視されます。
selectedIndexesをsetProperty()やモデルバインディングによって変更しようとした場合、エラー(RCF11002)となります。
multiple=true(複数選択)の場合
部品の初期化時に、selectedIndexesの値を基準にして、selectedIndexの値が変更されます。
selectedIndexの初期値設定は無視されます。
selectedIndexesの値 | 変更後のselectedIndexの値 |
|---|---|
[](長さ0の配列) | -1 |
長さ1以上の配列 | selectedIndexesの末尾の要素 |
タグに初期値が指定されていた場合も、上記のルールに従って動作します。
タグに指定されたselectedIndexの設定は無視されます。
selectedIndexをsetProperty()やモデルバインディングによって変更しようとした場合、エラー(RCF11002)となります。
rendererプロパティには、render関数を持つオブジェクトを指定します。render関数には、リスト項目を表示する領域のDOMノードと、そのほかの項目情報がパラメーターとして渡されます。render関数内のユーザーロジックでDOMノードを操作することで、リスト項目の表示を制御できます。
render関数のパラメーターを以下に示します。
順 | パラメーター名 | 型 | 説明 |
|---|---|---|---|
1 | node | DOM Node | 項目リストを表示する領域のDOMノードを指定します。 |
2 | item | Object | options配列のメンバを指定します。 |
3 | label | String | itemをlabelProviderで変換した文字列です。 |
4 | index | Number | options配列の中のindexを指定します。 |
rendererプロパティに渡すオブジェクトの例を以下に示します。
<script type="text/javascript">
//<![CDATA[
var user_Renderer = {
/**
* param node 項目を表示する領域のDOMノード
* param item(Object型またはString型) options配列のn番目要素
* param label(String型) options配列のn番目要素をlabelProviderにより変換した結果の文字列
* param index(Number型) n番目
*/
render: function(node, item, label, index) {
//
//以下ユーザー定義ロジック
//
node.innerHTML = '<img src="img.png" />’;
node.appendChild(document.createTextNode(label));
}
};
//]]>
</script>
<div rcf:type="SelectList" rcf:renderer="user_Renderer"></div>スタイルプロパティ
部品全体のスタイルプロパティを以下に示します。
パーツ名 | プレフィックス | クラス名 | 使用可能なスタイル |
|---|---|---|---|
部品全体 | なし | rcf-SelectList |
|
詳細は、「2.9 スタイルプロパティ」を参照してください。
プレフィックス | クラス | スタイルプロパティ | 説明 | デフォルト |
|---|---|---|---|---|
optionSelected | rcf-SelectList-optionSelected | backgroundColor | 選択項目の背景色を指定します。 | #004E98 |
color | 選択項目のフォント色を指定します。 | #FFFFFF(白) | ||
optionHovered | rcf-SelectList-optionHovered | backgroundColor | マウスオーバー項目の背景色を指定します。 | #316AC5 |
color | マウスオーバー項目のフォント色を指定します。 | #FFFFFF(白) |
本部品のスタイルプロパティは、CheckListと同じです。ただし、チェックボックスの表示はありません。詳細は、「2.1.14 CheckList」の「スタイルプロパティ」を参照してください。
イベントリスナ
名前 | 説明 | イベントオブジェクト |
|---|---|---|
onFocus | 部品がフォーカスを得たときに呼ばれます。 | |
onBlur | 部品がフォーカスを失ったときに呼ばれます。 | |
onChange | 部品の選択状態が変更されたときに呼ばれます。 | |
onOptionSelected | 項目が選択されたときに呼ばれます。 | |
onOptionDeselected | 項目の選択が解除されたときに呼ばれます。 |
注) マウス、キーボードなどの入力装置によってUI部品を操作した場合に呼ばれるイベントリスナ
部品共通のイベントリスナもあります。詳細は、「2.8.2 画面部品共通イベントリスナ」を参照してください。
独自のキー操作を設定している場合は、「5.2.3 keypressイベントに関する注意事項 」および「5.2.5 部品に対するキー入力に関する注意事項」を参照してください。
JavaScript API
固有のJavaScript APIはありません。部品共通のJavaScript APIは、「2.8.3 画面部品共通JavaScript API」を参照してください。