程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> ASP.NET基礎 >> Ajax Control Toolkit BalloonPopup的使用實例及效果

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

編輯:ASP.NET基礎

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 示例站點。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved