| Ajaxフレームワーク ユーザーズガイド |
|
目次
索引
|
| 第2章 クライアントフレームワーク | > 2.6 その他の定義 |
TextInputやCalendarなどのフォーカス設定可能なUI部品間で、フォーカスの移動順序の制御を行うには、以下の2通りの方法があります。
また、RCF.setFocus関数を使用して、ユーザロジックから特定の部品にフォーカスを設定することもできます。
なお、フォーカス制御の各機能は、組み合わせて使用することができます。
tabIndexプロパティを持つUI部品では、その値を設定することにより、HTMLのtabindex属性と同じ効果を得ることができます。
以下に、tabIndexプロパティを使用したフォーカス制御の例を示します。
<div rcf:type="TextInput" rcf:tabIndex="1"></div> <div rcf:type="CheckList" rcf:tabIndex="0" rcf:value="foo;bar"></div> <div rcf:type="Calendar" rcf:tabIndex="2"></div> |
上記の例では、Tabキーを押すと、TextInput部品→Calendar部品→CheckList部品の順でフォーカスが移動します。
FocusManager部品を利用すると、任意のキーでの部品間のフォーカス制御や、フォーカス制御範囲の切り替えが可能になります。FocusManager部品の詳細は、“UI部品リファレンス”を参照してください。
以下に、FocusManager部品を使用したフォーカス制御の例を示します。
<div rcf:id="input1" rcf:type="TextInput"></div>
<div rcf:id="list1" rcf:type="CheckList" rcf:value="foo;bar"></div>
<div rcf:id="cal1" rcf:type="Calendar"></div>
<div rcf:type="FocusManager" rcf:targets="input1;cal1;list1" ←フォーカス移動順にUI部品のIDを指定
rcf:tabEnabled="false"></div> ←Tabキーでのフォーカス移動を無効化 |
上記の例では、Tabキーでのフォーカス移動を無効化しています。また、Enterキーを押すと、TextInput部品→Calendar部品→CheckList部品の順でフォーカスが移動します。
RCF.setFocus関数を使用して、ユーザロジックからUI部品にフォーカスを設定することができます。
以下に、RCF.setFocus関数の記述形式を示します。
RCF.setFocus(id) |
以下に、RCF.setFocus関数の使用例を示します。
<div rcf:id="button1" rcf:type="Button"
rcf:onClick="window1.show()">Window表示</div> // (1)
<div rcf:id="window1" rcf:type="Window"
rcf:mode="1" rcf:closeButton="true"
rcf:onShow="RCF.setFocus('input1')" // (2)
rcf:onHide="RCF.setFocus('button1')"> // (3)
<div rcf:id="input1" rcf:type="TextInput"></div>
</div> |
上記の例では、以下のように動作します。
(1) Button(ID=button1)がクリックされると、Window(ID=window1)を表示します。
(2) window1表示時に、window1内のTextInput(ID=input1)にフォーカスを設定します。
(3) window1を非表示にする際、button1にフォーカスを戻します。
以下に、RCF.setFocus関数に関する注意事項を示します。
|
目次
索引
|