Создание динамически обновляемого индикатора выполнения с помощью Rails / Jquery?

Question

Это мой первый «общий» ТАК вопрос - я не ищу, чтобы кто-нибудь написал для меня одну строчку кода, мне просто нужен совет

Яищу метод реализации индикатора выполнения / термометра (в идеале в jquery), который обновляется динамически по мере того, как пользователи вводят данные в форму в моем приложении Rails.Меня не интересует значение полей формы, просто они заполнены или нет.Отдельные поля будут иметь жестко запрограммированные веса (т. Е. При заполнении вашего имени вы получите 1 очко, по электронной почте - 10 баллов и т. Д.), Которые увеличивают количество / процент строки состояния очень асинхронным образом.Я не хочу публиковать или обновлять, чтобы увидеть статус индикатора выполнения.

У меня такое ощущение, что мне придется использовать некоторую готовую библиотеку jquery, например, одну из следующих:

1. Jquery ProgressBar
2. ProgressBarDemo

Вот кикер: я могу 'даже понять, чтобы эти индикаторы выполнения принимали данные из пользовательского ввода в моих формах Rails FormHelper.Я просмотрел все документы API и методы классов и понятия не имею, с чего начать!

Как на счет ТАК?Можете ли вы указать этот N00B в правильном направлении?какие-нибудь хорошие примеры, на которые я мог бы взглянуть?

Заранее спасибо!

~ Dan

Answer 1

Я думаю, что вы могли бы сделать все это через jQuery.Вот как я мог бы представить, что это работает - то есть не писать код, а больше помочь вам продумать этот код.

Во-первых, у вас есть несколько входов, давайте просто скажем, что есть 5, чтобы сделать это легко, и все онитипа 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 при входе на страницу.

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

В дополнение к тому, что сказал Митч.Я бы предложил использовать событие focusout(), которое предоставляет jquery.Затем вы можете проверить каждое поле ввода для его содержимого, как только пользователь покидает его.