javascript - Ruby on Rails 筹款进度条

Question

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

我正在创建一个，需要一种方法来显示特定事件已筹集了多少资金以及还剩多少资金来实现事件目标。

我没能找到任何特定于 Rails 的东西，只有几个 Jquery 插件。有没有什么更简单的事情可以完成而不必求助于 Javascript/JQuery？

谢谢。

Answer 1

您可以使用纯 CSS 来实现。我们假设事件目标是 30000 美元。用户已捐赠 12500 美元。因此，我们的进度条应该是 (12500/30000 * 100%) 大约 42%。

project.rb(例如)

def progress
  pledged / goal * 100
end

样式.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>

因此，我们从 Progress 方法返回 42,777，向其添加 % 符号，并将进度条的样式设置为宽度。 Progress-bar div 位于progress-bar-wrapper div 内部，因此它将是其宽度的 42%。