オブジェクトの取得

jQueryセレクターを使用してクライアント側でInputMan for ASP.NETコントロールのオブジェクトを取得する方法を解説します。

InputMan for ASP.NETのクライアント側スクリプトの利用

jQueryセレクターを使用してコントロールのオブジェクトを取得した場合でも、InputMan for ASP.NET独自のクライアント側メンバの一部を使用することが可能です。 8.0Jで新規追加されたメンバを使用することはできず、7.0J以前からサポートされていたメンバを使用した実装は正常に動作します。

例えば、SetBackColorや、SetTextメソッドは7.0J以前からサポートされているため、以下は正常に動作します。

JavaScript

$("#GcDateTime1").SetBorderColor("#FF0000");
$("#GcTextBox1").SetText("テキストコントロール");

しかしながら、次の実装に使用しているSetFormatPatternメソッドは、8.0Jで追加された機能であるため、サポートされずエラーが発生します。

JavaScript

$("#GcDateTime1").SetFormatPattern("yyyy/MM/dd");

jQueryセレクターを使用した際に使用可能なメンバかどうかは、JavaScriptリファレンスに[jQuery対応]と注記しています。

オブジェクトの取得

InputMan for ASP.NETのコントロールのオブジェクトを取得可能な基本セレクターは以下のとおりです。

#id

シャープ(#)で始まるセレクターは、クライアント側IDでオブジェクトを指定します。
以下の２つのサンプルコードは、いずれも同様の動作となります。

JavaScript

$("#GcMask1").SetBackColor("yellow");
$("#GcComboBox1").SetEnabled(false);
$("#GcDateTime1").Drop();

JavaScript

FindIMControl("GcMask1").SetBackColor("yellow");
FindIMControl("GcComboBox1").SetEnabled(false);
FindIMControl("GcDateTime1").Drop();

.class

ドット(.)で始まるセレクターは、指定されたクラスを持つコントロールを選択します。次のサンプルコードは、ボタンクリックでIMEditorという名前のクラスを持つ3つのコントロールの値をクリアします。

ASPX

<im_date:GcDateTime ID="GcDateTime1" runat="server" HasLoadFromXml="True" class="IMEditor></im_date:GcDateTime>
<im_mask:GcMask ID="GcMask1" runat="server" HasLoadFromXml="True" class="IMEditor"></im_mask:GcMask>
<im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" class="IMEditor"></im_number:GcNumber>

JavaScript

$(function () {
    $("#Button1").click(function () {
        $(".IMEditor").Clear();
    });
});

selector1, selector2, …, selectorN

複数のセレクターを指定してコントロールを選択します。次のサンプルコードは、日付コントロールおよびIMEditorという名前のクラスを持つコントロールの背景色を設定します。

ASPX

<im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True"></im_date:GcDateTime>
<im_mask:GcMask ID="GcMask1" runat="server" HasLoadFromXml="True" class="IMEditor"></im_mask:GcMask>
<im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" class="IMEditor"></im_number:GcNumber>

JavaScript

$(function () {
    $("#GcDate1, .IMEditor").SetBackColor("red");
});

使用例

jQueryセレクターを使用してオブジェクトを取得したコントロールに対して、プロパティやメソッドを実装することができます。

JavaScript

// マスクコントロールの値を設定します。
$("#GcMask1").SetValue("9813205");
// 数値コントロールのスピン機能を使って、値を増加します。
$("#GcNumber1").DoSpinUp(1, 2);

また、イベントを実装することも可能です。次のサンプルコードは、マスクコントロールのTextChangingクライアント側イベントを使用して、5バイト以上の文字入力を禁止し、5バイト以上の文字が入力されるとバルーンチップで通知します。

JavaScript

$(function () {
    $("#GcMask1").TextChanging(function (sender, eArgs) {
        if (GetByteCount(eArgs.Result) > 5) {
            // 入力をキャンセルします。
            eArgs.Cancel = true;
            // バルーンチップを設定します。
            var tipInfo = new BalloonTipInfo();
            tipInfo.SetCaption("エラー");
            tipInfo.SetText("5バイトを超えています。");
            // バルーンチップを表示します。
            $("#GcBalloonTip1").Show("GcMask1", tipInfo);
        }
    });
});

参照