使用 Rails/Jquery 创建动态更新的进度条？答案

【问题标题】：Creating a dynamically updated progress bar with Rails/Jquery?使用 Rails/Jquery 创建动态更新的进度条？
【发布时间】：2011-01-27 04:12:32
【问题描述】：

这是我的第一个“一般”SO 问题 - 我不是在寻找任何人为我编写一行代码，我只是需要一些建议

我正在寻找一种方法来实现进度条/温度计（最好在 jquery 中），当用户在我的 Rails 应用程序的表单中输入数据时，它会动态更新。我不关心表单字段的值，只关心它们是否填写。各个字段将具有硬编码权重（即填写您的姓名给您 1 分，电子邮件 10 分等），以非常 ajax-y 的异步方式增加状态栏的计数/百分比。我不想发布或刷新才能看到进度条的状态。

我觉得我将不得不使用一些预制的 jquery 库，例如以下之一：

Jquery ProgressBar
ProgressBarDemo

问题来了：我什至无法理解如何让这些进度条接受来自 Rails FormHelper 表单中用户输入的数据。我查看了所有 API 文档和类方法，但不知道从哪里开始！

怎么样呢？你能把这个 n00b 指向正确的方向吗？有什么好的例子可以看吗？

提前致谢！

~丹

【问题讨论】：

标签： jquery ruby-on-rails user-interface

【解决方案1】：

我认为你可以通过 jQuery 来完成整个事情。这就是我想象它的工作方式 - 即不编写代码，但更多地帮助您思考这一点。

首先，您有多个输入，假设有 5 个以简化操作，它们都是文本类型。

<input type="text" name="first" value="" />
<input type="text" name="second" value="" />
<input type="text" name="third" value="" />
<input type="text" name="fourth" value="" />
<input type="text" name="fifth" value="" />

那么我们假设这也意味着每一个都值 20% 并且当你进入页面时你的进度条从 0 开始。

HTML：

<div id="progressbar"></div>

jQuery:

$( "#progressbar" ).progressbar({
    value: 0
});

那么简单的事情就是在每个元素发生变化时更新该值。

首先寻找变化：

$('input').change(function(){
    // Code goes here to update
});

你真正需要记住的下一件事是 value 既是 getter 也是 setter。所以只需获取值，将其分配给变量，然后更新值，这可能看起来像这样。

currentValue = parseInt($("#progressbar").progressbar('value')) + 20;
$("#progressbar").progressbar('value',currentValue);

同样，我还没有对此进行测试，但对于如何轻松做到这一点，这是我的最佳猜测。

【讨论】：

从头开始，我给了它一个快速测试，你可以在这里看到工作代码：jsfiddle.net/mitchmalone/HrmGe
如果我能给你 500 票，我会的！现在，如果我能弄清楚如果该字段被清除，如何让进度条值减少/减少。
进度条现在都没有显示在这两个小提琴中。知道为什么吗？我在多个浏览器中进行了测试。昨晚效果很棒（或者我猜是早上！）~Dan
原因是我的CSS资源服务器死了:-(
我已经在我的应用程序中获得了基本功能。真是太感谢你了！

【解决方案2】：

除了米奇所说的。我建议使用 jquery 提供的focusout() 事件。然后，您可以在用户离开后检查每个输入框的内容。

【讨论】：