轻松掌握Ajax.net系列教程十三：使用HoverMenuExtender

雨点打透心脏的1/2处 2021-12-17 16:17 136阅读 0赞

本章主要介绍HoverMenuExtender的使用方法。我们以前要做一个js下拉菜单会很麻烦，不但要写很多代码，而且写出来的代码不好管理，扩展性也很难做到很好。但现在我们有了HoverMenuExtender，一切都将迎刃而解，我们的口号是：不编码！

**第一步：建立AJAX Control Toolkit Website**

本例子只需要一个Panel控件、N个Linkbutton控件和一个HoverMenuExtender组件，把他们都拖进设计界面，代码如下所示：

<asp:PanelBorderWidth=1px ID="Panel1" runat="server" Height="50px" Width="125px" CssClass="panel">

<asp:LinkButton ID="LinkButton2" runat="server">长江一号</asp:LinkButton>

<asp:LinkButton ID="LinkButton3" runat="server">长江二号</asp:LinkButton>

<asp:LinkButton ID="LinkButton4" runat="server">长江三号</asp:LinkButton>

<asp:LinkButton ID="LinkButton5" runat="server">长江四号</asp:LinkButton>

</asp:Panel>

<asp:LinkButtonID="LinkButton1" runat="server">鼠标放上来就能看到HoverMenu啦！

</asp:LinkButton>

在这里LinkButton1主要负责激活下拉菜单，而Panel1则是下拉菜单的载体。

完成控件布局后我们还需要写一个简单的样式，令界面更美观，具体代码如下：

.panel

background:\#ffcc00;

filter:alpha(opacity=80);

border-width:1px;

border-color:\#000000;

font-size:12px;

visibility:hidden;

**注意：**大家可以想象，既然Panel1是下拉菜单的载体，那么当菜单未被激活的时候，Panel1应该是隐藏着的，这些都通过ScriptManager来控制。但当页面第一次加载，Ajax.net的脚本库还没完全加载完毕的时候，Panel1就会处于短暂的失控状态。如果网速较慢，我们会发现Panel1会先出现一下，然后再隐藏起来，这会影响页面的美观。所以我们应该在Panel1的样式上加上visibility:hidden，让Panel1一开始就处于隐藏状态。

**第二步：配置HoverMenuExtender**

HoverMenuExtender同样是只需配置即可使用的组件，具体配置如下所示：

<ajaxToolkit:HoverMenuExtender

OffsetX="10"

OffsetY="10"

PopDelay="1000"

ID="HoverMenuExtender1"

runat="server"

TargetControlID="LinkButton1"

PopupControlID="Panel1"

PopupPosition="bottom">

</ajaxToolkit:HoverMenuExtender>

OffsetX和OffsetY是指菜单在当前对齐方式下所处位置的偏移距离，OffsetX越大，菜单向左偏得移越大，OffsexY越大，菜单向下偏移得越大，单位是像素。PopDelay是指菜单消失的延迟时间，单位是毫秒。TargetControlID是指激活菜单的控件ID，这里应该是LinkButton1。PopupControlID是指菜单载体的控件ID， 这里是Panel1。最后的PopupPosition是指菜单相对于激活控件对齐方式，大家按照需要选择。

OK，运行，效果如下图：

![g200787235755.jpg][]

鼠标移开后，菜单消失。

![i200787235837.jpg][]

**结束：**

本章主要介绍了HoverMenuExtender的使用方法。HoverMenuExtender令我们可以轻松制作下拉菜单，而无需编写大量脚本代码。由于我们可以从后台访问菜单项，这使我们可以轻松从数据库中取出数据，并制作成下拉菜单。本章只是一个比较粗陋的例子，如果大家想把下拉菜单做得更炫，那需要对HoverMenuExtender进行更复杂的设置并结合更复杂的CSS样式。

TrackBack：[http://www.cnblogs.com/sbitxg521/archive/2007/12/29/1020313.html][http_www.cnblogs.com_sbitxg521_archive_2007_12_29_1020313.html]

转载于:https://www.cnblogs.com/hdjjun/archive/2008/06/17/1223672.html

[g200787235755.jpg]: http://www.falaosao.net/attachments/All_Files/g200787235755.jpg
[i200787235837.jpg]: http://www.falaosao.net/attachments/All_Files/i200787235837.jpg
[http_www.cnblogs.com_sbitxg521_archive_2007_12_29_1020313.html]: http://www.cnblogs.com/sbitxg521/archive/2007/12/29/1020313.html