InputMan for ASP.NET オンラインデモ

using System;

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

    }
}

Partial Class jQuery_jQueryAPI
    Inherits System.Web.UI.Page

End Class

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

<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMDate" tagprefix="im_date" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        $(function () {

            // GcTextBoxが点滅するように実装します。
            $("#<%= GcTextBox1.ClientID %>").each(function () {
                var timer;
                timer = setInterval(function () {
                    $("#<%= GcTextBox1.ClientID %>").fadeOut(500, function () { $(this).fadeIn(500) });
                }, 1000);
                
                $(this)
                .blur(function () {
                    if ($(this).GetText() == "") {
                       timer = setInterval(function () {
                            $("#<%= GcTextBox1.ClientID %>").fadeOut(500, function () { $(this).fadeIn(500) });
                        }, 1000);
                    }
                })
                .focus(function () {
                    clearInterval(timer);
                });
            });

            // GcDateのSpinDown/SpinUpイベントを実装します。
            $("#<%= GcDate1.ClientID %>").SpinDown(function () {
                var today = new Date();
                if ($(this).GetValue() > today) {
                    $(this).css("color", "red");
                }
                else {
                    $(this).css("color", "blue");
                }
            });
            $("#<%= GcDate1.ClientID %>").SpinUp(function () {
                var today = new Date();
                if ($(this).GetValue() > today) {
                    $(this).css("color", "red");
                }
                else {
                    $(this).css("color", "blue");
                }
            });

            // GcTimeのblur、focusイベントを実装します。
            $("#<%= GcTime1.ClientID %>")
            .blur(function () {
                $(this).css("background", "white");
                $(this).css("color", "black");
                $(this).animate({ width: "200", height: "16", fontSize: "10pt" }, "slow");
            })
            .focus(function () {
                $(this).css("background", "yellow");
                $(this).css("color", "darkorange");
                $(this).animate({ width: "300", height: "50", fontSize: "2em" }, "slow");
            });

            $("#btnEvalCode").click(function () {
                eval($("#txtCode").text());
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <p>テキストコントロール：未入力時にコントロールを点滅させます。<br />
    日付コントロール：スピンボタンを押下したとき、今日以前の日付は青字で、後の日付は赤字で表示します。<br />
    時刻コントロール：フォーカス取得時にコントロール、フォントを大きく表示し、文字色、背景色を変更します。</p>
    <div class="sample">
        <table>
            <tr>
                <th colspan="2">動作確認</th>
            </tr>
            <tr>
                <td class="controlsTd">テキスト：</td>
                <td>
                    <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" 
                        Width="200px" ClientIDMode="Static"><Watermark><displaynull forecolor="#999999" text="入力してください。" /></Watermark></im_edit:GcTextBox>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">日付：</td>
                <td>
                    <im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True" Width="200px" 
                        ClientIDMode="Static">
                        <DropDown Visible="False" /><Spin Visible="True" />
                    </im_date:GcDate>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">時刻：</td>
                <td>
                    <im_date:GcTime ID="GcTime1" runat="server" HasLoadFromXml="True" Width="200px" 
                        ClientIDMode="Static"><DropDown Visible="False"/></im_date:GcTime>
                </td>
            </tr>
        </table>
    </div>
    <table align="center" class="inputTable">
        <tr>
            <td>jQueryコードを入力してください。(あらかじめサンプルコードが入力されています。）</td>
        </tr>
        <tr>
            <td align="center">
            <textarea id="txtCode" name="txtCode" rows="5" cols="80" style="width: 100%">$("#<%=GcTextBox1.ClientID%>").animate({width: "300px", borderWidth: "4px"}, 1500);
$("#<% =GcDate1.ClientID%>").css("background", "aliceblue");
$("#<% =GcTime1.ClientID%>").fadeOut("slow"); </textarea></td>
        </tr>
        <tr>
            <td align="center"><input id="btnEvalCode" class="button_nowidth" type="button"  value="jQueryコードを実行" /></td>
        </tr>
    </table>
</asp:Content>