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

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了