plugin

NProgress的使用

NProgress插件的使用

nprogress插件是一个适用于ajax应用的轻量级的进度条插件。

使用步骤

一、 引入

1
2
<link rel='stylesheet' ref='nprogress.css'/>
<script src='nprogress.js'></script>

二、语法

1
2
3
4
5
6
7
//引入了nprogress.js文件后，就有了一个全局对象NProgress对象
//开启进度条
NProgress.start();
//关闭进度条
NProgress.done();
// 配置禁用小圆环
NProgress.configure({ showSpinner: false });

和jQuery的配合使用

  • 添加到调用 Ajax 的地方，将它和 jQuery ajaxStart 和 ajaxStop 事件绑定起来

jQ中AJAX的全局事件

ajax提供了6个全局函数，会被页面中所有的ajax请求触发，在不同时间点会触发不同的全局事件。

在页面中会有很多的ajax请求，但是这些ajax请求都有相同的消息机制，比如我们需要在ajax请求发送之前弹出一个提示框，提示”正在读取数据….” ，在ajax请求成功时显示”获取数据成功…”，在ajax结束后隐藏提示框等。如果不使用全局事件，那么需要在每一个ajax的beforeSend、success、complete回调函数中都加上相同的代码。

  • jquery的全局事件需要给document注册（固定写法）
1
2
3
$(document).ajaxStart(function () {
  console.log("ajaxStart，这是在开始一个ajax请求时触发的事件");
});
  • 全局事件的执行时机
1
2
3
4
5
6
1. ajaxStart  	在开始一个ajax请求时触发
2. ajaxSend		在beforeSend回调函数之后触发
3. ajaxSuccess	在success回调函数之后触发
4. ajaxError	在error回调函数之后触发
5. ajaxComplete	在complete回调函数之后触发
6. ajaxStop		在ajax请求结束时触发

官网：http://ricostacruz.com/nprogress/

github地址：https://github.com/rstacruz/nprogress

参考文档：http://blog.csdn.net/joyhen/article/details/24458427