Как использовать скин tron ​​jqueryKnob?

Question

Ну, это мое первое использование плагина jqueryKnob. Я пытаюсь использовать параметр формата и параметр скина в этом плагине, но он не работает. Для проблемы с кожей я пытался решить проблему с jQuery knob tron, но это не помогло. Где я могу пойти не так?

<script>
    $(function() {
        $('.dial').knob({
            readOnly:true,
            fgColor:"#D07321",
            inputColor:"#3e4040",
            thickness: 0.1,
            skin:"tron",

            draw : function () {

                // "tron" case
                if(this.$.data('skin') == 'tron') {

                    this.cursorExt = 0.3;

                    var a = this.arc(this.cv)  // Arc
                        , pa                   // Previous arc
                        , r = 1;

                    this.g.lineWidth = this.lineWidth;

                    if (this.o.displayPrevious) {
                        pa = this.arc(this.v);
                        this.g.beginPath();
                        this.g.strokeStyle = this.pColor;
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                        this.g.stroke();
                    }

                    this.g.beginPath();
                    this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                    this.g.stroke();

                    this.g.lineWidth = 2;
                    this.g.beginPath();
                    this.g.strokeStyle = this.o.fgColor;
                    this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                    this.g.stroke();

                    return false;
                }
            }
        })
    });
</script>

HTML

<input title="" type="text" value="75" class="dial">

Answer 1

Здесь проблема в том, что вы пропустили атрибут data-skin="tron" в элементе.

Проверьте обновленную демонстрацию: Demo with knob

В качестве альтернативы я предлагаю вам использовать плагин jQuery roundSlider, который состоит из базовых элементов DOM. Таким образом, вы можете настроить общий внешний вид элемента управления с помощью самого CSS, и вам не нужно больше скриптов.

Здесь я делаю ту же самую демонстрацию с roundSlider, проверьте демонстрацию: Demo with roundSlider

Также вы можете легко настроить самостоятельно: Additional DEMO

Вы можете проверить внешний вид RoundSlider здесь:

http://roundsliderui.com/demos.html