带有ajax的旋钮圆形进度条

Question

我正在尝试将 Knob 与 AJAX 一起使用，它正在工作，但进度条没有变化，只有实时数字。

您可以在这里查看：www.skincannon.com

代码是： HTML:

<input id="val" type="text" value="0" /> <input type="button" value="Change" />

AJAX:

$.ajax({
    type: "GET",
    url: "currentitemswidth.php",
    success: function(msg){
        $('#val').val(msg);
    }
});

并且我正在使用 ajax 更改值，但栏不会更改。

有人可以帮助我吗？如果您需要更多代码，请告诉我。

我需要这样的东西，但我想自动更改它，而不是点击“更改”按钮：http://www.jqueryajaxphp.com/dynamically-animate-jquery-knob/

谢谢

Answer 1

这里我已经用jQuery roundSlider插件实现了你的要求。我认为这很适合你，因为你可以很容易地自定义这个滑块的外观和动画风格。查看下面的演示：

`Demo`

有关详细信息，请查看 demos and documentation 页面。

编辑：

在 ajax success what value you got 中，您可以将该值分配给滑块。如下所示：

$.ajax({
    type: "GET",
    url: "currentitemswidth.php",
    success: function(msg){
        $('#val').val(msg);

        // use the below code to dynamically update the roundSlider value
        $("#slider").roundSlider("option", "value", msg);
    }
});

带有ajax的旋钮圆形进度条

Knob circular progress bar with ajax

ajax

jquery-knob

round-slider

`Demo`

编辑：