0

我设计了一个自我跟踪前端，参与者在前端输入数字。虽然这些被写入数据库，但我希望它们能够立即可视化。为了做一些计算，我使用 calx 一个 jquery 插件（它允许像 excel 一样的计算）。所以我有如下表单字段：

<td><input name="name1" type="text" id="cc3" size="10" data-formula="($bb3/$aa3)*100">

然后 data-formula 为该框显示一个值。我现在想将此值（此处以百分比表示）可视化为条形（如此处描述的进度条http://jsfiddle.net/Z6k3C/）。

问题是，我才开始使用 js 和 jquery，我无法弄清楚如何将数据公式中的值解析为以下代码片段，因此栏会随着输入的数字动态变化（不是点击，而是更改)

$(function() {
var colors = [];
$("#slider").slider({
    max  : 200,
    value: 10,
    slide: function(event, ui) {
        colors = (ui.value < 20) ? ['#f00','#000'] : ['#ff0','#000'];
        colors = (ui.value > 50 && ui.value < 100) ? ['#080','#fff'] : colors; 
        colors = (ui.value > 100) ? ['#808','#fff'] : colors;
        $(".ui-progressbar-value").css({'width' : ui.value + "%", 'backgroundColor' : colors[0] });
        $(".ui-progressbar-text").css('color', colors[1]).text(ui.value + "%");
    }
});

我希望你能理解我的问题，希望能得到你的帮助。

亲切的问候，乔恩

4

1 回答 1

0

您可以在每次按下键后使用keyup()forinput获取值

见：http: //jsfiddle.net/Z6k3C/78/

我必须添加change功能slider来动态更改进度条。

于 2013-06-29T20:40:47.773 回答