20

有没有办法用涡轮链接制作一个 Youtube 风格的加载栏（顶部栏的页面间）。

Turbolinks 有很多不同的回调，所以你可以在几个步骤中做出一个跳跃的回调，但是有没有办法也挂钩到进度？

4

7 回答 7

29

nprogress-rails可能正是您所需要的。

于 2013-09-15T17:18:03.870 回答
16

检查您的 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;
}

在此处输入图像描述

于 2015-09-02T08:51:24.983 回答
3

假设您已正确设置 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 页面了解更多信息。

于 2013-12-16T16:06:22.587 回答
1

这是来自 Hubspot 的另一个出色的 JS，称为 Pace。

http://github.hubspot.com/pace/docs/welcome/

于 2015-01-11T06:16:00.767 回答
1

在https://github.com/rails/turbolinks/issues/265中长大

不会添加到 Turbolinks，但会向您展示如何在需要时添加它的简单参考。

于 2013-08-19T21:57:59.193 回答
1

现在一个 ProgressBar 包含在 turbolinks (v.2.5.3)

于 2015-08-26T13:06:27.260 回答
0

一个名为 NG Progress JS 的 jQuery 插件似乎支持 turbo 链接。以下是 NG 进展和替代方案。

http://www.webiyo.com/2013/09/youtube-style-ajax-progress-bar-using.html

希望能帮助到你。

于 2013-09-02T05:58:39.040 回答