轻松掌握Ajax.net系列教程八：使用AlwaysVisibleControlExtender

本章介绍AlwaysVisibleControlExtender的使用方法，AlwaysVisibleControlExtender是一个非常简单的组件，不用编码只需简单的设置就可使用。大家可能还不知道什么是AlwaysVisibleControlExtender，但大家一定见过漂浮在网页两边，跟随着滚动条滚动的悬浮广告。对了，AlwaysVisibleControlExtender能使你轻松实现相同的效果，而不需编写任何JS代码。

第一步：建立AJAX Control Toolkit网站

这个例子需要的控件很少，只需要一个Panel控件和一个组件。同时我们还需要一段长篇大论的文章，使页面出现滚动条。如下图所示：



第二步：设置AlwaysVisibleControlExtender

我们切换到源码模式，对AlwaysVisibleControlExtender进行设置，具体设置如下：

[align=left]<asp:Panel BackColor="#666666" ForeColor="#ffffff" ID="Panel1" runat="server" Height="120px" Width="210px">[/align]
[align=left] 这个Panel用了AlwaysVisibleControlExtender，因此它总会漂浮在一个地方……</asp:Panel>[/align]
[align=left] [/align]
[align=left] <ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"[/align]
[align=left] TargetControlID="Panel1" VerticalSide="top" HorizontalSide="right" VerticalOffset="50" HorizontalOffset="50"[/align]
[align=left] ScrollEffectDuration="1">[/align]
</ajaxToolkit:AlwaysVisibleControlExtender>
以上同时贴出了Panel部分的代码，方便大家参考。

首先设置TargetControlID，当然是Panel1了。VerticalSide指垂直停靠位置，大家可以选择Top、Middel或Bottom。HorizontalSide指水平停靠位置，可以选择Left、Center或Right。VerticalOffset是指垂直边距，该属性根据VerticalSide的选择而不同。例如当VerticalSide=Top时，VerticalOffset=50即离浏览器上部边缘50像素；当VerticalSide=Bottom时，VerticalOffset=50即离浏览器底部边缘50像素，大家自己试验一下。HorizontalOffset和VerticalOffset类似，这里不再重复解释了。ScrollEffectDuration指滑动的延迟时间，数值越大滑动得越慢但越平滑，单位是秒。

设置完毕后即可运行！效果如下：



向下拉一下滚动条，怎么也甩不掉那个Panel。



结束：

本章介绍了AlwaysVisibleControlExtender的使用方法，使用它你能快速做出自己的浮动面板，而且还可以通过后台代码控制它的相关属性。更多的用法请大家自己摸索，这里就不再展开了。

由于asp.net的官网删掉了相关的视频链接，因此从本章开始不再提供视频下载地址，望大家见谅~~

TrackBack：http://www.cnblogs.com/sbitxg521/archive/2007/12/29/1020293.html