1

我有一个只读的 jQuery 旋钮。我已经能够将单位添加到数字显示中（根据How to display units with Jquery Knob），但是当页面重新加载时，表盘的前景（即图形值指示器）不再显示。

这是我的 HTML：

<input class="knob" id="workload" data-angleoffset=-125 data-anglearc=250 value="{{ workload }}" >

（{{ workload }}是一个浮点 Django 模板值 - 它被正确替换）

在我的 jQuery 就绪函数中，我有：

if (jQuery().knob && ! App.isIE8()) {

    // Workload Indicator
    $(".knob").knob({
        'dynamicDraw': true,
        'min': 0, 'max':100,
        'thickness': 0.2,
        'tickColorizeValues': true,
        'readOnly': true,
        'skin': 'tron',
        'fgColor': '#F00', 
        'inputColor':'#3D3D3D',
        'bgColor': '#3D3D3D',
        'width' : 150,
        'draw' : function () {
            $(this.i).val( parseInt(this.cv) + '%');
        }
    });
}

fgColor最初是从模板值设置的，但是上面带有硬编码的代码fgColor会产生相同的结果。

注释掉draw回调按预期工作：旋钮绘制完成，中间有一个数值，外圆弧上有一个红色指示器。取消注释draw修复数字格式（无小数点 + 百分号）。数字格式在初始显示和重新加载时保持正确。然而，红色弧只出现在初始显示上 - 当页面重新加载时它会消失！

那么发生了什么？是否draw覆盖 jquery-knob 自己的画布绘制方法？如果是这样，我该如何调用图形绘制部分？

4

2 回答 2

1

我能够使用这个：

$('.knob').val(0).trigger('change').trigger('draw');
于 2016-12-01T19:18:46.380 回答
0

这是 Sally Maughan（不是这个教区的）发给我的解决方案：

$(".knob").each( function () {
     this.value = Math.round( this.getAttribute('value') );
    }).knob({

    'dynamicDraw': true,
    'min': 0, 'max':100,
    'thickness': 0.2,
    'tickColorizeValues': true,
    'readOnly': true,
    'skin': 'tron',
    'fgColor': wcol,
    'inputColor':'#3D3D3D',
    'bgColor': '#3D3D3D',
    'width' : 150,
    'draw' : function () {
        this.i.val( this.cv + '%');
    }
});

上述版本在每次重新加载时使用来自 HTML 的新值。如果您想通过重新加载保持相同的值，那么 Sally 建议将this.value分配替换为：

this.value = Math.round( this.value.replace('%','') );
于 2014-01-30T16:02:53.553 回答