有没有办法用涡轮链接制作一个 Youtube 风格的加载栏(顶部栏的页面间)。
Turbolinks 有很多不同的回调,所以你可以在几个步骤中做出一个跳跃的回调,但是有没有办法也挂钩到进度?
有没有办法用涡轮链接制作一个 Youtube 风格的加载栏(顶部栏的页面间)。
Turbolinks 有很多不同的回调,所以你可以在几个步骤中做出一个跳跃的回调,但是有没有办法也挂钩到进度?
nprogress-rails可能正是您所需要的。
检查您的 turbolinks 版本:
$ gem list |grep turbolinks
turbolinks (2.5.3)
如果您的 Turbolinks 版本 < 3.0,请将以下代码添加到您的 js 文件中(例如:)application.js
。
Turbolinks.enableProgressBar();
如果您使用的是 Turbolinks 3.0,则默认情况下会打开进度条。
https://github.com/rails/turbolinks#progress-bar。
进度条可以通过 CSS 自定义,就像:
html.turbolinks-progress-bar::before {
background-color: red !important;
height: 5px !important;
}
假设您已正确设置 Turbolinks,请将nProgress JS 脚本添加到您的 Rails 应用程序资产管道,即JS和CSS。
通过将其添加到您的自定义 JS 来设置 nProgress ...
$(document).on('page:fetch', function() { NProgress.start(); });
$(document).on('page:change', function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });
就是这样。
Ps:查看nProgress Github 页面了解更多信息。
这是来自 Hubspot 的另一个出色的 JS,称为 Pace。
在https://github.com/rails/turbolinks/issues/265中长大
不会添加到 Turbolinks,但会向您展示如何在需要时添加它的简单参考。
现在一个 ProgressBar 包含在 turbolinks (v.2.5.3)
一个名为 NG Progress JS 的 jQuery 插件似乎支持 turbo 链接。以下是 NG 进展和替代方案。
http://www.webiyo.com/2013/09/youtube-style-ajax-progress-bar-using.html
希望能帮助到你。