★搜Asp.net★（www.soAsp.net），为专业技术文档网站。
包括Asp.net开发技术文档·C#开发技术文档·Access/SQL Server数据库开发技术文档·VB.NET开发技术文档。
还包括·项目实战经验总结·开发经验技巧总结·项目开发心得。

  
AJAX实现浮动窗口

实例说明

在电子商务类网站中，我们经常看到一个浮动窗口随着滚动条的改变而改变，并且在浮动窗口中显示各个部门即时通讯，如图所示。

图  浮动窗口

技术要点

ASP.NET AJAX Control Toolkit中的AlwaysVisibleControl控件，用来显示在页面上的一个相对固定位置，随着窗口的滚动和大小改变，它会随着移动，可以用来做浮动广告等。声明AlwaysVisibleControl控件的主要属性设置如下：

<atlasToolkit:AlwaysVisibleControlExtender ID="avce" runat="server">
      <atlasToolkit:AlwaysVisibleControlProperties
          TargetControlID="timer"
          VerticalSide="Top"
          VerticalOffset="10"
          HorizontalSide="Right"
          HorizontalOffset="10"
          ScrollEffectDuration=".1" />
  </atlasToolkit:AlwaysVisibleControlExtender>

AlwaysVisibleControl控件的主要属性说明如表所示。

表 AlwaysVisibleControl控件的主要属性说明

属性

说明

TargetControlID

目标控件ID，要浮动的控件

HorizontalOffset

距离浏览器的水平边距，默认值0px

HorizontalSide

水平停靠方向，默认值Left

VerticalOffset

距离浏览器的垂直边距，默认值0px

VerticalSide

垂直停靠方向，默认值Top

ScrollEffectDuration

滚动效果的延迟时间？单位为秒，默认值0.1

 

实现过程

（1）新建一个AJAX网站，将其命名为09，默认主页为Default.aspx。

（2）在Default.aspx中存在一个ScriptManager控件，然后再添加一个AlwaysVisibleControlExtender控件和Panel控件，其中ScriptManager控件用于管理页面中的AJAX控件，AlwaysVisibleControlExtender控件用于控制浮动窗口，Panel控件用于实现浮动窗口。

（4）程序实现主要代码如下：

        <cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
            TargetControlID="pAll" HorizontalOffset="10" VerticalOffset="50" HorizontalSide="left"
            VerticalSide="Top" ScrollEffectDuration="0.1">
        </cc1:AlwaysVisibleControlExtender>