1

読み取り専用の jQuery Knob があります。数値表示に単位を追加することはできましたが ( 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、数値の書式設定が修正されます (小数点なし + パーセント記号)。数値のフォーマットは、最初の表示と再読み込みで正しいままです。ただし、赤い弧は最初の表示にのみ表示されます。ページが再ロードされると消えます。

それで、何が起こっているのですか？drawjquery-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 に答える