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进行控制的。

　　

            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>