JQuery 滚动条实现

最新推荐文章于 2023-09-26 04:37:14 发布

anialy

最新推荐文章于 2023-09-26 04:37:14 发布

阅读量1.5k

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

16 篇文章

订阅专栏

简述：

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

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

知识点：

1. css配置

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

3. 异步回调消失滚动条

代码：

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

<!-- 加载条 -->
<div id="AjaxLoading" class="showbox">
	<div class="loadingWord"></div>
</div>

<div class="overlay"></div>

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

loading.css

@charset "utf-8";
.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;}
.showbox{position:fixed;top:0;left:50%;z-index:9999;opacity:0;filter:alpha(opacity=0);margin-left:-80px;}
#AjaxLoading{border:1px solid #8CBEDA;color:#37a;font-size:12px;font-weight:bold;}
#AjaxLoading div.loadingWord{width:200px;height:50px;line-height:50px;border:2px solid #D6E7F2;background:#fff;}
#AjaxLoading img{margin:10px 15px;float:left;display:inline;}

3. JS实现

/**
 * 显示loading条
 * words 显示的信息
 */
 function showLoading(words){
 	var h = $(document).height();
	$(".overlay").css({"height": h });	
	$(".overlay").css({'display':'block','opacity':'0.4'});
    $(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},0);
	$(".loadingWord ").empty();
	$(".loadingWord ").append("<img src=\"../images/loading.gif\">" + words);
 }
 
 
/**
 * 消除loading条
 */
 function dismissLoading(){
    $(".overlay").css({'display':'none','opacity':'0'});
    $(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
 }

数据请求部分处理：

function ajaxCallData(searchKeywords, pageNo){	
	//当页面出现html填充结束后，向后台请求数据，不带查询参数
	$.ajax({
		type:"POST",
		url: "${ctx}/business/voucher",
		data: {
			'searchKeywords' :  searchKeywords, 
			'action' : 'searchVoucher',
			'random' : Math.random(), //加时间戳，防止IE缓存
			'pageNo' : pageNo
		},
		dataType:"json",
		global:false, 
		beforeSend: function(XHR){
		   showLoading("数据加载中，请稍候...");
		},
		success: function(data){
			RenderPage(data);
		},
		error:function(){
		    alert("加载失败");
			dismissLoading();
		}
	});
}

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