Atlas学习手记（10）：使用AlwaysVisibleControl Extender

转自 TerryLee技术空间
AlwaysVisibleControl是AtlasControlToolkit中的一个简单的Extender，用来显示在页面上的一个相对固定位置，随着窗口的滚动和大小改变，它会随着移动，可以用来做浮动广告等。

 

主要内容

1．AlwaysVisibleControlExtender介绍

2．完整示例

 

一．AlwaysVisibleControlExtender介绍

AlwaysVisibleControl中的一个简单的Extender，用来显示在页面上的一个相对固定位置，随着窗口的滚动和大小改变，它会随着移动，可以用来做浮动广告等。示例代码如下：

< atlasToolkit:AlwaysVisibleControlExtender  ID ="avce"  runat ="server" >

     < atlasToolkit:AlwaysVisibleControlProperties

         TargetControlID ="timer"

        VerticalSide ="Top"

        VerticalOffset ="10"

        HorizontalSide ="Right"

        HorizontalOffset ="10"

        ScrollEffectDuration =".1"   />

</ atlasToolkit:AlwaysVisibleControlExtender >

它的属性如下：

属性	说明
TargetControlID	目标控件ID，要浮动的控件
HorizontalOffset	距离浏览器的水平边距，默认值0px
HorizontalSide	水平停靠方向，默认值Left
VerticalOffset	距离浏览器的垂直边距，默认值0px
VerticalSide	垂直停靠方向，默认值Top
ScrollEffectDuration	滚动效果的延迟时间？单位为秒，默认值0.1

二．完整示例

下面看一个完整的AlwaysVisibleControlExtender示例[来自于Atlas官方网站]，新建一个Atlas Web Site后，在页面中添加这句：

<% @ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit"  %>

添加ScriptManager

< atlas:ScriptManager  ID ="ScriptManager1"  runat ="server"  EnablePartialRendering ="true" >

</ atlas:ScriptManager >

这里浮动的是一个Panel，需要在页面上始终显示的控件我们都放在该Panel中，这里用一个Div显示了当前的时间：

< asp:Panel  ID ="timer"  runat ="server"

    Width ="200px"  BackColor ="White"  ForeColor ="Green"

    BorderWidth ="1"  BorderStyle ="solid"  BorderColor ="Red"  style ="z-index: 1;" >

     < div  style ="width: 100%; height: 100%; vertical-align: middle; text-align: center;" >

     < span > Current Time: </ span >              

    < span  id ="currentTime"  runat ="server"  style ="font-size:x-large;font-weight:bold;line-height:40px;" />

     </ div >

</ asp:Panel >

现在就可以加入主角AlwaysVisibleControlExtender了，并添加AlwaysVisibleControlProperties，设置属性如下：

< atlasToolkit:AlwaysVisibleControlExtender  ID ="avce"  runat ="server"   >

     < atlasToolkit:AlwaysVisibleControlProperties

         TargetControlID ="timer"

        VerticalSide ="Top"

        VerticalOffset ="10"

        HorizontalSide ="Right"

        HorizontalOffset ="10"

        ScrollEffectDuration ="0.1"   />

</ atlasToolkit:AlwaysVisibleControlExtender >

为了演示各个位置的停靠，再加入一个DropDownList：

Position:  < asp:DropDownList  ID ="ddlPosition"  runat ="server"  

    AutoPostBack ="true"  OnSelectedIndexChanged ="OnChange" >

     < asp:ListItem  Text ="Default"  Selected ="true"   Value ="None"   />

     < asp:ListItem  Text ="Top Left"  Value ="TL"   />

     < asp:ListItem  Text ="Top Right"   Value ="TR"   />

     < asp:ListItem  Text ="Bottom Left"  Value ="BL"   />

     < asp:ListItem  Text ="Bottom Right"  Value ="BR"   />

</ asp:DropDownList >

为了选择时不刷新页面，我们再加入一个UpdatePanel：

< atlas:UpdatePanel  ID ="update"  runat ="server"  Mode ="Conditional" >

     < ContentTemplate >

       ……

     </ ContentTemplate >

     < Triggers >                 

         < atlas:ControlEventTrigger  ControlID ="ddlPosition"  EventName ="SelectedIndexChanged"   />

     </ Triggers >

</ atlas:UpdatePanel >

然后编写相关的代码：

protected   void  Page_Load( object  sender, EventArgs e)

{
    if (!IsPostBack)

    {
        avce.TargetProperties.Clear();
    }
}

protected   void  OnChange( object  sender, EventArgs e)

{
    // Change the position to the user's selection

    AlwaysVisibleControlProperties properties = avce.GetTargetProperties(timer);

    switch (ddlPosition.SelectedValue)

    {
        case "TL":

            properties.VerticalSide = VerticalSide.Top;

            properties.HorizontalSide = HorizontalSide.Left;

            break;

        case "TR":

            properties.VerticalSide = VerticalSide.Top;

            properties.HorizontalSide = HorizontalSide.Right;

            break;

        case "BL":

            properties.VerticalSide = VerticalSide.Bottom;

            properties.HorizontalSide = HorizontalSide.Left;

            break;

        case "BR":

            properties.VerticalSide = VerticalSide.Bottom;

            properties.HorizontalSide = HorizontalSide.Right;

            break;

        default:

            avce.TargetProperties.Clear();

            break;
    }
}

编写JS代码控制时间的更新：

< script  type ="text/javascript"  language ="javascript" >

    updateTime();

    window.setInterval(updateTime, 1000);

    function updateTime()

    {

        var label = document.getElementById("currentTime");

        if (label) {

            label.innerText = (new Date()).toLocaleTimeString();

        }

    }

</ script >

至此整个示例就完成了，编译运行：

Top Right:

Bottom Right:

Bottom Left:

完整示例下载：http://www.cnblogs.com//Files/Terrylee/AlwaysVisibleControlDemo.rar