文档章节

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
粉丝 13
博文 155
码字总数 12377
作品 0
浦东
程序员
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
0
0
2009年度最佳jQuery插件

http://www.it168.com2009年12月14日IT168网站 原创 作者:COMSHARP CMS 编辑:胡铭娅 【IT168 资讯】 jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架...

晨曦之光
2012/03/09
0
0
使用jQuery来改善源代码浏览体验

作者:Terry li - GBin1.com 作为一个技术人员,经常需要在开发中查阅一些资料,其中自然包括了代码片段,而代码片段的浏览方式,决定了用户的体验,今天我这里使用jQuery简单实现一个源代码...

gbin1
2011/06/29
0
0
jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部

转自:http://blog.163.com/liufupanhao@126/blog/static/1284651702010894509982/ 关于 jQuery 的 Div 标签的滚动条的概念,没有几个人能够完全、正确搞明白的。 我知道很多人不同意我的观点...

大漠胡杨
2014/08/01
0
0
Nicescroll滚动条插件的用法

Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触...

yxm2016
2017/10/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

学习设计模式——中介者模式

1. 认识中介者模式 1. 定义:用一个中介对象来封装一系列的对象交互行为,中介者使得各对象不需要显式的互相引用,从而使其松散耦合,独立的改变他们之间的交互。 2. 结构: Mediator:中介者...

江左煤郎
9分钟前
0
0
深入理解Plasma(1):Plasma 框架

这一系列文章将围绕以太坊的二层扩容框架,介绍其基本运行原理,具体操作细节,安全性讨论以及未来研究方向等。本篇文章作为开篇,主要目的是理解 Plasma 框架。 Plasma 作为以太坊的二层扩容...

HiBlock
17分钟前
0
0
Java 8 日期 示例

Java 8 推出了全新的日期时间API。Java处理日期、日历和时间的方式一直为社区所诟病,将 java.util.Date设定为可变类型,以及SimpleDateFormat的非线程安全使其应用非常受限。Java也意识到需...

阿刚ABC
42分钟前
1
0
RxJava操作符lift 笔记

在内部,每个Rx operator都做3件事: 它订阅源并观察值。 它根据操作员的目的转换观察到的序列。 它通过调用onNext,onError和onCompleted将修改后的序列推送到自己的订阅者。 compose运算符...

woshixin
44分钟前
1
0
lnmp+coreseek实现站内全文检索(安装篇)

软件安装包 安装环境 系统环境 centos7.2 1核2G 软件环境 coreseek-3.2.14 lnmp1.5 安装mmseg 更新依赖包和安装编译环境 yum -y install m4 autoconf automake libtoolyum -y install gcc g...

毛毛雨rain
56分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部