程序开发日志
2009-04-16
增加spring，将spring和struts2结合。
2009-04-17
一、增加AJAX loading以及AJAX mask效果
目的：
?1、AJAX操作提示功能，提示用户操作成功。
?2、避免用户重复操作，比如查询的时候用遮罩层将查询按钮遮住，这样用户在一次查询的过程中不能再点击按钮
步骤：
1、到http://www.ajaxload.info/#preview这个网站上自己定制一个loading图片拷贝到项目下的css目录下。
2、页面端增加
?<div id="loadimg"></div>
?<div id="mask"></div>
3、css文件里增加：
#loadimg {
?display:none;
?position:absolute;
?z-index:4;
?width:126px;
?height:22px;
?text-align:center;
?color:#FFFFFF;
?font-size:12px;
?line-height:22px;
?background:url("ajax-loader.gif");
?left:449;
?top:250px;
}
#mask{
?background-color: black;
?display:none;
?z-index:3;
?position:absolute;
?left:0px;
?top:0px;
?filter:Alpha(Opacity=30);
?/* IE */
?-moz-opacity:0.4;
?/* Moz + FF */
?opacity: 0.4;
}
4、在js文件里写如下jquery代码(前提是页面端已经引入jquery库)：
$(document).ready(function (){
?$('#send_ajax').click(function (){ //直接把onclick事件写在了JS中，而不需要混在XHTML中了
??var params=$('input').serialize(); //序列化表单的值，与prototype中的form.serialize()相同
??$("#loadimg").ajaxStart(function(){
???/*下面三段是遮罩的代码*/
???var bH=$("body").height();
???var bW=$("body").width();
???$("#mask").css({width:bW,height:bH,display:"block"});
???$("#loadimg").css("display","block");
???$("#loadimg").html("正在查询请稍候...");
??});
?????????
??$.ajax({
???url :'report.action',? //后台处理程序
???type:'post',??? //数据发送方式
???dataType:'json',?? //接受数据格式
???data:params,?? //要传递的数据
???//查询结束后隐藏loading动画
???complete:function(){
????$("#loadimg").html("查询完成!");
????//延时隐藏loading图片动画，让客户能看到查询成功提示
????setTimeout('$("#loadimg").css("display","none")',500);
????/*下面一段是遮罩的代码*/
????setTimeout('$("#mask").css("display","none")',500);
???},
???success:update_page? //回传函数(这里是函数名)
??});
?});
});
function update_page (json) { //回传函数实体，参数为XMLhttpRequest.responseText
????? $('#content').html(json.result);
}
注：
?1、除了jquery的核心库以外没有用到任何jquery插件
?jquery插件thickbox可以实现更炫的效果，但针对本项目适用性不强，
?网址：http://jquery.com/demo/thickbox/ 作为今后研究的参考。
?2、另外一些类似效果的实现参考：
??a)、loading-Mask:
??http://www.bubbling-library.com/eng/api/docs/widgets/loading-mask
??b)、lightbox(主要用于图片显示的):
??http://www.huddletogether.com/projects/lightbox/
