Asp.net + jQuery + UpdatePanelAnimationExtender达成载入效果与AJAX的控制项

Asp.net + jQuery + UpdatePanelAnimationExtender达成效果载入中的AJAX在有个很赞的控制项（应该是说在里面的AJAX控制工具箱）

 
他就叫做UpdatePanelAnimationExtender

为什么会使用它呢...!? jQuary的构成...不外乎就是JavaScript的

 

UpdatePanelAnimationExtender使用的动画效果（恩可以用来呼叫的JavaScript ）可以轻松的达到我们的目标呢

 

现在让我们开始吧...

对了附带一提...其实我没有在里面引入的<head> jquery.js ，我用了另一种方法jquery.blockUI.js ...

AJAX的脚本加入如下的在ScriptManager （控制工具包恩这个其实是里面的控制项，有同样效果跟ScriptManager ）

 

 

Code


-------------------------------------------------- ------------------------------

  首先在<heade> “ /头”之间加入以下的JavaScript

 

Code


当然啰...可以自己写...载入中我这边的范例是做一个有图片和资料载入中...字样的邮件，麻烦自由发挥...


-------------------------------------------------- ------------------------------

以下是重点啰? ? ?

UpdatePanel的地方都给他放上一个在你有UpdatePanelAnimationExtender

TargetControlID记得要设定你的UpdataPanel ...不然没有用的唷?

然后请看以下程式

 

Code

 

大略说明一下好了... <Animations>在标签可以设定你再非同步执行开始的时候要做什么事情<OnUpdating> ，在非同步执行结束的时候要做什么事情<OnUpdated>

所以呢?我们就在这边呼叫刚刚写在里面的的JavaScript的<head>

这样就大功告成了? ?


-------------------------------------------------- ------------------------------

其实这个方法蛮简单的...当然可以做的更花俏?毕竟不是吃素的UpdatePanelAnimationExtender

假如我希望在完成后顺便提示使用者完成了...我该怎么做呢？

首先在刚刚加入的里面新增一个JavaScript函数

 

Code

 

然后在<OnUpdated>的地方稍微增加一些东西 ...

 

Code


好了好了完成了...这边意思是

第三行- ajaxStop在非同步执行完成后先呼叫（ ） ;

第四行-呼叫刚刚加入的ajaxComplete （ ） ;让它显示出资料载入完成的字样

第五行秒过后-1 （长）呼叫ajaxStop （ ） ;解除页面块...

 

刚刚开始研究这个Loading 这种加载效果。我感觉应该还有那种缓存加载的原理。现在刚刚开始说不清楚。

高手指点！！！

 

posted @ 2009-06-01 16:38  Νо、  阅读(449)  评论(0)  编辑  收藏  举报