nprogress进度条和ajax全局事件
nprogress和ajax全局事件
nprogress
官方网站:http://ricostacruz.com/nprogress/
下载地址:https://github.com/rstacruz/nprogress
依赖于 jQuery (1.8版本及以上),添加 nprogress.js 和 nprogress.css 到你的项目中。
NProgress.start() — 显示进度条
NProgress.set(0.4) —设置百分比
NProgress.inc() — 增加一点点
NProgress.done() — 完成进度条
配置
通过 minimum 来修改最小百分比。
NProgress.configure({ minimum: 0.1 });
你可以通过 template 修改标记结构。为了保证进度条正常工作,需要一个包含 role='bar' 属性的元素。
NProgress.configure({
template: "..."
});
通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)。
NProgress.configure({ ease: 'ease', speed: 500 });
想关闭进度条步进?设置 trickle 为 false。
NProgress.configure({ trickle: false });
你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms).
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
想禁用进度环?设置 showSpinner 为 false。
NProgress.configure({ showSpinner: false });
ajax6个全局事件
都是绑在$(document).xxx
加载请求: .ajaxStart() 和 .ajaxstop()
错误处理: .ajaxError()
.ajaxSuccess(),对应一个局部方法:.success(),请求成功完成时执行。
.ajaxComplete(),对应一个局部方法:.complete(),请求完成后注册一个回调函数。
.ajaxSend(),没有对应的局部方法,只有属性 beforeSend,请求发送之前要绑定的函数。
例子:
$(document).ajaxStart(function(){
$('.loading').show();
}).ajaxStop(function(){
$('.loading').hide();
});
注意:
在 jQuery1.5 版本以后,使用.success()、.error()和.complete()连缀的方法,可以用.done()、.fail()和.always()取代。
nprogress进度条和ajax全局事件的更多相关文章
- Jquery表单序列化和AJAX全局事件
Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- jquery的ajax全局事件详解
jquery在ajax方面是非常强大和方便的,以下是jquery进行ajax请求时方法模板: $.ajax({ type: "get", url: "" ...
- ajax全局事件
作用:当你的页面存在很多ajax事件的话,我们有一些信息是公共的,可以复用,我们可以用全局事件进行编写,因为每一个ajax事件调用,都会触发ajax全局事件. jquery的ajax方法的全部全局事件 ...
- jQuery中的Ajax全局事件
Ajax全局事件 全局事件会在有ajax请求的情况下触发. 方法名称 说明 ajaxStart(callback) Ajax请求开始时执行的函数 ajaxStop(callback) Ajax请求结束 ...
- 关于数据未渲染完,要获取document高度问题——ajax全局事件
昨天在做开发时,遇到这样一个问题,当页面刚加载的时候,就要获取document的高度,可是此时页面上所有的ajax请求的数据都还没有渲染到页面上,所以导致得到的document的高度仅仅是页面结构的高 ...
- Vue项目开发,nprogress进度条加载之超详细讲解及实战案例
Nprogress的默认进度条很细,它的设计灵感主要来源于 谷歌,YouTube 他的安装方式也很简单,你可以有两种使用方式: 直接引入js和css文件 使用npm安装的的方式 直接引入: Npm安装 ...
- jquery ajax 全局事件
jquery的ajax方法的全部全局事件:(不管是$.ajax().$.get().$.load().$.getJSON()等都会默认触发全局事件) ajaxStart:ajax请求开始前 ajaxS ...
- android中SeekBar拖动进度条的使用及事件监听
下面和大家分享一下android中SeekBar拖动进度条的使用,以及事件监听.拖动进度条的事件监听需要实现SeekBar.OnSeekBarChangeListener接口,调用SeekBar的se ...
随机推荐
- JavaScript:一句代码输出重复字符串(字符串乘法)
看到一个题目要求写一个函数times,输出str重复num次的字符串. 比如str:bac num:3 输出:abcabcabc 除了利用循环还有几种方法,我学习研究之后记下以下三种方法. 1 ...
- Vova and Train (codeforces 1066A)
数学题.用右边界以内的区间内的灯减去左边界以内区间内的灯,并且如果左边界正好有灯再减去一即可 我的代码 #include <bits/stdc++.h> using namespace s ...
- 02. 爬取get请求的页面数据
目录 02. 爬取get请求的页面数据 一.urllib库 二.由易到难的爬虫程序: 02. 爬取get请求的页面数据 一.urllib库 urllib是Python自带的一个用于爬虫的库,其主要作用 ...
- C语言考试
1.如何定义一个占用空间为0的变量 2.c++如何在指定内存区域创建对象 3.gcc动态库如何调用宿主执行文件的函数,阐述动态链接库的两种加载方式 4.static有什么用处 5.阐述do{...}w ...
- FOJ2250 不可能弹幕结界
Problem 2250 不可能弹幕结界 Time Limit: 1000 mSec Memory Limit : 65536 KB Problem Description 咲夜需要穿过一片弹幕 ...
- 洛谷 1373 dp 小a和uim之大逃离 良心题解
洛谷 1373 dp 这题还不算太难,,当初看的时候不是很理解题意,以为他们会选择两条不同的路径,导致整体思路混乱 传送门 其实理解题意和思路之后还是敲了不短的时间,一部分身体原因再加上中午休息不太好 ...
- noip模拟赛 排序
分析:因为序列是不严格单调的,所以挪动一个数其实就相当于把这个数给删了.如果a[i] < a[i-1],那么可以删掉a[i],也可以删掉a[i-1](!如果没考虑到这一点就只有90分),删后判断 ...
- 相同的雪花 Hash
相同的雪花 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 You may have heard that no two snowflakes are alike. ...
- Windows 10卸载Edge浏览器(不成功的别试了)
在命令行输入: PowerShell dir $env:LOCALAPPDATA\Packages\*edge*^|ren -newname MicrosoftEdge.old ; dir $env: ...
- 相克军_Oracle体系_随堂笔记 PPT
http://www.cnblogs.com/jyzhao/category/581259.html http://download.csdn.net/detail/yzj149286454/8960 ...