このトピックでは、igEditor ベースのコントロールでイベントを処理する方法とオプションを設定する方法を紹介します。
このトピックは、以下のセクションで構成されます。
jQuery および ASP.NET MVC に必要なスクリプトは、ヘルパーが jQuery ウィジットとして似たような JavaScript のを描画するため同じです。次が必要になります。
igEditor コントロールでイベントのバインドとオプションの設定方法には、コントロールの初期化とランタイム時の 2 通りの方法があります。
ウィジットの初期化時にイベントにバインドする場合は、eventName: <handler> 形式のオプションを使用してイベントにサブスクライブします。以下の例では、イベント ハンドラー機能がインラインで実装されています。ただし、イベント ハンドラーを関数名に割り当ててハンドラーをコントロールの初期化以外で実装することも可能です。
以下は、イベント ハンドラーを igCurrencyEditor コントロールのイベントへアタッチした例です。
JavaScript の場合:
$("#currencyeditor").igCurrencyEditor({
blur: function (evt, ui) {
// Handle event
}
});
ウィジェットの初期化でオプションを設定する場合、標準 JSON 構文 (optionName: <value>) を使用します。他のオプションはコンマで区切ります。
以下の例は、igNumericEditor コントロールを初期化し、JSON オブジェクトのオプションを使用してコントロールのデフォルト値と最大値を設定します。
JavaScript の場合:
$("#numericeditor").igNumericEditor({
value: 20,
maxValue: 100
});
jQuery は、多数のイベント処理方法をサポートしています。選択した状況によって、bind()、live()、delegate() または on() 関数を使用して、イベント ハンドラーをウィジェットのイベントにワイヤーできます。
以下のリストは、各関数の詳細を示します。
bind: 指定したセレクターに一致する既存の DOM 要素へイベント ハンドラーをアタッチします。
live: 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。イベントハンドラーは、DOM ツリーまで伝達しません。
delegate: 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。イベント ハンドラーは、DOM ツリーまで伝達します。
on: 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。(delegate 関数は jQuery version 1.7 で廃止され、on 関数がイベント ハンドラー確立の優先方法になりました。)
bind() を使用する場合、現在使用可能な要素にのみ指定されたハンドラーへアタッチすることに注意してください。つまり、動的に追加された項目 (DOM が読み込まれた後) は、イベント ハンドラーの割り当てに含まれません。delegate() 関数は live() 関数の新しいバージョンで、live() よりパフォーマンスが向上されました。
注: jQuery バージョン 1.7 で
on()およびone()関数は、delegate()の代替として使用するのに適しています。
既定の jQuery イベント wiring 関数のいずれかを使用する場合、jQuery UI イベントの命名規則に従ってください。たとえば、jQuery UI ウィジェット ファクトリは、ウィジェットの名前をイベント名のプレフィックスとして追加します。
igEditor コントロール (igNumericEditor、igCurrencyEditor など) のコレクションは、igEditor ベース コントロールの定義済みインスタンスです。そのため、イベント名は、インスタンス化するコントロール タイプに固有な名前の代わりに “igeditor” プレフィックスを使用します。エディターのフォーカス イベントにサブスクライブする場合、"igcurrencyeditorfocus" (またはその他のコントロール名) ではなく “igeditorfocus” にサブスクライブする必要があります。
“iggridhiding” ウィジェットの columnhiding イベントへアタッチする場合、イベント名は “iggridhidingcolumnhiding” となります。
以下は、HTML ヘルパーを使用して Ignite UI for MVC TextEditor コントロールのインスタンスを作成し、コントロールが初期化されるとフォーカス イベントへサブスクライブする例です。
エディターのインスタンスを作成します。
HTML の場合:
<%= Html.Infragistics().TextEditor()
.ID("texteditor")
.Width(200)
.Render()
%>
次に、bind() を使用してフォーカス イベントへサブスクライブします。
JavaScript の場合:
$("#texteditor").bind('igeditorfocus', function (evt, ui) {
// Handle event
});
以下は、HTML ヘルパーを使用して Ignite UI for MVC DateEditor コントロールのインスタンスを作成し、初期化されるとフォーカス イベントへサブスクライブする例です。
igTextEditor コントロールのインスタンスを作成します。
HTML の場合:
<%= Html.Infragistics().DateEditor()
.ID("dateeditor")
.Width(200)
.Render()
%>
次に、bind() を使用してフォーカス イベントへサブスクライブします。
JavaScript の場合:
$("#dateeditor").bind('igeditorfocus', function (evt, ui) {
// Handle event
});
初期化後にオプションを処理する場合、初期化で作成されたコントロールへアクセスし、オプション値を変更します。以下の構文でオプションを変更します。
$('#inputFieldID').igTextEditor ('option', <option name>,<option value>);
Ignite UI for MVC は、igEditor コントロールを内部で描画します。コードは次のようになります。
$('#inputFieldID').igEditor ('option', <option name>,<option value>);
ランタイムでクライアントでウィジェットを使用する場合、ウィジェットのメンバーへアクセスするには igEditors クライアント ウィジェットも使用してください。
注:
igEditor関数を使用したアクセス コントロールのアクセス方法は、すべてのエディター コントロールに適用できます。
以下は、HTML ヘルパーを使用して Ignite UI for MVC MaskEditor コントロールのインスタンスを作成し、初期化後にマスクを変更する例です。
igMaskEditor コントロールのインスタンスを作成します。
HTML の場合:
<%= Html.Infragistics().MaskEditor()
.ID("maskeditor")
.Width(200)
.Render()
%>
次に igEditor 関数を呼び出して inputMask オプションを設定します。
JavaScript の場合:
$("#maskeditor").igEditor('option', 'inputMask', 'CCCCCCCCCC');
以下は、HTML ヘルパーを使用して Ignite UI for MVC PercentEditor コントロールのインスタンスを作成し、初期化後に最大 10 進数を変更する例です。
igMaskEditor コントロールのインスタンスを作成します。
HTML の場合:
<%= Html.Infragistics().PercentEditor()
.ID("percenteditor")
.Width(200)
.Render()
%>
次に igEditor 関数を呼び出して maxDecimals オプションを設定します。
JavaScript の場合:
$("#percenteditor").igEditor('option', 'maxDecimals', 10);
オンラインで表示: GitHub