Ajax Control Toolkit BalloonPopup的使用執行個體及效果_實用技巧

Ajax Control Toolkit 工具包的簡介及擷取方式等，請參見本系列的另一篇隨筆：Ajax Control Toolkit使用執行個體(1) AutoCompleteExtender。

BalloonPopup 控制項簡介

BalloonPopup 控制項可以顯示一個彈出層，裡面可以包含很多內容。例如，當使用者將滑鼠移動到一個文字框上時，可以使用此控制項為使用者顯示一些協助資訊。

BalloonPopup 控制項支援三種樣式（BalloonStyle）：氣球樣式（Balloon）、矩形樣式（Rectangle）還有使用者自訂樣式（Custom）。彈出層的大小也有三種型號：小號（Small）、中號（ Medium），大號（ Large）。如果你將 BalloonStyle 屬性設定為Custom，那樣你需要將CustomCssUrl屬性值設定為自訂樣式表的路徑。

BalloonPopup 控制項使用方法

1.向頁面添加 ToolkitScriptManager 控制項，用於向頁面註冊控制項所需要的指令碼；

複製代碼 代碼如下:

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">ajaxToolkit:ToolkitScriptManager>

2.添加 Panel 控制項充當容器，用於容納提示內容；

複製代碼 代碼如下:

<asp:Panel runat="server" ID="messagePanel">   
小丸子，我給你講個笑話吧~~
<asp:Image runat="server" ImageUrl="~/Images/微笑.gif" ImageAlign="AbsMiddle" />asp:Panel>

3.添加 BalloonPopupExtender 控制項，定製樣式、繫結目標控制項及提示資訊容器等；

複製代碼 代碼如下:

<ajaxToolkit:BalloonPopupExtender runat="server" ID="BalloonPopupExtender1"
Position="TopLeft"               
TargetControlID="Image2"               
BalloonPopupControlID="Panel1"
BalloonSize="Small"             
BalloonStyle="Cloud"          
DisplayOnMouseOver="True" />

4.運行頁面，將看到如下效果：

更多使用方法，請參見 Ajax Control Toolkit 樣本網站。