使用Rails/Jquery创建动态更新的进度栏? [英] Creating a dynamically updated progress bar with Rails/Jquery?
问题描述
这是我的第一个一般性"问题-我不是在寻找任何人为我编写一行代码，我只需要一些建议
我正在寻找一种实现进度条/温度计的方法(理想情况下是在jQuery中)，当用户在Rails应用程序中向表单中输入数据时，它会动态更新.我不关心表单字段的值，而无论它们是否填写.各个字段将采用硬编码的权重(即，填写您的姓名会给您1分，通过电子邮件发送10分等)，可以以非常接近，异步的方式增加状态栏的计数/百分比.我不想发布或刷新以查看进度栏的状态.
I'm looking for a method to implement a progress bar/thermometer (ideally in jquery) that updates dynamically as users enter data into a form in my Rails app. I'm not concerned with the value of the fields of the form, just whether they are filled out or not. Individual fields will have hard coded weights (i.e. filling out your name gives you 1 point, email 10 points, etc) that increment the count/percentage of status bar in a very ajax-y, asynchronous way. I don't want to have to post or refresh to see the status of the progress bar.
我有种感觉，我将不得不使用一些以下形式的预制jquery库:
I have a feeling I'm going to have to use some premade jquery library like one of the following:
这是关键:我什至无法获得这些进度条，以接受来自Rails FormHelper表单中用户输入的数据.我看过所有的API文档和类方法，却不知道从哪里开始！
Here's the kicker: I can't even fathom to to get these progress bars to accept data from user input in my Rails FormHelper forms. I've looked at all the API docs and class methods and have no idea where to start!
那又如何呢?您能将此n00b指向正确的方向吗?有什么好的例子我可以看看吗?
How about it SO? Can you point this n00b in the right direction? any good examples I could look at?
提前谢谢！
〜丹
推荐答案
我认为您可以通过jQuery完成整个操作.这就是我想像的那样工作-即，不编写代码，而是更多地帮助您彻底理解这一点.
I think you could just do the entire thing via jQuery. This is how I would imagine it working - i.e. not writing the code but more helping you think this one through.
首先，您有几个输入，为了简单起见，我们输入了5个，它们都是文本类型.
Firstly, you have several inputs, let's just say there are 5 to make it easy and they are all of type text.
<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开始.
Then let's assume that also means that each one is worth 20% and that your progress bar starts at 0 when you enter the page.
HTML:
<div id="progressbar"></div>
jQuery:
$( "#progressbar" ).progressbar({
value: 0
});
那么简单的事情就是在更改每个元素时更新该值.
Then the simple thing to do would be to update that value when each element is changed.
首先寻找变化:
$('input').change(function(){
// Code goes here to update
});
实际上，您接下来需要记住的一件事是，值既是获取器又是设置器.因此，只需获取该值，将其分配给一个变量，然后更新该值，就可能看起来像这样.
Them really the next thing you need to remember is that value is both a getter and a setter. So simply get the value, assign it to a variable, then update the value, which would probably look something like this.
currentValue = parseInt($("#progressbar").progressbar('value')) + 20;
$("#progressbar").progressbar('value',currentValue);
同样，我还没有测试过，但这是关于如何轻松完成的最佳猜测.
Again, I haven't tested this, but it's my best guess as to how to very easily do it.
这篇关于使用Rails/Jquery创建动态更新的进度栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
