jQuery旋钮上的覆盖单位在页面重新加载时无法正确重绘 [英] Overriding units on a jQuery Knob does not redraw correctly on page reload

问题描述

我有一个只读的jQuery旋钮.我已经能够将单位添加到数字显示中(按照如何显示单位使用Jquery Knob )，但是重新加载页面时，拨号盘的前景(即图形值指示器)不再显示.

I have a readonly jQuery Knob. I have been able to add units to the numeric display (as per How to display units with Jquery Knob ), but the foreground (ie. graphical value indicator) of the dial is no longer displayed when the page is reloaded.

这是我的HTML:

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

({{ workload }}是浮点Django模板值-已被正确替换)

( {{ workload }} is a floating point Django template value - it is being substituted correctly )

在我的jQuery ready函数中，我有:

Inside my jQuery ready function, I have:

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的代码会产生相同的结果.

fgColor was originally set from the template value, but the above code with a hard-coded fgColor produces the same result.

注释draw回调可按预期工作:旋钮绘制完整，中间有一个数值，外圆弧上有一个红色指示器. 取消对draw的注释，可以修复数字格式(无小数点+百分号).数字格式对于初始显示和重新加载仍然保持正确. 但是，红色弧仅出现在初始显示上-重新加载页面后消失！

Commenting out the draw callback works as expected: The knob is drawn complete with a numeric value in the middle and a red colored indicator on the outside arc. Uncommenting the draw fixes the numeric formatting (no decimal points + a percentage sign). The numeric formatting remains correct for initial display and on re-load. However the red arc only appears on the initial display - it disappears when the page is re-loaded!

那是怎么回事?是draw替代jquery-knob自己的画布绘制方法吗?如果是这样，我该如何称呼图形绘制部分?

So what is going on? Is draw over-riding jquery-knob's own canvas draw method? If so, how can I call the graphical draw part?

推荐答案

以下是Sally Maughan(不是该教区)发送给我的解决方案:

Here is the solution, sent to me by Sally Maughan (not of this parish):

$(".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分配替换为:

The above version uses a new value from the HTML with each reload. If you want to keep the same value through the reload, then Sally suggests replacing the this.value assignment with:

this.value = Math.round( this.value.replace('%','') );

这篇关于jQuery旋钮上的覆盖单位在页面重新加载时无法正确重绘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！