Ajax Control Toolkit BalloonPopup的使用實例及效果

2020-01-18 00:12:32

字體：大中小

供稿：網(wǎng)友

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

BalloonPopup 控件簡介

BalloonPopup 控件可以顯示一個彈出層，里面可以包含很多內(nèi)容。例如，當用戶將鼠標移動到一個文本框上時，可以使用此控件為用戶顯示一些幫助信息。

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

BalloonPopup 控件使用方法

1.向頁面添加 ToolkitScriptManager 控件，用于向頁面注冊控件所需要的腳本；

復制代碼代碼如下:

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

2.添加 Panel 控件充當容器，用于容納提示內(nèi)容；

復制代碼代碼如下:

<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.運行頁面，將看到如下效果：