文档章节

JQuery 滚动条实现

mrliuze
 mrliuze
发布于 2015/11/27 16:40
字数 425
阅读 63
收藏 11

简述:

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

滚动图片和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. }  

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

本文转载自:http://blog.csdn.net/anialy/article/details/8725820

共有 人打赏支持
mrliuze
粉丝 14
博文 155
码字总数 12377
作品 0
浦东
程序员
私信 提问
19个带示例的jQuery滚动条插件

1、NiceScroll:可用于桌面、移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于...

彭博
2012/11/27
2K
0
19个带示例的jQuery滚动条插件

1、NiceScroll:可用于桌面、移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于...

彭博
2012/07/25
51K
14
7 款灵巧实用的 CSS3 和 jQuery 插件工具

作为WEB开发前端开发者,大部分应该对jQuery比较熟悉,对免费开源的jQuery也用的非常多。但是随着CSS3标准的诞生和发展,很多jQuery插件也都纷纷应用了CSS3新标准,也因此让插件有更好的展示...

yykj
2012/12/03
3.7K
7
20 个用于处理页面滚动效果的 jQuery 插件

对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性。如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果。幸运的是有各种各样的jquery 滚动插件可...

oschina
2013/11/01
43.8K
22
超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar

日期:2013-2-16 来源:GBin1.com 在线演示 可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案。 这个滚动条...

gbin1
2013/02/18
6
0

没有更多内容

加载失败,请刷新页面

加载更多

lucene 评分要素解析

基本规则:

Java搬砖工程师
26分钟前
0
0
ubutnu 14.04 安装JIRA

系统版本:Ubuntu 14.04 下载jira安装文件 sudo wget https://downloads.atlassian.com/software/jira/downloads/atlassian-jira-software-7.1.9-x64.bin 修改文件权限 sudo chmod 777 atl......

Kampfer
36分钟前
0
0
软件开发模型优缺点及其适用范围

瀑布模型、快速原型模型、增量模型、螺旋模型 瀑布模型也称软件生存周期模型。 优点: (1)它在软件工程中占有重要地位,它提供了软件开发的基本框架,这比依靠“个人技艺”开发软件好得多。...

无极之岚
36分钟前
0
0
孩子们各显神通对付 iOS 12「屏幕使用时间」的限制

简评:2018 年秋季,苹果公司推出了 iOS 12,其中备受好评的一项改变是:增加了屏幕使用时间限制,以减轻沉迷手机的状况。三个月过去后,这项功能似乎并没有对孩子造成太多困扰,道高一尺魔高...

极光推送
41分钟前
2
1
springCloud Spring Boot mybatis分布式微服务云架构-docker-feign-hystrix-ribbon(七)

简介 在上一节中,我们讨论了feign+hystrix在项目开发中,除了考虑正常的调用之外,负载均衡和故障转移也是关注的重点,这也是feign + ribbon+hystrix的优势所在,本节我们就讨论一下在feign...

sccspuercode
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部