Ajax Control Toolkit BalloonPopup的使用執行個體及效果

來源:互聯網
上載者:User

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 樣本網站。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.