使用bootstrap进度条的Rails动态数据进度条可以通过以下步骤实现:
gem 'bootstrap'
,然后运行bundle install
来安装。接着,在application.css文件中添加*= require bootstrap
来引入Bootstrap的样式。<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
class ProgressController < ApplicationController
def show
@progress = calculate_progress
respond_to do |format|
format.html
format.json { render json: { progress: @progress } }
end
end
private
def calculate_progress
# 根据业务逻辑计算进度值
# 例如,可以通过查询数据库或其他方式获取数据,并计算进度值
# 返回一个介于0到100之间的进度值
end
end
$(document).ready(function() {
setInterval(function() {
$.ajax({
url: '/progress', // 这里是进度值获取的路由
dataType: 'json',
success: function(data) {
var progress = data.progress;
$('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
}
});
}, 1000); // 每秒钟获取一次进度值
});
# config/routes.rb
Rails.application.routes.draw do
get 'progress', to: 'progress#show'
end
这样,当访问进度条的页面时,JavaScript会定期向服务器请求进度值,并更新进度条的显示。
领取专属 10元无门槛券
手把手带您无忧上云