NProgress.js全站进度条插件 中文API
来源:互联网 发布:汇丰银行 软件 招聘 编辑:程序博客网 时间:2024/05/29 03:04
移动设备的浏览器都有一条蓝色或者是红色的loading加载进度条,它会在你切换页面时出现,但是在网页上实现可不多见。不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现!
NProgress介绍
这是来自菲律宾马尼拉的[Rico Sta Cruz] (http://ricostacruz.com/)实现了Medium和YouTube等知名网站最近开始采用的全站进度条UI模式,并以MIT许可证开源。
这个项目在GitHub上Fork过百,Star超过2400,算是比较火的新项目了。
二、安装插件
添加 jQuery (1.8 or above),nprogress.js
和 nprogress.css
到你的项目中。
<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>
NProgress也可以通过bower 和 npm 或者 spm 安装。
$ bower install --save nprogress$ npm install --save nprogress
使用方法
接下来我们介绍一些如何使用这个插件。
基础入门
简单的调用 start()
和 done()
方法来控制进度条。
NProgress.start();NProgress.done();
Turbolinks
加入你使用Turbolinks 1.3.0+,那么你也可以这样使用:
$(document).on('page:fetch', function() { NProgress.start(); });$(document).on('page:change', function() { NProgress.done(); });$(document).on('page:restore', function() { NProgress.remove(); });
Pjax
如果你使用Pjax,也可以这样使用:
$(document).on('pjax:start', function() { NProgress.start(); });$(document).on('pjax:end', function() { NProgress.done(); });
建议
- 添加这个到有AJAX调用的地方!绑定到 jQuery ajaxStart 和 ajaxComplete 事件上。
- 在不使用 Turbolinks/Pjax 的情况下做一个有特效的进度条事件! 绑定到
$(document).ready
和$(window).load
。
高级用法
Percentages:设置一个进度百分比,调用 .set(n)
,其中n
的取值范围是0
到1.0
NProgress.set(0.0); // Sorta same as .start()NProgress.set(0.4);NProgress.set(1.0); // Sorta same as .done()
Incrementing:添加一个进度,只需要调用.inc()
方法,这是一个随机的增量。这个进度将永远不会得到100%:使用它为每一个图像加载(或类似)。
NProgress.inc();
如果你想通过某个特定的值来增加,你可以通过这个参数:
NProgress.inc(0.2);// This will get the current status value and adds 0.2 until status is 0.994
Force-done:通过设置 done() 为
true
,甚至是是不显示进度条(默认行为是done()
。如果没有则 start()
不会被调用)。
NProgress.done(true);
Get the status value:要获取当前的进度值,需要使用.status
属性
var my_progress_val = NProgress.status;
四、配置插件
上面简介介绍如何使用NProgress.js
,那么接下来我们来介绍一下这个插件的配置参数。
minimum
通过 minimum 来修改最小百分比。
NProgress.configure({ minimum: 0.1 });
template
你可以通过 template
修改标记结构。为了保证进度条正常工作,需要一个包含 role='bar'
属性的元素。
NProgress.configure({ template: "..."});
easing and speed
通过 ease
(一个 CSS 中的 easing
值) 调整动画设置和速度 speed
(毫秒ms
)。
NProgress.configure({ ease: 'ease', speed: 500 });
trickle
想关闭进度条步进?设置 trickle
为 false
。
NProgress.configure({ trickle: false });
trickleRate and trickleSpeed
你可以调整 trickleRate
(每次步进增长多少) 和 trickleSpeed
(步进间隔,单位毫秒ms
).
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
showSpinner
想禁用进度环?设置 showSpinner
为 false
。
NProgress.configure({ showSpinner: false });
NProgress: 在javascript中显示进度条。
parent
指定NProgress生成代码的父级元素,默认为:body
NProgress.configure({ parent: '#container' });
定制
Just edit nprogress.css
to your liking. Tip: you probably only want to find and replace occurrences of #29d
.
The included CSS file is pretty minimal… in fact, feel free to scrap it and make your own!
Resources
- New UI Pattern: Website Loading Bars (usabilitypost.com)
Support
Bugs and requests: submit them through the project’s issues tracker.
- NProgress.js全站进度条插件 中文API
- NProgress.js全站jquery进度条插件
- jquery网页加载进度条NProgress.js
- jquery网页加载进度条NProgress.js
- jquery中NProgress插件使用详解(中文)
- NProgress,前端必备进度条插件,你值得拥有
- NProgress.js:一个新的网页进度条控件
- 在vue项目中使用Nprogress.js进度条
- nprogress页面加载进度条使用
- NProgress.start();请求的进度条
- 简单进度条插件JS
- jQuery全屏滚动插件FullPage.js中文帮助文档API
- jQuery全屏滚动插件FullPage.js中文帮助文档API
- jQuery全屏滚动插件FullPage.js中文帮助文档API
- jQuery全屏滚动插件FullPage.js中文帮助文档API
- jQuery全屏滚动插件FullPage.js中文帮助API
- jQuery全屏滚动插件FullPage.js中文帮助文档API
- jQuery全屏滚动插件fullPage.js中文文档API
- zTree Cannot read property 'init' of undefined的一种解决方式
- C# 在PDF中创建和填充域
- boost条件变量使用
- LeetCode 27. Remove Element
- MySQL数据约束
- NProgress.js全站进度条插件 中文API
- Android:使用EventBus
- iOS开发CGRectGetMidX. CGRectGetMidY.CGRectGetMinY. CGRectGetMaxY. CGRectGetMinX. CGRectGetMaxX的使用
- Vuejs学习系列(二十三)-- 条件语句(一)
- PHP:用date函数获取当前时间有误的疑问
- 蓝桥杯2017模拟赛-猜算式
- Modbus软件开发实战指南 之 modbus 地址
- MySQL多表关联查询+子查询_R
- R语言编程中的常见错误