JQuery 滾動條實現

簡述：

如今須要實現當前端向後臺請求數據時，出現滾動條，當請求結束後滾動條消失

滾動圖片和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. }  

效果是當點擊的時候出現滾動條，數據拿到後消失