HoverMenuExtender
来源:互联网 发布:动画制作简单软件 编辑:程序博客网 时间:2024/06/05 08:25
本章主要介绍HoverMenuExtender的使用方法。我们以前要做一个js下拉菜单会很麻烦,不但要写很多代码,而且写出来的代码不好管理,扩展性也很难做到很好。但现在我们有了HoverMenuExtender,一切都将迎刃而解,我们的口号是:不编码! 第一步:建立AJAX Control Toolkit Website 本例子只需要一个Panel控件、N个Linkbutton控件和一个HoverMenuExtender组件,把他们都拖进设计界面,代码如下所示: 在这里LinkButton1主要负责激活下拉菜单,而Panel1则是下拉菜单的载体。 完成控件布局后我们还需要写一个简单的样式,令界面更美观,具体代码如下: 注意:大家可以想象,既然Panel1是下拉菜单的载体,那么当菜单未被激活的时候,Panel1应该是隐藏着的,这些都通过 script Manager来控制。但当页面第一次加载,Ajax.net的脚本库还没完全加载完毕的时候,Panel1就会处于短暂的失控状态。如果网速较慢,我们会发现Panel1会先出现一下,然后再隐藏起来,这会影响页面的美观。所以我们应该在Panel1的样式上加上visibility:hidden,让Panel1一开始就处于隐藏状态。 第二步:配置HoverMenuExtender HoverMenuExtender同样是只需配置即可使用的组件,具体配置如下所示: OffsetX和OffsetY是指菜单在当前对齐方式下所处位置的偏移距离,OffsetX越大,菜单向左偏得移越大,OffsexY越大,菜单向下偏移得越大,单位是像素。PopDelay是指菜单消失的延迟时间,单位是毫秒。TargetControlID是指激活菜单的控件ID,这里应该是LinkButton1。PopupControlID是指菜单载体的控件ID, 这里是Panel1。最后的PopupPosition是指菜单相对于激活控件对齐方式,大家按照需要选择。 OK,运行,效果如下图: 鼠标移开后,菜单消失。 结束: 本章主要介绍了HoverMenuExtender的使用方法。HoverMenuExtender令我们可以轻松制作下拉菜单,而无需编写大量脚本代码。由于我们可以从后台访问菜单项,这使我们可以轻松从数据库中取出数据,并制作成下拉菜单。本章只是一个比较粗陋的例子,如果大家想把下拉菜单做得更炫,那需要对HoverMenuExtender进行更复杂的设置并结合更复杂的CSS样式。
- HoverMenuExtender
- HoverMenuExtender
- 使用HoverMenuExtender
- HoverMenuExtender控件CSS样式
- ajax HoverMenuExtender的应用
- 轻松掌握Ajax.net系列教程十三:使用HoverMenuExtender
- 轻松掌握Ajax.net系列教程十三:使用HoverMenuExtender
- 用C++ TR1 生成随机数
- 深圳的实习生活(1)
- TabContainer+TabPanel
- CollapsiblePanelExtender
- [日语二级语法]日语能力测试二级语法详解 2
- HoverMenuExtender
- AutoCompleteExtender
- [日语二级语法]日语能力测试二级语法详解 3
- DropDownExtender
- 关于c++对象全局对象析构的几点记录
- PopupControlExtender
- 实战Spring中AOP
- CalendarExtender
- ModalPopupExtender