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

using System;
using System.Drawing;
using GrapeCity.Web.Input.IMBalloonTip;

public partial class Appearance_GcBalloonTip : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GcComboBox1.SelectedIndex = 1;
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        BalloonTipInfo bi = new BalloonTipInfo();
        bi.CaptionFont.Name = "メイリオ";
        bi.UseCaptionFont = true;
        bi.TextFont.Name = "メイリオ";
        bi.UseTextFont = true;

        // タイトルとテキストを設定します。
        bi.Caption = TextBox1.Text;
        bi.Text = TextBox2.Text;

        // 背景色、境界線色、文字色を設定します。
        if( GcColorPicker1.SelectedIndex > -1 )
        {
            bi.BackColor = GcColorPicker1.SelectedColor;
        }
        
        if( GcColorPicker2.SelectedIndex > -1 )
        {
            bi.BorderColor = GcColorPicker2.SelectedColor;
        }

        if( GcColorPicker3.SelectedIndex > -1 )
        {
            bi.TextForeColor = GcColorPicker3.SelectedColor;
        }
        
        // 自動的に閉じるかどうかと閉じるまでの時間を設定します。
        bi.AutoClose = CheckBox1.Checked;
        bi.Span = (int)GcNumber1.Integer;

        // アイコンを設定します。
        if( GcComboBox1.SelectedIndex < 3 )
        {
            bi.Icon = (IconType)GcComboBox1.SelectedIndex;
            bi.UseSystemIcon = true;
        }
        else if( GcComboBox1.SelectedIndex == 3 )
        {
            bi.Icon = IconType.Error;
            bi.UseSystemIcon = true;
        }
        else if(GcComboBox1.SelectedIndex == 4)
        {
            bi.UseSystemIcon = false;
            bi.IconImage = GcComboBox1.SelectedItem.Image;
        }

        // 登録されていたバルーンチップ情報を削除し、新たに追加します。
        GcBalloonTip1.BalloonTipInfos.Clear();
        GcBalloonTip1.BalloonTipInfos.Add("Button1", bi);
        GcBalloonTip1.Show("Button1", (TipPosition )DropDownList1.SelectedIndex);
    }
}

Imports GrapeCity.Web.Input.IMBalloonTip
Imports System.Drawing

Partial Class Appearance_GcBalloonTip
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            GcComboBox1.SelectedIndex = 1
        End If
    End Sub


    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Dim bi As New BalloonTipInfo
        bi.CaptionFont.Name = "メイリオ"
        bi.UseCaptionFont = True
        bi.TextFont.Name = "メイリオ"
        bi.UseTextFont = True

        ' タイトルとテキストを設定します。
        bi.Caption = TextBox1.Text
        bi.Text = TextBox2.Text

        ' 背景色、境界線色、文字色を設定します。
        If GcColorPicker1.SelectedIndex > -1 Then
            bi.BackColor = GcColorPicker1.SelectedColor
        End If

        If GcColorPicker2.SelectedIndex > -1 Then
            bi.BorderColor = GcColorPicker2.SelectedColor
        End If

        If GcColorPicker3.SelectedIndex > -1 Then
            bi.TextForeColor = GcColorPicker3.SelectedColor
        End If

        ' 自動的に閉じるかどうかと閉じるまでの時間を設定します。
        bi.AutoClose = CheckBox1.Checked
        bi.Span = GcNumber1.Integer

        ' アイコンを設定します。
        If GcComboBox1.SelectedIndex < 3 Then
            bi.Icon = GcComboBox1.SelectedIndex
            bi.UseSystemIcon = True
        ElseIf GcComboBox1.SelectedIndex = 3 Then
            bi.Icon = IconType.Error
            bi.UseSystemIcon = True
        ElseIf GcComboBox1.SelectedIndex = 4 Then
            bi.UseSystemIcon = False
            bi.IconImage = GcComboBox1.SelectedItem.Image
        End If

        ' 登録されていたバルーンチップ情報を削除し、新たに追加します。
        GcBalloonTip1.BalloonTipInfos.Clear()
        GcBalloonTip1.BalloonTipInfos.Add("Button1", bi)
        GcBalloonTip1.Show("Button1", DropDownList1.SelectedIndex)
    End Sub
End Class

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

