AjaxControlToolkit学习系列(2) AlwaysVisibleControlExtender

本章介绍AlwaysVisibleControlExtender的使用方法，大家一定见过漂浮在网页两边，跟随着滚动条滚动的悬浮广告。对了，AlwaysVisibleControlExtender

能使你轻松实现相同的效果。

该例子动态显示当前时间:

首先设置TargetControlID，当然是Panel2了。VerticalSide指垂直停靠位置，大家可以选择Top、Middel或Bottom。HorizontalSide指水平停靠位置，可以选择Left、

Center或Right。VerticalOffset是指垂直边距，该属性根据VerticalSide的选择而不同。例如当VerticalSide=Top时，VerticalOffset=50即离浏览器上部边缘50像素；

当VerticalSide=Bottom时，VerticalOffset=50即离浏览器底部边缘50像素，大家自己试验一下。HorizontalOffset和VerticalOffset类似，这里不再重复解释了。

ScrollEffectDuration指滑动的延迟时间，数值越大滑动得越慢但越平滑，单位是秒。

 

复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AlwaysVisibleControl.aspx.cs"
    Inherits="AlwaysVisibleControl" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <br />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.<br />
        <br />
        <br />
        <br />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.<br />
        <br />
        <br />
        <br />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.<br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.<br />
        <br />
        <br />
        <br />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.<br />
        <br />
        <br />
        <br />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.<br />
        <br />
        <br />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.<br />
        <br />
        <br />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.<br />
        <br />
    </div>
    <asp:Panel runat="server" ID="p2">
        <asp:Panel ID="p1" runat="server">
            <div id="txt">
                <%= DateTime.Now.ToString() %>
            </div>
        </asp:Panel>
    </asp:Panel>
    <cc1:AlwaysVisibleControlExtender VerticalSide="top" VerticalOffset="100" HorizontalSide="Right"
        TargetControlID="p2" ID="AlwaysVisibleControlExtender1" runat="server">
    </cc1:AlwaysVisibleControlExtender>
    <%-- 此代码允许拖拽   <cc1:DragPanelExtender TargetControlID="p1" DragHandleID="p1" ID="DragPanelExtender1"
        runat="server">
    </cc1:DragPanelExtender>--%>
    </form>
</body>

<script type="text/javascript">
function startTime()
{
var today=new Date()
var year=today.getFullYear();
var month=today.getMonth()+1;
var day=today.getDate();

var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
year=checkTime(year);
month=checkTime(month);
day=checkTime(day);
m=checkTime(m)
s=checkTime(s)
    if(document.getElementById('txt')!=null)
    {
    document.getElementById('txt').innerHTML="<h1>"+year+"-"+month+"-"+day+"  "+ h+":"+m+":"+s+"</h1>";
    t=setTimeout('startTime()',500)
    }
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
startTime();
</script>

</html>
复制代码

 

posted @   Cat Qi  阅读(440)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
SQL AI 助手