Cách tạo thanh tải kiểu Youtube bằng Turbolinks của Rails 4?

Question

Có cách nào để tạo thanh tải kiểu Youtube (trang giữa thanh trên cùng) với các liên kết turbo.

Turbolinks có nhiều lần gọi lại khác nhau để bạn có thể thực hiện một bước nhảy vọt qua một vài bước nhưng có cách nào để móc vào tiến trình không?

Answer 1

nprogress-rails có lẽ chỉ là những gì bạn cần.

Answer 2

Được lớn lên ở https://github.com/rails/turbolinks/issues/265

Sẽ không được thêm vào Turbolinks, nhưng cho bạn một tài liệu tham khảo đơn giản để làm thế nào để thêm nó nếu bạn cần.

Answer 3

Trình cắm jQuery được gọi là NG Progress JS dường như có hỗ trợ cho các liên kết turbo. Đây là NG Progress & lựa chọn thay thế.

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

Hy vọng điều đó sẽ giúp ích.

Answer 4

Giả sử bạn có thiết lập Turbolinks đúng cách thêm nProgress JS script vào đường ống nội dung ứng dụng Rails của bạn tức là JS và CSS.

Thiết lập nProgress bằng cách thêm này để tùy chỉnh của bạn JS ...

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

Và đó là nó.

Ps: Hãy xem nProgress Github page để biết thêm thông tin.

Answer 5

Đây là một JS tuyệt vời khác từ Hubspot, được gọi là Pace.

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

Answer 6

Ngày nay một ProgressBar được bao gồm với turbolinks (v.2.5.3)

Answer 7

Kiểm tra turbolinks phiên bản của bạn:

$ gem list |grep turbolinks 
turbolinks (2.5.3) 

nếu bạn phiên bản Turbolinks < 3.0, thêm bên dưới mã để tệp js của bạn (ví dụ: application.js).

Turbolinks.enableProgressBar(); 

nếu bạn đang sử dụng Turbolinks 3.0, thanh tiến trình được bật theo mặc định.

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

thanh tiến trình có thể được tùy chỉnh bằng CSS, giống như:

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