7

jQuery.knobに問題があり、ノブの値にSufixx を追加する必要があります。

例: 値の後にサフィックス$が必要です。値フィールドに入力して表示しますが、その時点ではノブにステータスが表示されません。

問題のスクリーンショット

ノブの状態は表示されません。（ただし、接尾辞は表示されています）。

コードは次のとおりです。

<input type="text" class="ksta" value="<?php echo stat;?> $" data-width="50" />

サフィックスがなくても完全に機能するため、この問題の解決を手伝ってください。

私の問題のJsfiddleリンク：

http://jsfiddle.net/renishar/DWvsh/19/

jsfiddle では、$記号がなくても機能しますが、$記号の値では機能しません。

( $記号は任意の値または記号です)

4

4 に答える 4

4

51$は有効な int 数値ではないため、コードは実際には機能しないため、0 が表示されます。

プラグインは実際にはプレフィックス/サフィックス機能を実装していないため、コールバックで少しハックを作成しましたdraw:

  • ノブが適用されている入力要素の位置を取得します
  • スパンを作成して入力の後に追加し、入力の同じスタイルをコピーしました
  • 新しい要素の位置を移動して、接尾辞として表示できるようにする

リクエスト: https://github.com/aterrien/jQuery-Knob/issues/65

コード：

    'draw': function () {
        if ($(this.i).siblings(".kb-suffix").length > 0) return
        var pos1 = parseInt($(this.i).css("marginLeft").replace('px', ''));
        var pos2 = parseInt($(this.i).css("marginTop").replace('px', ''));
        var $elem = $("<span>$</span>").attr("style", $(this.i).attr("style")).addClass("kb-suffix");
        $elem.insertAfter(this.i).css({
            marginLeft: (pos1 + 20) + "px",
            marginTop: (pos2 + 3) + "px",
            zIndex: -10
    });

デモ: http://jsfiddle.net/IrvinDominin/ngX5p/

于 2014-01-29T12:42:38.107 に答える
3 
    <input type="text" class="ksta" value="51" data-width="80" data-thickness="0.2"/>


      jQuery(document).ready(function($){
            $('.ksta').knob({
                'min':0,
                'max':100,
                'step': 1,
                'readOnly': false,
                'data-linecap': 'round'
            });
            $('.ksta').each(function(e){
               $(this).val($(this).val()+'$'); 
            });     
        });

http://jsfiddle.net/DWvsh/6/

于 2014-01-29T10:19:37.637 に答える
2

ノブのバージョン1.2.8（現在の書き込み）については、単純にフォーマット機能を使用してください

jQuery(document).ready(function($){
            $('.ksta').knob({
                'min':0,
                'max':100,
                'step': 1,
                'readOnly': false,
                'data-linecap': 'round',
                'format': function(v){ return v + ' $';}
            });
        });
于 2014-04-17T08:05:05.613 に答える