NProgress.js全站进度条插件 中文API | 您所在的位置:网站首页 › scrap的用法 › NProgress.js全站进度条插件 中文API |
移动设备的浏览器都有一条蓝色或者是红色的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 到你的项目中。 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.994Force-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) SupportBugs and requests: submit them through the project’s issues tracker. |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |