バルーンチップに表示する内容の詳細な設定は、
BalloonTipInfoオブジェクトを使用します。バルーンチップエクステンダの
BalloonTipInfosプロパティは、BalloonTipInfoオブジェクトを保持する
BalloonTipInfoCollectionクラスを参照します。よって、Webフォームにバルーンチップエクステンダを一つ配置するだけで、複数のコントロールに個別の内容のバルーンチップを表示することができます。
BalloonTipInfoオブジェクトの内容は、専用のエディタを使用することで、容易に設定することができます。
バルーンチップエクステンダをWebフォームに配置すると、Webフォーム上にある各コントロールのプロパティグリッドに「
GcBalloonTip1 の BalloonTipInfo」(太字部分はバルーンチップエクステンダのIDにより異なります)が追加されます。

上記プロパティグリッドでバルーンチップの内容を設定できますが、

ボタンのクリックで、下記のバルーンチップ エディタを起動できます。
コードからバルーンチップの内容を設定するには、サーバー側、クライアント側共にBalloonTipInfoオブジェクトを生成し、BalloonTipInfoCollectionに追加します。
次のサンプルコードでは、バルーンチップの内容を設定する方法を示します。
Imports GrapeCity.Web.Input.IMBalloonTip
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
' BalloonTipInfoオブジェクトを作成します。
Dim ti As New BalloonTipInfo
' バルーンチップの内容を設定します。
ti.Caption = "不正な入力"
ti.Text = "入力された値が不正です。"
ti.Icon = IconType.Warning
ti.Span = 3000
' バルーンチップエクステンダにBalloonTipInfoを追加します。
GcBalloonTip1.BalloonTipInfos.Add("GcTextBox1", ti)
End If
using GrapeCity.Web.Input.IMBalloonTip;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// BalloonTipInfoオブジェクトを作成します。
BalloonTipInfo ti = new BalloonTipInfo();
// バルーンチップの内容を設定します。
ti.Caption = "不正な入力";
ti.Text = "入力された値が不正です。";
ti.Icon = IconType.Warning;
ti.Span = 3000;
// バルーンチップエクステンダにBalloonTipInfoを設定します。
GcBalloonTip1.BalloonTipInfos.Add("GcTextBox1", ti);
}
}
BalloonTipInfoクラスの以下のプロパティをバルーンチップの内容に設定できます。
コントロールにバルーンチップを表示するには、サーバー側ではBalloonTipクラスの
Showメソッド、クライアント側では
Showメソッドを呼び出します。また、サーバー側の
Hideメソッドまたはクライアント側の
Hideメソッドで強制的に閉じることができます。
バルーンチップが表示されると
TipOpeningイベントが、バルーンチップが閉じたときには、
TipClosedイベントがクライアント側で発生します。
なお、バルーンチップエクステンダおよびバルーンチップを表示するコントロールがUpdatePanel上に配置されているときは、サーバー側で
TipOpeningおよび
TipClosedイベントが発生します。
以下は、テキストコントロール(GcTextBox1)に設定したバルーンチップを表示する例です。
' バルーンチップを表示します。
GcBalloonTip1.Show("GcTextBox1")
// バルーンチップを表示します。
GcBalloonTip1.Show("GcTextBox1");
// バルーンチップを表示します。
FindIMControl("GcBalloonTip1").Show("GcTextBox1");
バルーンチップを表示するとき、Showメソッドのパラメータ
TipPosition列挙体を使って、バルーンチップの表示位置を設定することができます。
メンバ名 |
説明 |
TopLeft |
コントロールの左上に表示します。 |
TopCenter |
コントロールの中央上に表示します。 |
TopRight |
コントロールの右上に表示します。 |
BottomLeft |
コントロールの左下に表示します。 |
BottomCenter |
コントロールの中央下に表示します。 |
BottomRight |
コントロールの右下に表示します。 |
以下は、テキストコントロール(GcTextBox1)に設定されているバルーンチップをコントロールの左下に表示する例です。
Imports GrapeCity.Web.Input.IMBalloonTip
' バルーンチップを表示します。
GcBalloonTip1.Show("GcTextBox1", TipPosition.BottomLeft)
using GrapeCity.Web.Input.IMBalloonTip;
// バルーンチップを表示します。
GcBalloonTip1.Show("GcTextBox1", TipPosition.BottomLeft);
// バルーンチップを表示します。
GcFindIMControl("BalloonTip1").Show("GcTextBox1", TipPosition.BottomLeft);
次のサンプルコードは、サーバー側でバルーンチップを表示する方法を示します。
Imports GrapeCity.Web.Input.IMBalloonTip
Protected Sub GcTextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GcTextBox1.TextChanged
If GcTextBox1.Text = "MyID" Then
' BalloonTipInfoオブジェクトを作成します。
Dim ti As New BalloonTipInfo
' バルーンチップの内容を設定します。
ti.Caption = "不正な入力"
ti.Icon = IconType.Warning
ti.Span = 3000
ti.Text = "このIDは既に登録されています。"
' バルーンチップエクステンダにBalloonTipInfoを設定します。
GcBalloonTip1.BalloonTipInfos.Add("GcTextBox1", ti)
'バルーンチップを表示します。
GcBalloonTip1.Show("GcTextBox1", TipPosition.TopRight)
End If
End Sub
using GrapeCity.Web.Input.IMBalloonTip;
private void GcTextBox1_TextChanged(object sender, System.EventArgs e)
{
if (GcTextBox1.Text == "MyID")
{
// BalloonTipInfoオブジェクトを作成します。
BalloonTipInfo ti = new BalloonTipInfo();
// バルーンチップの内容を設定します。
ti.Caption = "不正な入力";
ti.Icon = IconType.Exclamation;
ti.Span = 3000;
ti.Text = "このIDは既に登録されています。";
// バルーンチップエクステンダにBalloonTipInfoを設定します。
GcBalloonTip1.BalloonTipInfos.Add("GcTextBox1", ti);
// バルーンチップを表示します。
GcBalloonTip1.Show("GcTextBox1", TipPosition.TopRight);
}
}
次のサンプルコードは、クライアント側で不正入力時にバルーンチップを表示する例を示します。
function GcTextBox1_InvalidInput(sender, eArgs)
{
// BalloonTipInfoオブジェクトを作成します。
var tipInfo = new GCIM.BalloonTipInfo();
// バルーンチップの内容を設定します。
tipInfo.SetCaption("不正な入力");
tipInfo.SetIcon("exclamation");
tipInfo.SetSpan("3000");
tipInfo.SetText("ひらがな以外の入力はできません。");
// バルーンチップエクステンダにBalloonTipInfoを設定します。
var balloonTip = FindIMControl("GcBalloonTip1");
balloonTip.AddBalloonTipInfo("GcTextBox1", tipInfo);
// バルーンチップを表示します。
balloonTip.Show("GcTextBox1", TipPosition.TopRight);
}
BalloonTipInfoクラスの
CustomControlを使用することで、バルーンチップ内にコントロールを一つ表示することができます。また、配置したコントロールのサーバーおよびクライアントイベントを実装することも可能です。なお、この機能はサーバー側でのみサポートされています。
次のサンプルコードでは、バルーンチップ内に数値コントロールを使用し、テキストコントロールの最大文字数を設定する方法を示します。
Imports GrapeCity.Web.Input.IMBalloonTip
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
' 数値コントロールを表示します
GcNumber1.Visible = True
' バルーンチップの内容を設定します。
Dim ti As New BalloonTipInfo
ti.Text = "テキストコントロールに設定する最大文字数を入力してください。"
ti.AutoClose = False
ti.Span = 0
ti.CustomControl = GcNumber1
' テキストコントロールにバルーンチップを表示します。
GcBalloonTip1.Show("GcTextBox1", ti)
Else
' バルーンチップ表示時以外は数値コントロールを非表示に設定します。
GcNumber1.Visible = False
End If
End Sub
Protected Sub GcNumber1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GcNumber1.TextChanged
' テキストコントロールの最大文字数を設定します。
GcTextBox1.MaxLength = GcNumber1.Integer
End Sub
using GrapeCity.Web.Input.IMBalloonTip;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// 数値コントロールを表示します
GcNumber1.Visible = true;
// バルーンチップの内容を設定します。
BalloonTipInfo ti = new BalloonTipInfo();
ti.Caption = "設定";
ti.Text = "テキストコントロールに設定する最大文字数を入力してください。";
ti.AutoClose = false;
ti.Span = 0;
ti.CustomControl = GcNumber1;
// テキストコントロールにバルーンチップを表示します。
GcBalloonTip1.Show("GcTextBox1", ti);
}
else{
// バルーンチップ表示時以外は数値コントロールを非表示に設定します。
GcNumber1.Visible = false;
}
}
protected void GcNumber1_TextChanged(object sender, EventArgs e)
{
// テキストコントロールの最大文字数を設定します。
GcTextBox1.MaxLength = (int)GcNumber1.Integer;
}