星空网 > 软件开发 > ajax

Atlas学习手记(10):使用AlwaysVisibleControlExtender

AlwaysVisibleControl是AtlasControlToolkit中的一个简单的Extender,用来显示在页面上的一个相对固定位置,随着窗口的滚动和大小改变,它会随着移动,可以用来做浮动广告等。

 

主要内容

1.AlwaysVisibleControlExtender介绍

2.完整示例

 

一.AlwaysVisibleControlExtender介绍

AlwaysVisibleControl中的一个简单的Extender,用来显示在页面上的一个相对固定位置,随着窗口的滚动和大小改变,它会随着移动,可以用来做浮动广告等。示例代码如下:

Atlas学习手记(10):使用AlwaysVisibleControlExtender<atlasToolkit:AlwaysVisibleControlExtender ID="avce" runat="server">
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <atlasToolkit:AlwaysVisibleControlProperties
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        TargetControlID="timer"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        VerticalSide="Top"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        VerticalOffset="10"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        HorizontalSide="Right"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        HorizontalOffset="10"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        ScrollEffectDuration=".1" />
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender</atlasToolkit:AlwaysVisibleControlExtender>

它的属性如下:

属性

说明

TargetControlID

目标控件ID,要浮动的控件

HorizontalOffset

距离浏览器的水平边距,默认值0px

HorizontalSide

水平停靠方向,默认值Left

VerticalOffset

距离浏览器的垂直边距,默认值0px

VerticalSide

垂直停靠方向,默认值Top

ScrollEffectDuration

滚动效果的延迟时间?单位为秒,默认值0.1

二.完整示例

下面看一个完整的AlwaysVisibleControlExtender示例[来自于Atlas官方网站],新建一个Atlas Web Site后,在页面中添加这句:

Atlas学习手记(10):使用AlwaysVisibleControlExtenderAtlas学习手记(10):使用AlwaysVisibleControlExtender<%Atlas学习手记(10):使用AlwaysVisibleControlExtender@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>

添加ScriptManager

Atlas学习手记(10):使用AlwaysVisibleControlExtender<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender</atlas:ScriptManager>

这里浮动的是一个Panel,需要在页面上始终显示的控件我们都放在该Panel中,这里用一个Div显示了当前的时间:

Atlas学习手记(10):使用AlwaysVisibleControlExtender<asp:Panel ID="timer" runat="server"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    Width="200px" BackColor="White" ForeColor="Green"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    BorderWidth="1" BorderStyle="solid" BorderColor="Red" style="z-index: 1;">
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <div style="width: 100%; height: 100%; vertical-align: middle; text-align: center;">
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <span>Current Time:</span>             
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender   <span id="currentTime" runat="server" style="font-size:x-large;font-weight:bold;line-height:40px;"/>
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    </div>
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender</asp:Panel>

现在就可以加入主角AlwaysVisibleControlExtender了,并添加AlwaysVisibleControlProperties,设置属性如下:

Atlas学习手记(10):使用AlwaysVisibleControlExtender<atlasToolkit:AlwaysVisibleControlExtender ID="avce" runat="server" >
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <atlasToolkit:AlwaysVisibleControlProperties
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        TargetControlID="timer"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        VerticalSide="Top"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        VerticalOffset="10"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        HorizontalSide="Right"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        HorizontalOffset="10"
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        ScrollEffectDuration="0.1" />
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender</atlasToolkit:AlwaysVisibleControlExtender>

为了演示各个位置的停靠,再加入一个DropDownList:

Atlas学习手记(10):使用AlwaysVisibleControlExtenderPosition: <asp:DropDownList ID="ddlPosition" runat="server" 
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    AutoPostBack="true" OnSelectedIndexChanged="OnChange">
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <asp:ListItem Text="Default" Selected="true"  Value="None" />
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <asp:ListItem Text="Top Left" Value="TL" />
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <asp:ListItem Text="Top Right"  Value="TR" />
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <asp:ListItem Text="Bottom Left" Value="BL" />
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <asp:ListItem Text="Bottom Right" Value="BR" />
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender</asp:DropDownList>

为了选择时不刷新页面,我们再加入一个UpdatePanel:

Atlas学习手记(10):使用AlwaysVisibleControlExtender<atlas:UpdatePanel ID="update" runat="server" Mode="Conditional">
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <ContentTemplate>
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender       ……
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    </ContentTemplate>
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    <Triggers>                
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        <atlas:ControlEventTrigger ControlID="ddlPosition" EventName="SelectedIndexChanged" />
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    </Triggers>
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender</atlas:UpdatePanel>

然后编写相关的代码:

