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/
分享到:
相关推荐
为什么要用云开发做错误日志: 我司没有测试,所以产品上线的话比较多不确定性 云开发业务并不稳定,且有限制,所以不建议直接用做整个小程序的后台开发。...然后你需要一个小程序,一个小程序开发工具: 新建一个空
java开发中做日志的教程,内容详细,可以帮助你在开发中了解程序的运行状况
此类库主要用于在程序开发过程中辅助记录日志。内含两个方法: AppFileLog()和ConfigFileLog(); 两个方法的作用一样,主要区别在于,AppFileLog()用于记录程序运行过程中的日志,ConfigFileLog()用于记录读取配置文件...
雨松MOMO带你做软件 Android软件开发之程序中时时获取logcat日志信息 黄英大家下载阅读 哇咔咔~~
基于微信小程序的日志系统的设计与应用.pdf
SQL Server日志分析程序开发思路
做应用程序开发时经常用到的日志类应用程序集
java开发的日志, 让程序打出日志,查看程序错误,方便大家开发时使用
在使用QtCreator调试的情况,日志可以在应用程序输出或者读写到指定的路径的txt里面 1.把log.h 和 log.cpp放到程序里进去 2.log_open("./XXX.log") [这一步会自动新建到这个路径下的txt,会输入到这个文本中] 3.打印...
Java开发自学100天,Java开发必背代码 重定向输出流实现程序日志
PHP实例开发源码—LOGA 日志系统升级程序.zip PHP实例开发源码—LOGA 日志系统升级程序.zip PHP实例开发源码—LOGA 日志系统升级程序.zip
有强大的日志分析功能 自定义日志文件的大小。能按异常的等级记录日志。是c#程序开发中一个很好的帮手
NULL 博文链接:https://blognojava.iteye.com/blog/1099259
Debug监听程序崩溃日志,直接页面展示崩溃日志列表
PHP实例开发源码—Essay php+html日志程序.zip PHP实例开发源码—Essay php+html日志程序.zip PHP实例开发源码—Essay php+html日志程序.zip
PHP实例开发源码—IIS 开源php日志检测程序.zip PHP实例开发源码—IIS 开源php日志检测程序.zip PHP实例开发源码—IIS 开源php日志检测程序.zip
基于Qt5.4开发的轻量化的日志库。多线程读写日志信息到文本文件中。
Android 基础开发 Gps日志记录程序源码 个人觉得还是比较完善的
基于Python开发网络运行日志收集整理系统设计与实现.pdf
PHP开发的IIS日志检测程序,用于危险日志排除。使用方法:将日志文件复制到程序目录下(比如 /iis/ ),浏览器访问: www.你的域名.com/iis/选测要检测的文件,检测就可以了。支持多文件筛选。程序支持检测单文件100M...