我有一个只读的 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 自己的画布绘制方法?如果是这样,我该如何调用图形绘制部分?