2010.02.03(2)——给jquery ajax加一个进度条以及 相对定位和绝对定位

lipeng88213

2010.02.03(2)——给jquery ajax加一个进度条以及 相对定位和绝对定位
相对定位：
#loading {  position: relative;  left: 30px;  top: 20px;}绝对定位：
#loading {  position: absolute;  left: 30px;  top: 20px;}

相对定位：是相对于原来的位置

绝对定位：是相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的  包含块。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
就是说，绝对定位，不会破坏原来的文档流。

比如说吧 ，上一篇中，写了个ajax异步交互，但是，如果数据量过大时，应该给页面加一个进度条，这样更加人性化一点，
就用上一篇的html吧

html

<hr>/**注意这里是区别  loading.gif是一张进度条的图片**/<div id="loading"><img src='images/loading.gif' /></div>/**注意这里是区别**/<input id="name" type="hidden" value="${name }"/> //隐藏文本域，用于上面传参数<input id="startTime" type="hidden" value="${start }"/><input id="endTime" type="hidden" value="${end }"/><center><font color="#005ECE" size="5">${name }统计表 <br />${start }至${end }</font><h5 align="right">收入单位：￥</h5>..........
js：

$(function(){fn3($('#year'));fn4();//fn5();//alert();$('#year').change(fn4);/**注意这里是区别  ajaxStart() ajax请求开始时调用,ajaxStop() ajax请求结束时调用**/$(window).ajaxStart(function(){$("#loading").show();});$(window).ajaxStop(function(){$("#loading").hide();});/**注意这里是区别**/});
这样子写，功能是实现了，但是有个问题，当数据加载完时，<hr>下面那个div消失了，整个页面都会向上移动一下，要解决这个问题，就需要把这个div设置成绝对的，让它不影响文档流

css:

#loading{z-index: 100;position: absolute;right: 10px;}
这样就OK了