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

Question

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

我在寻找实施进度条/温度计(最好在jQuery的),当用户输入数据到在我的Rails应用程序的形式,动态更新的方法.我并不关心表单字段的价值,只关注它们是否填写.个别领域将有硬编码的权重(即填写你的名字给你1分,电子邮件10点等)递增的状态栏的计数/百分比非常AJAX-Y,异步方式.我不想发布或刷新以查看进度条的状态.

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

1. Jquery ProgressBar
2. ProgressBarDemo

这里的踢球者:我甚至无法捉摸,以得到这些进度条来接受我的Rails表单助手形式根据用户输入的数据.我查看了所有的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);

同样,我还没有测试过这个,但我最好的猜测是如何轻松地做到这一点.