用Rails/Jquery創建一個動態更新的進度條？

這是我的第一個「一般」 SO的問題 - 我不找別人寫的一行代碼對我來說，我只是需要一些建議用Rails/Jquery創建一個動態更新的進度條？

我在尋找實現的方法進度條/溫度計（最好在jQuery中），當用戶在我的Rails應用程序中輸入數據時，動態更新。我不關心表單域的價值，只關注它們是否被填寫。單個字段將具有硬編碼權重（即填寫你的名字給你1分，電子郵件10分等），以異步方式以非常ajax-y的方式遞增狀態欄的計數/百分比。我不想發佈或刷新以查看進度欄的狀態。

我有一種感覺，我將不得不使用一些預製的jQuery庫，如下列之一：

Jquery ProgressBar
ProgressBarDemo

這裏的踢球者：我甚至無法理解爲了讓這些進度條在我的Rails FormHelper表單中接受來自用戶輸入的數據。我已經看過所有的API文檔和類方法，不知道從哪裏開始！

怎麼樣呢？你能把這個n00b指向正確的方向嗎？我可以看的任何好例子？

在此先感謝！

〜丹

來源

2011-01-27 thoughtpunch

我想你可以只通過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 
});

他們真的是你需要記住，接下來的事情就是價值既是一個getter和一個setter。所以簡單地獲取值，將其分配給一個變量，然後更新值，這可能看起來像這樣。

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

再一次，我沒有測試過這個，但這是我最好的猜測，就如何非常容易地做到這一點。

來源

2011-01-27 04:23:03 Mitch

劃痕，我給它一個快速測試，你可以在這裏看到工作代碼：http://jsfiddle.net/mitchmalone/HrmGe/ – Mitch 2011-01-27 04:25:10

此外米奇說。我建議使用jQuery提供的focusout()事件。然後，一旦用戶離開它，您可以檢查每個輸入框的內容。

來源

2011-01-27 04:24:36 Dan

用Rails/Jquery創建一個動態更新的進度條？

回答

相關問題