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()取代。