在页面上显示一个相对固定位置,随着窗口的滚动和大小改变,它会随着移动,可以用来做浮动广告等。
属性:
TargetControlID : 目标控件ID,要浮动的控件。
HorizontalOffset : 距离浏览器的水平边距,默认值0px。
HorizontalSide : 水平停靠方向,默认值Left。。
VerticalOffset : 距离浏览器的垂直边距,默认值0px。
VerticalSide : 垂直停靠方向,默认值Top。
ScrollEffectDuration : 滚动效果的延迟时间?单位为秒,默认值0.1。
实例代码:
前台代码如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>范例如何使用AlwaysVisibleControl控件</title>
<link href="style.css" type="text/css" rel="Stylesheet" />
</head>
<body onload="focus();">
<div class="banner">
<a href="http://abcdwxc.cnblogs.com/" target="_blank"> AlwaysVisibleControlExtender控件实例-------王晓成的博客<br /><br />
</a>
</div>
<div class="description">
<ul>
<li>请选取<strong>[显示的位置]</strong>下拉框来指定欲显示系统状态的位置,然后请调整浏览器窗口大小或移动浏览器的滚动条来看看这个控件的效果。 </li>
<li>每隔 1 秒钟系统状态会自动更新。</li>
</ul>
</div>
<p />
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="370px"
BackColor="White" ForeColor="Blue" BorderWidth="2" BorderStyle="dashed"
BorderColor="DarkBlue" Style="opacity:85; filter:alpha(opacity=85);">
<strong>选择下拉框的值,此处会在不同的位置显示</strong>
</asp:Panel>
<ajaxToolkit:AlwaysVisibleControlExtender ID="avce"
runat="server"
TargetControlID="Panel1"
VerticalSide="Top"
VerticalOffset="10"
HorizontalSide="Right"
HorizontalOffset="10"
ScrollEffectDuration="1" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
</div>
<p />
<asp:Timer ID="Timer1" runat="server" Interval="1000">
</asp:Timer>
显示的位置:<asp:DropDownList ID="ddlPosition"
runat="server"
OnSelectedIndexChanged="ChangePosition">
<%-- 「回归原位」是预设的选项,且其 Value 是空的 --%>
<asp:ListItem Text="回归原位" Value="" Selected="true" />
<asp:ListItem Text="左侧上方" Value="TL" />
<asp:ListItem Text="中央上方" Value="TC" />
<asp:ListItem Text="右侧上方" Value="TR" />
<asp:ListItem Text="左侧中间" Value="ML" />
<asp:ListItem Text="中央中间" Value="MC" />
<asp:ListItem Text="右侧中间" Value="MR" />
<asp:ListItem Text="左侧下方" Value="BL" />
<asp:ListItem Text="中央下方" Value="BC" />
<asp:ListItem Text="右侧下方" Value="BR" />
</asp:DropDownList>
</form>
<hr />
</body>
</html>
后台代码如下:<head id="Head1" runat="server">
<title>范例如何使用AlwaysVisibleControl控件</title>
<link href="style.css" type="text/css" rel="Stylesheet" />
</head>
<body onload="focus();">
<div class="banner">
<a href="http://abcdwxc.cnblogs.com/" target="_blank"> AlwaysVisibleControlExtender控件实例-------王晓成的博客<br /><br />
</a>
</div>
<div class="description">
<ul>
<li>请选取<strong>[显示的位置]</strong>下拉框来指定欲显示系统状态的位置,然后请调整浏览器窗口大小或移动浏览器的滚动条来看看这个控件的效果。 </li>
<li>每隔 1 秒钟系统状态会自动更新。</li>
</ul>
</div>
<p />
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="370px"
BackColor="White" ForeColor="Blue" BorderWidth="2" BorderStyle="dashed"
BorderColor="DarkBlue" Style="opacity:85; filter:alpha(opacity=85);">
<strong>选择下拉框的值,此处会在不同的位置显示</strong>
</asp:Panel>
<ajaxToolkit:AlwaysVisibleControlExtender ID="avce"
runat="server"
TargetControlID="Panel1"
VerticalSide="Top"
VerticalOffset="10"
HorizontalSide="Right"
HorizontalOffset="10"
ScrollEffectDuration="1" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
</div>
<p />
<asp:Timer ID="Timer1" runat="server" Interval="1000">
</asp:Timer>
显示的位置:<asp:DropDownList ID="ddlPosition"
runat="server"
OnSelectedIndexChanged="ChangePosition">
<%-- 「回归原位」是预设的选项,且其 Value 是空的 --%>
<asp:ListItem Text="回归原位" Value="" Selected="true" />
<asp:ListItem Text="左侧上方" Value="TL" />
<asp:ListItem Text="中央上方" Value="TC" />
<asp:ListItem Text="右侧上方" Value="TR" />
<asp:ListItem Text="左侧中间" Value="ML" />
<asp:ListItem Text="中央中间" Value="MC" />
<asp:ListItem Text="右侧中间" Value="MR" />
<asp:ListItem Text="左侧下方" Value="BL" />
<asp:ListItem Text="中央下方" Value="BC" />
<asp:ListItem Text="右侧下方" Value="BR" />
</asp:DropDownList>
</form>
<hr />
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
avce.Enabled = false;
}
}
protected void ChangePosition(object sender, EventArgs e)
{
avce.Enabled = true;
switch (ddlPosition.SelectedValue)
{
case "TL":
avce.VerticalSide = VerticalSide.Top;
avce.HorizontalSide = HorizontalSide.Left;
break;
case "TC":
avce.VerticalSide = VerticalSide.Top;
avce.HorizontalSide = HorizontalSide.Center;
break;
case "TR":
avce.VerticalSide = VerticalSide.Top;
avce.HorizontalSide = HorizontalSide.Right;
break;
case "ML":
avce.VerticalSide=VerticalSide.Middle;
avce.HorizontalSide=HorizontalSide.Left;
break;
case "MC":
avce.VerticalSide=VerticalSide.Middle;
avce.HorizontalSide=HorizontalSide.Center;
break;
case "MR":
avce.VerticalSide=VerticalSide.Middle;
avce.HorizontalSide=HorizontalSide.Right;
break;
case "BL":
avce.VerticalSide = VerticalSide.Bottom;
avce.HorizontalSide = HorizontalSide.Left;
break;
case "BC":
avce.VerticalSide=VerticalSide.Bottom;
avce.HorizontalSide=HorizontalSide.Center;
break;
case "BR":
avce.VerticalSide = VerticalSide.Bottom;
avce.HorizontalSide = HorizontalSide.Right;
break;
default:
avce.Enabled = false;
break;
}
}
}
运行结果如下:{
if (!IsPostBack)
{
avce.Enabled = false;
}
}
protected void ChangePosition(object sender, EventArgs e)
{
avce.Enabled = true;
switch (ddlPosition.SelectedValue)
{
case "TL":
avce.VerticalSide = VerticalSide.Top;
avce.HorizontalSide = HorizontalSide.Left;
break;
case "TC":
avce.VerticalSide = VerticalSide.Top;
avce.HorizontalSide = HorizontalSide.Center;
break;
case "TR":
avce.VerticalSide = VerticalSide.Top;
avce.HorizontalSide = HorizontalSide.Right;
break;
case "ML":
avce.VerticalSide=VerticalSide.Middle;
avce.HorizontalSide=HorizontalSide.Left;
break;
case "MC":
avce.VerticalSide=VerticalSide.Middle;
avce.HorizontalSide=HorizontalSide.Center;
break;
case "MR":
avce.VerticalSide=VerticalSide.Middle;
avce.HorizontalSide=HorizontalSide.Right;
break;
case "BL":
avce.VerticalSide = VerticalSide.Bottom;
avce.HorizontalSide = HorizontalSide.Left;
break;
case "BC":
avce.VerticalSide=VerticalSide.Bottom;
avce.HorizontalSide=HorizontalSide.Center;
break;
case "BR":
avce.VerticalSide = VerticalSide.Bottom;
avce.HorizontalSide = HorizontalSide.Right;
break;
default:
avce.Enabled = false;
break;
}
}
}