第二章 悬浮面板AlwaysVisibleControl 控件
2009-07-23 13:44
260 查看
AlwaysVisibleControl 是可以非常轻松地将你页面上的控件“悬浮”于其它控件之上, 并在用户界面或者浏览器窗口的任何形状变化(包括最大化、还原或者拉动滚动条)过程中都能保持在一个指定位置的 ASP.Net AJAX 控件。
AlwaysVisibleControl属性
表:3.1
程序演示
1. 双击工具箱中的“ScriptManager”在AlwaysVisibleControl.aspx中添加ScriptManager。
2. 添加一个UpdatePanel控件,并在这个控件内添加一个Timer和一个Label。
3. 在Label1上单击,选择向右箭头,“添加扩展程序”,选择AlwaysVisibleControl控件。
4. 设定属性HorizontalSide="Center"。
AlwaysVisibleControl.aspx前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ 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>
<style type="text/css">
.ContentPanel
{
padding: 5px 5px 5px 5px;
text-align: left;
line-height: 15px;
}
p
{
line-height: 1.4em;
margin-top: 0px;
margin-bottom: 5px;
}
.BlueHr
{
border-color: Blue;
border-width: 1px;
}
hr
{
border: 0;
border-top: 1px solid #FFFFFF;
height: 1px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" style="color: #FF0066; font-weight: 700"
BackColor="#99CCFF" BorderColor="#3333FF" BorderStyle="Double"></asp:Label>
<cc1:AlwaysVisibleControlExtender ID="Label1_AlwaysVisibleControlExtender"
runat="server" Enabled="True" HorizontalSide="Center" TargetControlID="Label1">
</cc1:AlwaysVisibleControlExtender>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<div class="ContentPanel">
<p>
AlwaysVisibleControl 是一个可以使你在开发中非常轻松地将你页面上的控件“悬浮”于其它控件之上,
并在用户对于界面或者浏览器窗口的任何形状变化(包括最大化、还原或者拉动滚动条)过程中都能保持在一个指定位置的 ASP.Net AJAX 控件。
<br />
<br />
产生如此的“悬浮”和位置保持页面效果,尤其适用于一些用户极其可能需要在各种特殊情况产生的点击性功能,例如购物网站中的“购物车”。
<br />
<br />
<b>注意:</b>
</p>
<hr class="BlueHr" />
如果你在设计的时候没有把你需要“悬浮”的控件放置到它的“悬浮”位置,那么可能会在页面被第一次访问的时候产生一点点闪动。
<p>
</p>
</div>
</body>
</html>
AlwaysVisibleControl.aspx.cs后台代码
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text ="当前时间为:"+ DateTime.Now.ToString();
}
}
运行结果:
AlwaysVisibleControl属性
表:3.1
TargetControlID | 保持“悬浮”的控件 ID |
HorizontalOffset | 保持“悬浮”水平的位置,位移。 |
HorizontalSide | 和上面的 HorizontalOffset 属性结合控制“悬浮”水平位置的属性,它可以是 Left、Center 或者 Right;默认值是 Left |
VerticalOffset | 保持“悬浮”垂直的位置 |
VerticalSide | 和上面的 VerticalOffset 属性结合控制“悬浮”垂直位置的属性,它可以是 Top、Middle 或者 Bottom;默认值是 Top |
1. 双击工具箱中的“ScriptManager”在AlwaysVisibleControl.aspx中添加ScriptManager。
2. 添加一个UpdatePanel控件,并在这个控件内添加一个Timer和一个Label。
3. 在Label1上单击,选择向右箭头,“添加扩展程序”,选择AlwaysVisibleControl控件。
4. 设定属性HorizontalSide="Center"。
AlwaysVisibleControl.aspx前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ 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>
<style type="text/css">
.ContentPanel
{
padding: 5px 5px 5px 5px;
text-align: left;
line-height: 15px;
}
p
{
line-height: 1.4em;
margin-top: 0px;
margin-bottom: 5px;
}
.BlueHr
{
border-color: Blue;
border-width: 1px;
}
hr
{
border: 0;
border-top: 1px solid #FFFFFF;
height: 1px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" style="color: #FF0066; font-weight: 700"
BackColor="#99CCFF" BorderColor="#3333FF" BorderStyle="Double"></asp:Label>
<cc1:AlwaysVisibleControlExtender ID="Label1_AlwaysVisibleControlExtender"
runat="server" Enabled="True" HorizontalSide="Center" TargetControlID="Label1">
</cc1:AlwaysVisibleControlExtender>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<div class="ContentPanel">
<p>
AlwaysVisibleControl 是一个可以使你在开发中非常轻松地将你页面上的控件“悬浮”于其它控件之上,
并在用户对于界面或者浏览器窗口的任何形状变化(包括最大化、还原或者拉动滚动条)过程中都能保持在一个指定位置的 ASP.Net AJAX 控件。
<br />
<br />
产生如此的“悬浮”和位置保持页面效果,尤其适用于一些用户极其可能需要在各种特殊情况产生的点击性功能,例如购物网站中的“购物车”。
<br />
<br />
<b>注意:</b>
</p>
<hr class="BlueHr" />
如果你在设计的时候没有把你需要“悬浮”的控件放置到它的“悬浮”位置,那么可能会在页面被第一次访问的时候产生一点点闪动。
<p>
</p>
</div>
</body>
</html>
AlwaysVisibleControl.aspx.cs后台代码
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text ="当前时间为:"+ DateTime.Now.ToString();
}
}
运行结果:
![](http://images.cnblogs.com/cnblogs_com/aspnet_ajax/0031.jpg)
相关文章推荐
- altas(ajax)控件(二):悬浮面板控件AlwaysVisibleControl
- altas(ajax)控件(二):悬浮面板控件AlwaysVisibleControl
- altas(ajax)控件(二):悬浮面板控件AlwaysVisibleControl
- altas(ajax)控件(二):悬浮面板控件AlwaysVisibleControl
- AlwaysVisibleControlExtender 控件 窗口一直存在
- AjaxControlToolkit 微软出的ajax.net 工具使用教程三 AlwaysVisibleControlExtender(浮动)控件的使用
- 第十五篇: Ajax Control Toolkit 控件包--4.AlwaysVisibleControlExtender
- .net3.5 和vs2008中Ajax控件的使用--AlwaysVisibleControl控件
- AlwaysVisibleControlExtender控件
- Ajax Control Toolkit——AlwaysVisibleControlExtender(悬浮效果)
- AjaxControlToolkit 微软出的ajax.net 工具使用教程三 AlwaysVisibleControlExtender(浮动)控件的使用
- AlwaysVisibleControlExtender控件
- Ajax Toolkit 控件学习系列(10) ——AlwaysVisibleControlExtender总是可见
- ASP.NET AJAX控件之AlwaysVisibleControlExtender
- AlwaysVisibleControl
- 七、AlwaysVisibleControl——同步卫星
- 使用AlwaysVisibleControlExtender
- Atlas学习手记(10):使用AlwaysVisibleControl Extender
- AjaxControlToolkit——AlwaysVisibleControl
- AjaxToolKit--AlwaysVisibleControl的介绍