AlwaysVisibleControl是AtlasControlToolkit中的一个简单的Extender,用来显示在页面上的一个相对固定位置,随着窗口的滚动和大小改变,它会随着移动,可以用来做浮动广告等。 主要内容1.AlwaysVisibleControlExtender介绍2.完整示例 一.AlwaysVisibleControlExtender介绍AlwaysVisibleCo
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)
{
{
protected void OnChange(object sender, EventArgs e)
{
AlwaysVisibleControlProperties properties = avce.GetTargetProperties(timer);
switch (ddlPosition.SelectedValue)
{
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;
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
原标题:Atlas学习手记(10):使用AlwaysVisibleControlExtender
关键词:atlas
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。