C'è un modo per creare una barra di caricamento di uno stile di Youtube (l'interpagina attraverso la barra in alto) con i turbo-link.Come creare una barra di caricamento in stile Youtube con i turbolink di Rails 4?
Turbolinks ha un sacco di diverse richiamate in modo da poter fare uno strappo attraverso pochi passaggi, ma c'è un modo per aggancio anche nel progresso?
nprogress-rails è probabilmente proprio quello che ti serve.
è stato portato in https://github.com/rails/turbolinks/issues/265
non sarà aggiunto al Turbolinks, ma si mostra un semplice riferimento per il modo di aggiungerlo se è necessario.
Sarebbe questo media ramificazione i turbolinks js o si potrebbe aggiungere alla normale file di js? – Smickie
Un jQuery Plugin chiamato NG Progress JS sembra avere il supporto per i collegamenti turbo. Ecco le alternative NG Progress &.
http://www.webiyo.com/2013/09/youtube-style-ajax-progress-bar-using.html
Speranza che aiuta.
Supponendo di avere impostato Turbolinks correttamente, aggiungere nProgress JS script alla pipeline di asset dell'app Rails, ovvero JS e CSS.
Impostare nProgress aggiungendo questo per la vostra abitudine JS ...
$(document).on('page:fetch', function() { NProgress.start(); });
$(document).on('page:change', function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });
E questo è tutto.
Ps: consulta lo nProgress Github page per ulteriori informazioni.
Grazie! questo ha risposto alla mia domanda :)! – 0bserver07
Ecco un altro brillante JS di Hubspot, chiamato Pace.
Al giorno d'oggi un ProgressBar è incluso con turbolinks (v.2.5.3)
Sì. Vedi: https://github.com/rails/turbolinks/pull/415 –
Controllare la versione turbolinks:
$ gem list |grep turbolinks
turbolinks (2.5.3)
se la versione Turbolinks < 3.0, aggiungere sotto il codice a file js (ad esempio: application.js).
Turbolinks.enableProgressBar();
se si utilizza Turbolinks 3.0, la barra di avanzamento è attivata per impostazione predefinita.
https://github.com/rails/turbolinks#progress-bar.
la barra di avanzamento può essere personalizzato CSS, proprio come:
html.turbolinks-progress-bar::before {
background-color: red !important;
height: 5px !important;
}
Questo non ha nulla a che fare con il ciclo di vita dei turbolinks. – Smickie
Lo stiamo usando [email protected] non è corretto, la gemma ha ganci da integrare ed esegue la barra di avanzamento con diverse tecniche, in particolare Turbolinks, Pjax e Ajax. –
una soluzione molto bella e facile da implementare – cwd