JQuery 滚动条实现

2019独角兽企业重金招聘Python工程师标准>>>

简述：

现在需要实现当前端向后台请求数据时，出现滚动条，当请求结束后滚动条消失

滚动图片和css文件来自网上

知识点：

1. css配置

2. 试用div遮盖block住全页面，防止表单多次提交

3. 异步回调消失滚动条

代码：

1. 首先在Html文件中添加如下div, 其中overlay是起到遮盖block页面用的

[html]  view plain copy

1. <!-- 加载条 -->  
2. <div id="AjaxLoading" class="showbox">  
3.     <div class="loadingWord"></div>  
4. </div>  
5.   
6. <div class="overlay"></div>  

2. css文件中定义showbox和loadingWord类

loading.css

[plain]  view plain copy

1. @charset "utf-8";  
2. .overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;_padding:0 20px 0 0;background:#FFF;display:none;}  
3. .showbox{position:fixed;top:0;left:50%;z-index:9999;opacity:0;filter:alpha(opacity=0);margin-left:-80px;}  
4. #AjaxLoading{border:1px solid #8CBEDA;color:#37a;font-size:12px;font-weight:bold;}  
5. #AjaxLoading div.loadingWord{width:200px;height:50px;line-height:50px;border:2px solid #D6E7F2;background:#fff;}  
6. #AjaxLoading img{margin:10px 15px;float:left;display:inline;}  

3. JS实现

[javascript]  view plain copy

1. /** 
2.  * 显示loading条 
3.  * words 显示的信息 
4.  */  
5.  function showLoading(words){  
6.     var h = $(document).height();  
7.     $(".overlay").css({"height": h });    
8.     $(".overlay").css({'display':'block','opacity':'0.4'});  
9.     $(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},0);  
10.     $(".loadingWord ").empty();  
11.     $(".loadingWord ").append("<img src=\"../images/loading.gif\">" + words);  
12.  }  
13.    
14.    
15. /** 
16.  * 消除loading条 
17.  */  
18.  function dismissLoading(){  
19.     $(".overlay").css({'display':'none','opacity':'0'});  
20.     $(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);  
21.  }  

数据请求部分处理：

[javascript]  view plain copy

1. function ajaxCallData(searchKeywords, pageNo){    
2.     //当页面出现html填充结束后，向后台请求数据，不带查询参数  
3.     $.ajax({  
4.         type:"POST",  
5.         url: "${ctx}/business/voucher",  
6.         data: {  
7.             'searchKeywords' :  searchKeywords,   
8.             'action' : 'searchVoucher',  
9.             'random' : Math.random(), //加时间戳，防止IE缓存  
10.             'pageNo' : pageNo  
11.         },  
12.         dataType:"json",  
13.         global:false,   
14.         beforeSend: function(XHR){  
15.            showLoading("数据加载中，请稍候...");  
16.         },  
17.         success: function(data){  
18.             RenderPage(data);  
19.         },  
20.         error:function(){  
21.             alert("加载失败");  
22.             dismissLoading();  
23.         }  
24.     });  
25. }  

效果是当点击的时候出现滚动条，数据拿到后消失

转载于:https://my.oschina.net/u/1034537/blog/536546