Question

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

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

我有一种感觉，我将不得不使用一些premade jquery库，如下所示：

的 Jquery ProgressBar
ProgressBarDemo

以下是踢球者：我甚至无法理解这些进度条以接受来自Rails FormHelper表单中用户输入的数据。我查看了所有的API文档和类方法，不知道从哪里开始！

怎么样？你能指出这个n00b正确的方向吗？我能看到的任何好例子吗？

提前致谢！

〜丹

Answer 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
});

你真正需要记住的是，值既是吸气剂又是设定者。因此，只需获取值，将其分配给变量，然后更新值，这可能看起来像这样。

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

同样，我还没有对此进行测试，但我最好猜测如何轻松实现。

Answer 2

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

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

2 个答案: