Ajax Toolkit 控制項學習系列(7) ——HoverMenuExtender

　　HoverMenuExtender 控制項可以對一個Linkbutton，或者textbox等，在懸浮上面的時候，觸發這個控制項。

　　還是先看效果。

　　

　　起初，老樣子，提示輸入使用者名稱的一個textbox。然後，

　　

　　滑鼠移動到textbox範圍之後，觸發了這個控制項。這個控制項對textbox的css進行控制，改變了背景顏色，與此同時，panel開始可見。

　　

　　panel一直不變。輸入先關資訊。

　　HoverMenuExtender 幾個參數的說明：

• OffsetX
• OffsetY是指菜單在當前對齊下所處位置的位移距離，單位是像素。
• PopDelay是指菜單消失的延遲時間，單位是毫秒。
• TargetControlID是指啟用菜單的控制項ID
• PopupControlID是指菜單載體的控制項ID
• PopupPosition是指菜單相對於啟用控制項對齊

　　剩下的基本沒有太多好說的。本例還是採用2個Ajax控制項。只要參數明確了，什麼都好說。都可以對Css進行改變，以達到更加好的效果。

　　當然了，我們也可以使用後台代碼對Hover進行控制的。

　　

Code
            this.hover.PopupControlID = "";
this.hover.PopupPosition = "";
this.hover.TargetControlID = "";

 

　　

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="panel" runat="server" Width="100px" Height="100px" CssClass ="panel">
                    你的使用者名稱</asp:Panel>
<asp:TextBox ID="tb" runat="server"></asp:TextBox>
<ajax:TextBoxWatermarkExtender ID="tbwe" runat="server" TargetControlID="tb" WatermarkCssClass="textbox"
                    WatermarkText="input your username">
</ajax:TextBoxWatermarkExtender>
<ajax:HoverMenuExtender ID="hover" runat="server" TargetControlID="tb" PopupPosition="Bottom"
                    PopupControlID="panel" HoverCssClass="hover">
</ajax:HoverMenuExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>