jQuery - jQueryセレクタ―のサポート -

InputManの各コントロールでは、jQueryセレクタ―をサポートします。「$("#GcDateTime1")」というようなjQuery構文でInputManコントロールのオブジェクトの取得や、クライアント側イベントのハンドルができます。 また、コントロールに設定されたクラス名から複数のオブジェクトを取得することも可能です。

マスク：
日付時刻：
数値：
■実装済みの動作
マスク 7バイト以上の文字列は入力できません。
日付時刻 不完全な入力（「2015/__/__ 00:00:00」など）のままフォーカスが移動するとバルーンチップが表示されます。
数値 0～100以外の値を入力するとメッセージボックスが表示されます。
ボタン マスク、日付時刻、数値コントロールの値をクリアし、背景色を白にします。
マスク、日付時刻、数値 いずれかのコントロールの値が変更されるとこれらのコントロールの背景色が水色に変更します。

ソースコード

別ウィンドウで表示 
using System;

public partial class jQuery_jQuerySelector : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}


Partial Class jQuery_jQuerySelector
    Inherits System.Web.UI.Page

End Class


<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="jQuery_jQuerySelector, App_Web_wozzf1tb" stylesheettheme="SkinFile" %>

<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMMask" tagprefix="im_mask" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMDate" tagprefix="im_date" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMNumber" tagprefix="im_number" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMBalloonTip" tagprefix="im_balloontip" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        $(function () {
            $("#<%= GcMask1.ClientID %>").TextChanging(function (sender, eArgs) {
                if (GetByteCount(eArgs.Result) > 7) {
                    eArgs.Cancel = true;
                }
            });

            $("#<%= GcDateTime1.ClientID %>").InvalidValue(function (sender, eArgs) {
                $("#<%= GcBalloonTip1.ClientID %>").Show("<% =GcDateTime1.ClientID %>");
            });

            $("#<%= GcNumber1.ClientID %>").InvalidRange(function (sender, eArgs) {
                alert("範囲外の入力です。");
            });

            $(".IMEditor").TextChanged(function (sender, eArgs) {
                $(".IMEditor").SetBackColor("aliceblue");
            });

            $("#Button1").click(function () {
                $(".IMEditor").Clear();
                $(".IMEditor").SetBackColor("white");
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <im_balloontip:GcBalloonTip ID="GcBalloonTip1" runat="server" TargetNameChanged="False">
        <controlid value="GcDateTime1"></controlid>
            <balloontipinfo caption="不完全入力" text="日付として無効な値です。" captionfont-name="メイリオ" 
                textfont-name="メイリオ" usecaptionfont="True" usetextfont="True">
            </balloontipinfo>
        </im_balloontip:GcBalloonTip>
    <div class="sample">
        <table>
            <tr>
                <td class="controlsTd">マスク：</td>
                <td>
                    <im_mask:GcMask ID="GcMask1" runat="server" HasLoadFromXml="True" Width="200px" 
                        class="IMEditor"><helpvalue text="マスク"></helpvalue></im_mask:GcMask>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">日付時刻：</td>
                <td>
                    <im_date:GcDateTime ID="GcDateTime1" runat="server" HasLoadFromXml="True" 
                        Width="200px" class="IMEditor">
                    </im_date:GcDateTime>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">数値：</td>
                <td>
                    <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" 
                        Width="200px" MaxValue="100" MinValue="0" class="IMEditor" 
                        ClearAction="Null">
                        <DropDown Visible="False" /><Spin Visible="True" />
                        <helpvalue value = "100" ></helpvalue>
                    </im_number:GcNumber>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input id="Button1" class="button_nowidth" type="button" value="値をクリア" />
                </td>
            </tr>
        </table>
    </div>
    <table class="inputTable">
        <tr>
            <td colspan="2"><u>■実装済みの動作</u></td>
        </tr>
        <tr>
            <th class="inputTh">マスク</th>
            <td class="inputTd">7バイト以上の文字列は入力できません。</td>
        </tr>
        <tr>
            <th class="inputTh">日付時刻</th>
            <td class="inputTd">不完全な入力（「2015/__/__ 00:00:00」など）のままフォーカスが移動するとバルーンチップが表示されます。</td>
        </tr>
        <tr>
            <th class="inputTh">数値</th>
            <td class="inputTd">0～100以外の値を入力するとメッセージボックスが表示されます。</td>
        </tr>
        <tr>
            <th class="inputTh">ボタン</th>
            <td class="inputTd">マスク、日付時刻、数値コントロールの値をクリアし、背景色を白にします。</td>
        </tr>
        <tr>
            <th class="inputTh">マスク、日付時刻、数値</th>
            <td class="inputTd">いずれかのコントロールの値が変更されるとこれらのコントロールの背景色が水色に変更します。</td>
        </tr>
    </table>
</asp:Content>
このページの先頭へ戻る