Wie erstellt man eine Youtube-Ladeleiste mit Turbolinks von Rails 4?

Question

Gibt es eine Möglichkeit, einen Youtube-Ladebalken (die Zwischenseite über der oberen Leiste) mit Turbo-Links zu machen.

Turbolinks hat viele verschiedene Rückrufe, so dass Sie einen Sprung über ein paar Schritte machen können, aber gibt es eine Möglichkeit, in den Fortschritt zu hängen?

Answer 1

nprogress-rails ist wahrscheinlich genau das, was Sie brauchen.

Answer 2

Wurde in https://github.com/rails/turbolinks/issues/265

Wird nicht hinzugefügt werden, um Turbolinks, sondern zeigt Ihnen eine einfache Referenz für die es hinzuzufügen gebracht, wenn Sie benötigen.

Answer 3

Ein jQuery-Plugin namens NG Progress JS scheint die Unterstützung für Turbo-Links zu haben. Hier sind die NG Progress & Alternativen.

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

Hoffe, es hilft.

Answer 4

Wenn Sie Turbolinks korrekt eingerichtet haben, fügen Sie nProgress JS script zu Ihrer App-Pipeline für Rails hinzu, d. H. Die JS und .

nProgress durch das Hinzufügen dieser zu Ihrer benutzerdefinierten JS ...

$(document).on('page:fetch', function() { NProgress.start(); }); 
$(document).on('page:change', function() { NProgress.done(); }); 
$(document).on('page:restore', function() { NProgress.remove(); }); 

einrichten und das ist es.

Ps: Überprüfen Sie die nProgress Github page für weitere Informationen.

Answer 5

Hier ist ein weiterer brillanter JS von Hubspot, genannt Pace.

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

Answer 6

heute ein ProgressBar mit turbolinks enthalten ist (v.2.5.3)

Answer 7

Ihre turbolinks Version Check:

$ gem list |grep turbolinks 
turbolinks (2.5.3) 

wenn Ihr Turbolinks Version < 3.0, Code unten in den Sie js-Datei (zum Beispiel: application.js).

Turbolinks.enableProgressBar(); 

Wenn Sie Turbolinks 3.0 verwenden, ist der Fortschrittsbalken standardmäßig aktiviert.

https://github.com/rails/turbolinks#progress-bar.

der Fortschrittsbalken können durch CSS angepasst werden, genau wie:

html.turbolinks-progress-bar::before { 
    background-color: red !important; 
    height: 5px !important; 
}