<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMBalloonTip" tagprefix="im_balloontip" %>
<%@ 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.IMCombo" tagprefix="im_combo" %>
<%@ Register assembly="GrapeCity.Web.Input.ColorPicker.v100" namespace="GrapeCity.Web.Input.IMColorPicker" tagprefix="im_ColorPicker" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        function Show_Balloon() {
            // BalloonTipInfoを設定します。
            var bi = new GCIM.BalloonTipInfo();
            
            // 自動的に閉じるかどうかを設定します。
            bi.SetAutoClose(document.getElementById("<% =CheckBox1.ClientID %>").checked);
            // 自動的に閉じるまでの時間を設定します。
            bi.SetSpan(FindIMControl("<% =GcNumber1.ClientID %>").GetValue());

            // 背景色を設定します。
            if (FindIMControl("<% =GcColorPicker1.ClientID %>").GetSelectedIndex() > -1) {
                bi.SetBackColor(FindIMControl("<% =GcColorPicker1.ClientID %>").GetText());
            }
            // 境界線色を設定します。
            if (FindIMControl("<% =GcColorPicker2.ClientID %>").GetSelectedIndex() > -1) {
                bi.SetBorderColor(FindIMControl("<% =GcColorPicker2.ClientID %>").GetText());
            }
            // 文字色を設定します。
            if (FindIMControl("<% =GcColorPicker3.ClientID %>").GetSelectedIndex() > -1) {
                bi.SetTextForeColor(FindIMControl("<% =GcColorPicker3.ClientID %>").GetText());
            }
            // アイコンを設定します。
            var combo = FindIMControl("<%=GcComboBox1.ClientID %>");
            if (combo.GetSelectedIndex() == 4) {
                // システムアイコンを使用
                bi.SetUseSystemIcon(false);
                bi.SetIconImage( combo.GetSelectedItem().GetImageUrl());
            }
            else {
                // 任意のアイコンを使用
                bi.SetUseSystemIcon(true);
                bi.SetIcon(combo.GetSelectedItem().SubItems[1].GetValue());
            }
            // タイトルを設定します。
            bi.SetCaption(document.getElementById("<%=TextBox1.ClientID%>").value);
            // 表示テキストを設定します。
            bi.SetText(document.getElementById("<%=TextBox2.ClientID%>").value)


            // フォントを設定します。
            bi.SetCaptionFontFamily("メイリオ");
            bi.SetUseCaptionFont(true);
            bi.SetTextFontFamily("メイリオ");
            bi.SetUseTextFont(true);

            // バルーンチップを表示します。
            var position = document.getElementById("<%=DropDownList1.ClientID %>").selectedIndex;
            FindIMControl("<%=GcBalloonTip1.ClientID %>").Show("Button2", position, bi);
            return false;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="sample">
        <table>
            <tr>
                <th>入力確認</th>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="Button2" runat="server" CssClass="button_nowidth" 
                        onclientclick="return Show_Balloon();" Text="バルーンチップを表示（クライアント側）" ClientIDMode="Static" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="バルーンチップを表示（サーバー側）" 
            onclick="Button1_Click" />
                </td>
            </tr>
            <im_balloontip:GcBalloonTip ID="GcBalloonTip1" runat="server"></im_balloontip:GcBalloonTip>
        </table>
    </div>
    <table class="inputTable">
        <tr>
            <th class="inputTh">バルーンの閉じるタイミング</th>
            <td class="inputTd"><asp:CheckBox ID="CheckBox1" runat="server" Text="コントロールにフォーカスがなくなったときに自動的に閉じる" />
            </td>
        </tr>
        <tr>
            <th class="inputTh">自動的に閉じるまでの表示時間</th>
            <td class="inputTd">
                <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" MinValue="0">
                    <Format Digit="########0" NegativePrefix="-" PositiveSuffix=" ミリ秒" />
                    <DisplayFormat Digit="########0" NegativePrefix="-" PositiveSuffix=" ミリ秒" />
                    <DropDown Visible="False" Enabled="false"/>
                    <Spin Visible="True" />
                    <helpvalue value = "3000" ></helpvalue>
                </im_number:GcNumber>
            </td>
        </tr>
        <tr>
            <th class="inputTh">背景色</th>
            <td class="inputTd">
                <im_ColorPicker:GcColorPicker ID="GcColorPicker1" runat="server" Width="200px"></im_ColorPicker:GcColorPicker>
            </td>
        </tr>
        <tr>
            <th class="inputTh">境界線色</th>
            <td class="inputTd">
                <im_ColorPicker:GcColorPicker ID="GcColorPicker2" runat="server" Width="200px"></im_ColorPicker:GcColorPicker>
            </td>
        </tr>
        <tr>
            <th class="inputTh">文字色</th>
            <td class="inputTd">
                <im_ColorPicker:GcColorPicker ID="GcColorPicker3" runat="server" Width="200px"></im_ColorPicker:GcColorPicker>
            </td>
        </tr>
        <tr>
            <th class="inputTh">表示位置</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem>左上</asp:ListItem>
                    <asp:ListItem>中央上</asp:ListItem>
                    <asp:ListItem>右上</asp:ListItem>
                    <asp:ListItem>左下</asp:ListItem>
                    <asp:ListItem Selected="True">中央下</asp:ListItem>
                    <asp:ListItem>右下</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">アイコン</th>
            <td class="inputTd">
                <im_combo:GcComboBox ID="GcComboBox1" runat="server" HasLoadFromXml="True" 
                    TextBoxStyle="Both" DropDownStyle="DropDownList" Width="200px">
                    <ListBox ShowItemImage="True" />
                    <comboitem></comboitem>
                    <subitem index="0" value="なし"></subitem>
                    <subitem index="0" value="none"></subitem>
                    <comboitem image="~/Images/imImages/Icon_Information.png"></comboitem>
                    <subitem index="1" value="情報アイコン"></subitem>
                    <subitem index="1" value="information"></subitem>
                    <comboitem image="~/images/imImages/Icon_Exclamation.png"></comboitem>
                    <subitem index="2" value="警告アイコン"></subitem>
                    <subitem index="2" value="warning"></subitem>
                    <comboitem image="~/Images/ImImages/Icon_error.png"></comboitem>
                    <subitem index="3" value="エラーアイコン"></subitem>
                    <subitem index="3" value="error"></subitem>
                    <comboitem image="~/images/imImages/OK.png"></comboitem>
                    <subitem index="4" value="任意のアイコン"></subitem>
                    <subitem index="4"></subitem>
                    <helpvalue ></helpvalue>
                </im_combo:GcComboBox>
            </td>
        </tr>
        <tr>
            <th class="inputTh">タイトル</th>
            <td class="inputTd">
                <asp:TextBox ID="TextBox1" runat="server" Width="200px">バルーンチップ</asp:TextBox>
            </td>
        </tr>
        <tr>
            <th class="inputTh">表示テキスト</th>
            <td class="inputTd">
                <asp:TextBox ID="TextBox2" runat="server" Width="400px">さまざまな外観にカスタマイズできます。</asp:TextBox>
            </td>
        </tr>
    </table>
</asp:Content>