Ruby on Rails筹款进度条

Question

为众筹网站创建Ruby on Rails滑块进度条的标准方法是什么？

我正在创建一个，并且需要一种方法来展示特定广告系列筹集了多少资金以及为达成广告系列目标还剩下多少。

我无法找到任何特定的Rails，只有少数Jquery插件。有没有更简单的事情可以做到而不必诉诸Javascript / JQuery？

感谢。

Answer 1

你可以使用纯CSS来做到这一点。我们假设广告系列的目标是30000美元。用户已经捐赠了12500美元。因此，我们的进度条应为（12500/30000 * 100％）约42％。

project.rb（例如）

def progress
  pledged / goal * 100
end

的style.css

.progress-bar-wrapper {
  background-color: #CCC;
  height: 20px;
  width 100%;
}

.progress-bar {
  background-color: #33CC33;
  height: 20px;
}

让我们使用erb

<div class="progress-bar-wrapper">
  <div class="progress-bar" style="width: #{@project.progress}%"></div>
</div>

因此，我们从进度方法返回42,777，向其添加％符号并将进度条的样式作为宽度放入。 progress-bar div位于progress-bar-wrapper div中，因此它的宽度为42％。