Atlas学习手记（10）：使用AlwaysVisibleControl Extender
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:
