为页面添加ajax 操作提示

Question

转：阿点

为页面添加ajax 操作提示
为增强用户体验，在页面发送ajax 请求时，出现"操作"提示，ajax 结束时，隐藏"操作"提示。

1.HTML 代码

<!--ajax提示层-->
<div class="ajaxDiv" id="ajaxDiv">
操作中....
</div>

2. 样式

1. div.ajaxDiv
   
2. {
   
3.     position:absolute;
   
4.     left:0px;
   
5.     top:0px;
   
6.     width:100%;
   
7.     height:100%;
   
8.     background:#567 url(../images/Loading.gif) no-repeat center center;
   
9.     display:none;
   
10.     z-index:9999;
    
11.     color:red;
    
12.     text-align:center;
    
13.     vertical-align:middle;
    
14.     font-size:12px;
    
15.     line-height:100%;
    
16. }
    

复制代码3.JS 代码

1. $.ajaxSetup({cache:false});
   
2.     $("#ajaxDiv").ajaxStart(function () {
   
3.         var h = $(document).height();
   
4.         $(this).height(h).css({ "opacity": 0.8, "line-height": h + 'px' }).show();
   
5.     }).ajaxStop(function () {
   
6.         $(this).hide();
   
7.     });
   

复制代码4.结果

1.png (18.37 KB, 下载次数: 3)

下载附件

2011-04-20 17:21 上传

Answer 1

dz，uchome中发贴提示的代码是怎么实现的？从下往上滑动到一定位置，然后再闪一下，fadeout