ajax实现样式更新,Ajax UpdateProgress功能演示

亦凉 2022-09-03 13:28 118阅读 0赞

此功能，使用到Ajax技术UpdateProgress来实现层遮罩效果，从下面的Style可以看到两个样式，一个底层和显法层。

![AAffA0nNPuCLAAAAAElFTkSuQmCC][]

![AAffA0nNPuCLAAAAAElFTkSuQmCC][]Style

\#progressBackgroundLayer

\{

position: fixed;

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;

overflow: hidden;

padding: 0;

margin: 0;

background-color: \#000;

filter: alpha(opacity=30);

opacity: 0.5;

z-index: 1000;

\}

\#processMessageLayer

\{

position: fixed;

text-align: center;

width: 15%;

border: none;

padding: 5px;

background-color: \#fff;

vertical-align: middle;

z-index: 1001;

top: 20%;

left: 4%;

\}

接下来，还再实现一个取消功能：

![AAffA0nNPuCLAAAAAElFTkSuQmCC][]

![AAffA0nNPuCLAAAAAElFTkSuQmCC][]CancelPostBack

function CancelPostBack() \{

var objMan = Sys.WebForms.PageRequestManager.getInstance();

if (objMan.get\_isInAsyncPostBack())

objMan.abortPostBack();

\}

.aspx

页面中写上ScriptManager，UpdatePanel和主角UpdateProgress:

![AAffA0nNPuCLAAAAAElFTkSuQmCC][]

![AAffA0nNPuCLAAAAAElFTkSuQmCC][]

οnclick="Button1\_Click" />

DisplayAfter="100" DynamicLayout="true">

![Ajax\_Load.gif][AAffA0nNPuCLAAAAAElFTkSuQmCC]

Please wait...

为了效果，Insus.NET故意在Button1\_Click把进行时间写长了一点：

System.Threading.Thread.Sleep(5000);

完整代码：

http://download.cnblogs.com/insus/Ajax/UpdateProgressDemo.rar

[AAffA0nNPuCLAAAAAElFTkSuQmCC]:

发表评论取消回复

表情：

评论列表（有 0 条评论，118人围观）

还没有评论，来说两句吧...

相关阅读

相关 AJAX的功能

Ajax的特点在于异步交互、动态更新Web页面，因此它适合于交互较多、频繁读取数据的web应用。 1.数据验证使用Ajax技术，可以由X

太过爱你忘了你带给我的痛/ 2024年02月18日 15:43/ 0 赞/ 52 阅读

相关 php ajax输入提示,ajax怎么实现提示输入信息的功能

这次给大家带来ajax怎么实现提示输入信息的功能，ajax实现提示输入信息功能的注意事项有哪些，下面就是实战案例，一起来看一下。本文实例为大家分享了ajax实现输入提示效果

布满荆棘的人生/ 2023年01月17日 15:49/ 0 赞/ 168 阅读

相关 php ajax登陆界面,PHP如何通过AJAX方式实现登录功能

PHP是一门很好的语言,可以很方便的开发web应用程序，下面介绍一下Ajax+PHP+MySQL登陆示例，感兴趣的小伙伴们可以参考一下 ![de6c0f278ebcabef7

迈不过友情╰/ 2022年11月17日 03:32/ 0 赞/ 176 阅读

相关 ajax实现样式更新,Ajax UpdateProgress功能演示

此功能，使用到Ajax技术UpdateProgress来实现层遮罩效果，从下面的Style可以看到两个样式，一个底层和显法层。 ![AAffA0nNPuCLAAAAAElFT

亦凉/ 2022年09月03日 13:28/ 0 赞/ 119 阅读

相关 ajax与数据库更新,ajax更新到数据库

我正在尝试将数据添加到数据库中，并且由于某种原因它并不总是有效。我会说有80％的时间它会工作，我会在数据库中看到结果，但有时它会像脚本一样不会运行。这里是ajax： $(

川长思鸟来/ 2022年09月03日 06:18/ 0 赞/ 171 阅读

相关 JQuery实现Ajax功能

使用jquery实现ajax功能的示例代码如下： $.ajax({ url:"/WebCrowd/servlet/Aj

谁践踏了优雅/ 2022年07月12日 02:41/ 0 赞/ 233 阅读

相关 ajax实现网站搜索框功能

1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> f

小灰灰/ 2022年06月16日 10:51/ 0 赞/ 260 阅读

相关 struts2实现ajax功能

在struts2项目中，我们也会使用到ajax功能，有两种方式来实现ajax功能，一种是可以使用servletAPI来实现ajax的功能，另一种是使用struts2的

墨蓝/ 2022年06月13日 06:18/ 0 赞/ 236 阅读

相关 js_ajax_简单实现ajax

@WebServlet("/ajax.do") public class HelloAjax extends HttpServlet { privat

川长思鸟来/ 2022年05月18日 20:43/ 0 赞/ 235 阅读

相关 ajax 实现文件下载功能

ajax一般是用来请求服务端的数据，下载文件需要先从服务器获取文件请求路径，然后使用form表单提交的方法来实现文件的下载。先引入jquery文件，jquery的免费cdn

素颜马尾好姑娘i/ 2022年02月28日 13:48/ 0 赞/ 1221 阅读