HoverMenuExtender应用

AjaxControlToolkit控件,当然是在Ajax下应用。在aspx页面或母版页中应该要写上:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

TargetControlID指定要显示信息的控件,PopupControlID指定鼠标移动上时显示的信息。

<asp:Label id="Label30" runat="server" ForeColor="Blue" Text="帮助!"></asp:Label>
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="Label30" PopupControlID="pMessage" PopupPosition="Right" OffsetX="0" OffsetY="15">
</cc1:HoverMenuExtender>

以下为显示信息的Panel。

<asp:Panel ID="pMessage" runat="server" CssClass="HoverMenuStyle" Width="300px">
    <div>
     <div style=" text-align:center"><strong>
        使用帮助</strong></div>
        ...
</div> </asp:Panel>

Css如下:

.HoverMenuStyle
{
     filter:alpha(opacity=70); /*IE*/
     -moz-opacity:0.7; /*MOZ , FF*/
     opacity:0.7; /*CSS3, FF1.5*/
     background: #fff6bf;           
     text-align: left;
     padding: 5px;
     border: 1px solid #ffd324; 
     z-index: 1;
     color:MenuText;
}

效果图:

posted @ 2013-01-11 08:56  爱智旮旯  阅读(482)  评论(0编辑  收藏  举报