您的位置:首页 > 其它

第二章 悬浮面板AlwaysVisibleControl 控件

2009-07-23 13:44 260 查看
AlwaysVisibleControl 是可以非常轻松地将你页面上的控件“悬浮”于其它控件之上, 并在用户界面或者浏览器窗口的任何形状变化(包括最大化、还原或者拉动滚动条)过程中都能保持在一个指定位置的 ASP.Net AJAX 控件。

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();

}

}

运行结果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: