Как добавить суффикс значения в jQuery.knob

У меня проблема с jQuery.knob. Мне нужно добавить Sufixx к значению в ручке.

Например: мне нужен суфикс $ после значения, я просто помещаю его в поле значения, оно отображается, но в это время ручка не показывает статус.

снимок экрана для проблемы

он не будет показывать состояние ручки. (но суффикс отображается).

вот код:

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

без суффикса он работает отлично, помогите мне решить эту проблему.

Ссылка Jsfiddle для моей проблемы:

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

в jsfiddle он работает без знака $, но не работает со значением знака $.

(знак $ может быть любым значением или символом)


php jquery jquery-knob
person ReNiSh AR    schedule 28.01.2014    source источник

Ответы (4)


arrow_upward
15
arrow_downward

Попробуйте это простым способом,

jQuery(document).ready(function($){
        $('.ksta').knob({
            'min':0,
            'max':100,
            'step': 1,
            'displayPrevious': true,
            'readOnly': true,
            'draw' : function () { $(this.i).val(this.cv + '%'); }
        });
    });

Нет необходимости менять стили и другие детали.....

Демонстрация: http://jsfiddle.net/renishar/DWvsh/20/

person Keerthi Menon    schedule 29.01.2014
comment
Но таким образом значение поля ввода будет испорчено приложением см.: jsfiddle.net/IrvinDominin/2aZTx и jsfiddle.net/IrvinDominin/2aZTx/1 - person Irvin Dominin; 29.01.2014
comment
@ Ирвин Доминин, он же Эдвард: в этом случае значение правильно выровнено внутри ручки, без каких-либо изменений в css ручки ... я думаю, так лучше. - person ReNiSh AR; 30.01.2014
comment
@ReNiShAR, как вы предпочитаете (css ручки не изменяется...), мне не нравится иметь значение, содержащее приложение, но это ваш выбор - person Irvin Dominin; 30.01.2014

arrow_upward
4
arrow_downward

Ваш код на самом деле не работает, потому что 51$ не является допустимым целым числом, поэтому он отображает 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/

person Irvin Dominin    schedule 29.01.2014
comment
в вашем коде есть проблема.. Ручка меняет значения при прокрутке или перетаскивании мыши только в нижней части ручки.... - person ReNiSh AR; 29.01.2014
comment
@ReNiShAR Я вижу проблему, это может быть проблема с zIndex, попробуйте обновленный код - person Irvin Dominin; 29.01.2014
comment
есть ли способ без изменения характеристик css? - person ReNiSh AR; 29.01.2014
comment
@ReNiShAR нет, на самом деле это единственный способ, который я нашел, элементы абсолютно позиционируются плагином, когда у меня есть время, я пытаюсь разветвить и обновить или расширить - person Irvin Dominin; 29.01.2014

arrow_upward
3
arrow_downward 

    <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/

person Suman KC    schedule 29.01.2014
comment
попробовал это,,,, но на этот раз ручка не работает.... пожалуйста, проверьте это на jsfiddle... - person ReNiSh AR; 29.01.2014
comment
@ReNiShAR Кроме того, вам осталось сохранить знак переменной «$» перед stat. - person Suman KC; 29.01.2014
comment
Поле значений меня является динамическим ?,,, но для многих ручек ваше решение не работает.. chk выше jsfidle - person ReNiSh AR; 29.01.2014
comment
при прокрутке внутри ручки символ исчезает,, - person ReNiSh AR; 30.01.2014

arrow_upward
2
arrow_downward

Что касается версии 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 + ' $';}
            });
        });
person Laci Kosco    schedule 17.04.2014