Atlas学习手记(10):使用AlwaysVisibleControlExtenderprotected void Page_Load(object sender, EventArgs e)
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtenderAtlas学习手记(10):使用AlwaysVisibleControlExtenderAtlas学习手记(10):使用AlwaysVisibleControlExtender{
Atlas学习手记(10):使用AlwaysVisibleControlExtender    if (!IsPostBack)
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtenderAtlas学习手记(10):使用AlwaysVisibleControlExtender    Atlas学习手记(10):使用AlwaysVisibleControlExtender{
Atlas学习手记(10):使用AlwaysVisibleControlExtender        avce.TargetProperties.Clear();
Atlas学习手记(10):使用AlwaysVisibleControlExtender    }
Atlas学习手记(10):使用AlwaysVisibleControlExtender}
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtenderprotected void OnChange(object sender, EventArgs e)
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtenderAtlas学习手记(10):使用AlwaysVisibleControlExtenderAtlas学习手记(10):使用AlwaysVisibleControlExtender{
Atlas学习手记(10):使用AlwaysVisibleControlExtender    // Change the position to the user's selection
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    AlwaysVisibleControlProperties properties = avce.GetTargetProperties(timer);
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    switch (ddlPosition.SelectedValue)
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtenderAtlas学习手记(10):使用AlwaysVisibleControlExtender    Atlas学习手记(10):使用AlwaysVisibleControlExtender{
Atlas学习手记(10):使用AlwaysVisibleControlExtender        case "TL":
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            properties.VerticalSide = VerticalSide.Top;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            properties.HorizontalSide = HorizontalSide.Left;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            break;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        case "TR":
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            properties.VerticalSide = VerticalSide.Top;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            properties.HorizontalSide = HorizontalSide.Right;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            break;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        case "BL":
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            properties.VerticalSide = VerticalSide.Bottom;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            properties.HorizontalSide = HorizontalSide.Left;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            break;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        case "BR":
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            properties.VerticalSide = VerticalSide.Bottom;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            properties.HorizontalSide = HorizontalSide.Right;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            break;
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        default:
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            avce.TargetProperties.Clear();
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            break;
Atlas学习手记(10):使用AlwaysVisibleControlExtender    }
Atlas学习手记(10):使用AlwaysVisibleControlExtender}

编写JS代码控制时间的更新:

Atlas学习手记(10):使用AlwaysVisibleControlExtenderAtlas学习手记(10):使用AlwaysVisibleControlExtender<script type="text/javascript" language="javascript">Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    updateTime();
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    window.setInterval(updateTime, 1000);
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    function updateTime()
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtenderAtlas学习手记(10):使用AlwaysVisibleControlExtender    Atlas学习手记(10):使用AlwaysVisibleControlExtender{
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        var label = document.getElementById("currentTime");
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtenderAtlas学习手记(10):使用AlwaysVisibleControlExtender        if (label) Atlas学习手记(10):使用AlwaysVisibleControlExtender{
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender            label.innerText = (new Date()).toLocaleTimeString();
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender        }
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender    }
Atlas学习手记(10):使用AlwaysVisibleControlExtender
Atlas学习手记(10):使用AlwaysVisibleControlExtender</script>

至此整个示例就完成了,编译运行:

Atlas学习手记(10):使用AlwaysVisibleControlExtender

Top Right:

Atlas学习手记(10):使用AlwaysVisibleControlExtender

Bottom Right:

Atlas学习手记(10):使用AlwaysVisibleControlExtender

Bottom Left:

Atlas学习手记(10):使用AlwaysVisibleControlExtender

完整示例下载:http://www.cnblogs.com//Files/Terrylee/AlwaysVisibleControlDemo.rar

原标题:Atlas学习手记(10):使用AlwaysVisibleControlExtender

关键词:atlas

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

抢滩中东新蓝海,沙特物流却成拦路虎?:https://www.goluckyvip.com/news/10852.html
这些过冬神器继续走红欧洲!欧美运费全线下跌|跨境热点速递 :https://www.goluckyvip.com/news/10853.html
达飞海运:征收旺季附加费和超重附加费 :https://www.goluckyvip.com/news/10854.html
聚焦物流大事件 | “苏拉”远去,港口码头面临严重拥堵 :https://www.goluckyvip.com/news/10855.html
干货 | 什么是空运特殊货物? :https://www.goluckyvip.com/news/10856.html
每吨23.34美元!密西西比河因水位下降导致运费升高 :https://www.goluckyvip.com/news/10857.html
仿品独立站从建站、推广、收款到底怎么玩?:https://www.kjdsnews.com/a/1836312.html
仿品独立站从建站、推广、收款到底怎么玩?:https://www.goluckyvip.com/news/186215.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流