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