如何使用 jqueryKnob 的 tron 皮肤？

Question

这是我第一次使用 jqueryKnob 插件。我正在尝试在此插件中使用格式选项和皮肤选项，但它似乎不起作用。对于皮肤问题，我尝试了 jQuery knob tron skin issue 但无济于事。我可能哪里出错了？

<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

Alternatively I suggest you to use the jQuery roundSlider plugin which is made up of basic DOM elements. So you can customize the overall control appearance through the CSS itself, and no need of much more scripts.

Here i make the same demo with roundSlider, check the demo: Demo with roundSlider

Also you can easily customize by yourself: Additional DEMO

You can check more appearance of roundSlider from here:

http://roundsliderui.com/demos.html#different-theming-and-appearances

如何使用 jqueryKnob 的 tron 皮肤？

How to use jqueryKnob's tron skin?

html

jquery

jquery-knob

round-slider