Question

我正在尝试使用Bootstrap-Progressbar.js https://github.com/minddust/bootstrap-progressbar根据用户完成（事件的）百分比动态呈现进度条。我在用户控制器中计算VALUE：

# Calculate percentage complete
  if @hours_total <= 120
    @hours_total_raw = @hours_total                            
    @hours_total_percentage = (@hours_total).to_f/120.to_f.round(0)
  else @hours_total >= 121
    @hours_total_raw = 120
    @hours_total_percentage = 100
  end

在用户的状态页面中，我有Bootstrap进度条代码（如上面的Minddust所示）：

<div class="progress">
  <div class="progress progress-bar-success" role="progressbar" aria-valuenow = "VALUE"
  aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

顺便说一下，Minddust说要用数据转换替换咏叹调。不幸的是，那个＆＃34; bricked＆＃34;我的进度条（在Mac上的Chrome中）使用Minddust的术语，所以我回到了aria-valuenow。

VALUE传递给TO - 而不是来自 - 以下javascript以呈现进度条：

$(document).ready(function() {
  $(".progress .progress-bar-success").progressbar({
});

这是Minddust演示中的基本功能。无论我手动设置VALUE的数量，进度条都会正确呈现为100％的百分比。如何将数字传递给VALUE - 这是在div括号内＆lt; div ... aria-valuenow =＆＃34; VALUE＆＃34;取代。＆＃34; VALUE＆＃34;是一个尚未保存到数据库的实例变量;它是在飞行中计算的。

我在Stackoverflow上找到的答案，例如，问题＃21182058的优秀答案（从复选框传递预定义的值），所有建议使用javascript;但是，它们都处理的情况是，一个人从html传递一个值而不是动态地改变那个值。

我尝试了各种方法，甚至将价值作为＆＃34;数据＆＃34;附加到链接，将用户重新定向到状态页面，没有运气。我想做什么甚至可行？是否有一个宝石 - 或者不同的方法 - 这将实现这一目标？提前感谢您的帮助。

Answer 1

这是有效的代码 HTML：

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="
      <%= @hours_total_percentage %>" aria-valuemin="0" aria-valuemax="100" style="width: 
      <%= @hours_total_percentage %>%;"><span style="text-align: center;">
      <%= @hours_total_percentage %>%</span>
    </div>     
  </div>

Javascript - Minddust默认选项的代码（如上所述）：

$(document).ready(function() {
  $(".progress .progress-bar-success").progressbar({
    transition_delay: 0,
    refresh_speed: 0,
    display_text: 'center',
    use_percentage: true,
    percent_format: function(percent) { return percent + '%'; },
    amount_format: function(amount_part, amount_total) { return amount_part + ' / ' + 
    amount_total; },
    update: $.noop,
    done: $.noop,
    fail: $.noop
  });
});

为了记录，我不太确定之前没有工作的东西。我曾经尝试过这种方法而且没有用。也许将默认值添加到javascript？

Answer 2

为此，您可以设置进度条的某些属性。

var value = 55;// make call to get value from server.
var $progressBar = $('.progress .progress-bar');
$progressBar.css('width', value + '%');
$progressBar.attr('aria-valuenow', value + '%');
$progressBar.html(value + '%');

使用Bootstrap-Progressbar.js动态渲染Rails项目中的进度条

2 个答案: