0

好吧，这是我第一次使用 jqueryKnob 插件。我正在尝试在此插件中使用格式选项和皮肤选项，但它似乎不起作用。对于皮肤问题，我尝试了jQuery 旋钮 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">
4

1 回答 1

0

这里的问题是您错过了元素中的data-skin="tron"属性。

检查更新的演示：Demo with knob

或者，我建议您使用由基本 DOM 元素组成的jQuery roundSlider插件。因此，您可以通过 CSS本身自定义整体控件外观，而不需要更多的脚本。

这里我用roundSlider做了同样的演示，查看演示：Demo with roundSlider

您也可以轻松地自己定制：Additional DEMO

您可以从此处查看 roundSlider 的更多外观：

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

于 2016-09-04T21:58:55.427 回答