程序开发日志

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/