处理时的遮罩层-控件的妙用,基于微软ajax框架
2007-12-12 10:31
246 查看
遮罩层与基础ajax控件已经封装在一个用户控件,使用方便。
使用的页面的代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="webtools/AjaxSetup.ascx" TagName="AjaxSetup" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<uc1:AjaxSetup ID="AjaxSetup1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Button1_Click执行的为一个处理事件,我使用一个循环做的测试:
protected void Button1_Click(object sender, EventArgs e)
{
long start = DateTime.Now.Ticks;
for (int i = 0; i < 1000000000; i++)
{
;
}
TextBox1.Text = (DateTime.Now.Ticks - start).ToString();
}
关键的用户控件代码如下:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AjaxSetup.ascx.cs" Inherits="webtools_AjaxSetup" %>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<style type="text/css">
#showBox {
text-align: center;
position: absolute;
left: 0;
top: 0;
z-index: 99;
width: 100%;
height: 100%;
}
#msleft {
position: absolute;
left: 0;
top: 0;
z-index: 1002;
width: 100%;
height: 100%;
}
#alphaBox {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: #000;
filter:alpha(opacity=30); /* IE */
opacity: 0.6; /* 支持CSS3的浏览器(FF 1.5也支持)*/
-moz-opacity: 0.6; /* Moz + FF */
}
#content {
color: #416f02;
margin: 0 auto;
margin-top: 220px;
width: 240px;
height: 60px;
border: 1px solid #3C3C3C;
background-color: #fff;
}
#content a { color: #416f02;text-Decoration:none; }
#content a:hover { color: #c00; }
.h1 { font-size: 14px; color: #c00; text-align: center; }
.intro{ color: #c27006; font-size: 12px; text-align: center;}
.close { text-align: right; height: 20px; margin: 20px 20px 0 0; }
</style>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div id="showBox" style="display:none;">
<div id="msleft">
<div id="content">
<span class="h1"><strong>数据处理中</strong></span>
<br />
<span style="text-align: center;"><img src="<%=url %>images/loading.gif" /></span>
<br />
<span class="intro">技术支持:<a href="http://losingrose.cnblogs.com" target="_blank">losingrose.cnblogs.com</a></span>
</div>
</div>
<div id="alphaBox"></div>
</div>
<script type="text/javascript">
<!--
function boxAlpha() {
var showBox=document.getElementById("showBox");
var bgalpaha = document.getElementById("alphaBox");
var content = document.getElementById("content");
if(showBox.style.display == "none") {
showBox.style.display = "block";
showBox.style.height = document.documentElement.scrollHeight;
bgalpaha.style.height= document.documentElement.scrollHeight+"px";
if(document.body.scrollHeight<600)
bgalpaha.style.height= "610px";
if (navigator.appName == "Microsoft Internet Explorer")
bgalpaha.style.width = document.documentElement.scrollWidth + "px";
else
bgalpaha.style.width = document.documentElement.scrollWidth + "px";
}
else
showBox.style.display = "none";
}
boxAlpha();
//-->
</script>
</ProgressTemplate>
</asp:UpdateProgress>
最终效果如下图所示:
使用的页面的代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="webtools/AjaxSetup.ascx" TagName="AjaxSetup" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<uc1:AjaxSetup ID="AjaxSetup1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Button1_Click执行的为一个处理事件,我使用一个循环做的测试:
protected void Button1_Click(object sender, EventArgs e)
{
long start = DateTime.Now.Ticks;
for (int i = 0; i < 1000000000; i++)
{
;
}
TextBox1.Text = (DateTime.Now.Ticks - start).ToString();
}
关键的用户控件代码如下:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AjaxSetup.ascx.cs" Inherits="webtools_AjaxSetup" %>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<style type="text/css">
#showBox {
text-align: center;
position: absolute;
left: 0;
top: 0;
z-index: 99;
width: 100%;
height: 100%;
}
#msleft {
position: absolute;
left: 0;
top: 0;
z-index: 1002;
width: 100%;
height: 100%;
}
#alphaBox {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: #000;
filter:alpha(opacity=30); /* IE */
opacity: 0.6; /* 支持CSS3的浏览器(FF 1.5也支持)*/
-moz-opacity: 0.6; /* Moz + FF */
}
#content {
color: #416f02;
margin: 0 auto;
margin-top: 220px;
width: 240px;
height: 60px;
border: 1px solid #3C3C3C;
background-color: #fff;
}
#content a { color: #416f02;text-Decoration:none; }
#content a:hover { color: #c00; }
.h1 { font-size: 14px; color: #c00; text-align: center; }
.intro{ color: #c27006; font-size: 12px; text-align: center;}
.close { text-align: right; height: 20px; margin: 20px 20px 0 0; }
</style>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div id="showBox" style="display:none;">
<div id="msleft">
<div id="content">
<span class="h1"><strong>数据处理中</strong></span>
<br />
<span style="text-align: center;"><img src="<%=url %>images/loading.gif" /></span>
<br />
<span class="intro">技术支持:<a href="http://losingrose.cnblogs.com" target="_blank">losingrose.cnblogs.com</a></span>
</div>
</div>
<div id="alphaBox"></div>
</div>
<script type="text/javascript">
<!--
function boxAlpha() {
var showBox=document.getElementById("showBox");
var bgalpaha = document.getElementById("alphaBox");
var content = document.getElementById("content");
if(showBox.style.display == "none") {
showBox.style.display = "block";
showBox.style.height = document.documentElement.scrollHeight;
bgalpaha.style.height= document.documentElement.scrollHeight+"px";
if(document.body.scrollHeight<600)
bgalpaha.style.height= "610px";
if (navigator.appName == "Microsoft Internet Explorer")
bgalpaha.style.width = document.documentElement.scrollWidth + "px";
else
bgalpaha.style.width = document.documentElement.scrollWidth + "px";
}
else
showBox.style.display = "none";
}
boxAlpha();
//-->
</script>
</ProgressTemplate>
</asp:UpdateProgress>
最终效果如下图所示:
相关文章推荐
- 处理时的遮罩层-控件的妙用,基于微软ajax框架
- 在基于对话框的应用中执行空闲状态处理(比如用ON_UPDATE_COMMAND_UI更新控件)
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(8)--视图
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(1)--表单布局
- 基于IE内核的WebBrowser控件,键盘消息需要特殊处理的问题
- 在基于对话框的应用中执行空闲状态处理(比如用ON_UPDATE_COMMAND_UI更新控件)
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(8)--视图
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(10)--关键点
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(5)--理解数据绑定的基础
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(9)--添加第二个视图到Flight Delay表单
- 一步步学习微软InfoPath2010和SP2010--第二章节--表单需求:使用决策矩阵(6)--结合基于客户端和基于浏览器的控件
- WPF调用winform(基于GDI)的控件和WPF窗体无边框的处理
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(5)--理解数据绑定的基础
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(9)--添加第二个视图到Flight Delay表单
- 一步步学习微软InfoPath2010和SP2010--第二章节--表单需求:使用决策矩阵(6)--结合基于客户端和基于浏览器的控件
- 基于jquery的loading mask遮罩控件
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(6)--添加控件到Flight Delay表单
- 一步步学习微软InfoPath2010和SP2010--第三章节--表单设计基础:处理InfoPath布局、控件和视图(3)--InfoPath控件
- 在基于对话框的应用中执行空闲状态处理(比如用ON_UPDATE_COMMAND_UI更新控件)