文档章节

JQuery 滚动条实现

mrliuze
 mrliuze
发布于 2015/11/27 16:40
字数 425
阅读 63
收藏 11
点赞 0
评论 0

简述:

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

滚动图片和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
博文 154
码字总数 11670
作品 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
使用sublime text 2开发Javacript和jQuery

来源:GBin1.com 经常听见大家抱怨javascript开发没有好的IDE,当然我也同意。但是如果你尝试sublime text 2后估计你可能改变这个观点。 下载地址:http://www.sublimetext.com/download 主要...

gbin1
2011/11/09
0
0
一个仿Apple - OS X Lion操作系统风格的滚动条jQuery插件 - lionbars

日期:2012-4-13 来源:GBin1.com 在线演示 本地下载 今天介绍一款超酷的帮助你生成OSX式样的滚动条的jQuery插件- lionbars,使用这个插件,你可以快速的生成一个OSX风格的滚动条。绝对能够让...

gbin1
2012/04/16
0
1
JQuery Mobile优秀网站及资源

1、JQM 案例展示:http://www.jqmgallery.com/ 2、JQM 滚动条插件 Site: http://cubiq.org/iscroll Demo: http://cubiq.org/dropbox/iscroll4/examples/simple/ 3、JQM 弹出插件 Site:http:......

JK_OPERA
2014/09/05
0
2
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵
06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周一乱弹 —— 你的朋友圈有点生锈了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @Devoes :分享Trademark的单曲《Only Love (电视剧《妙手仁心 II》插曲)》: 《Only Love (电视剧《妙手仁心 II》插曲)》- Trademark 手机党少...

小小编辑
今天
204
9
【面试题】盲人坐飞机

有100位乘客乘坐飞机,其中有一位是盲人,每位乘客都按自己的座位号就坐。由于盲人看不见自己的座位号,所以他可能会坐错位置,而自己的座位被占的乘客会随便找个座位就坐。问所有乘客都坐对...

garkey
今天
1
0
谈谈神秘的ES6——(二)ES6的变量

谈谈神秘的ES6——(二)ES6的变量 我们在《零基础入门JavaScript》的时候就说过,在ES5里,变量是有弊端的,我们先来回顾一下。 首先,在ES5中,我们所有的变量都是通过关键字var来定义的。...

JandenMa
今天
1
0
arts-week1

Algorithm 594. Longest Harmonious Subsequence - LeetCode 274. H-Index - LeetCode 219. Contains Duplicate II - LeetCode 217. Contains Duplicate - LeetCode 438. Find All Anagrams ......

yysue
今天
2
0
NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
今天
1
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
0
0
AB 压力测试

Ubuntu 安装AB apapt-get install apache2-utils 使用AB 压力测试 -c 并发数 -n请求总数 ab -c 3000 -n 10000 http://localhost/test/index.php AB只能测试localhost 返回结果 This is Apac......

xiawet
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
1
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部