jQuery的旋钮tron的皮肤问题(jQuery knob tron skin issue)

2019-10-19 17:31发布

如果有人使用了前此插件:

https://github.com/aterrien/jQuery-Knob

我尝试适用肤质:“TRON”

尝试添加<input data-skin="tron">但没有工作,也试图在初始化代码:

$(".dial").knob({       
        readOnly:true,
        thickness:0.05,
        width:100,
        fgColor:"#cc0000",
        bgColor:"#ccc",
        skin:"tron"

        });

任何人都知道什么可能是错误的?

Answer 1:

以防万一有人在寻找相同的答案,应该试试这个,在演示页面中发现,不为什么,不包含代码的源脚本,但!

包括此作为旋钮方法选项:

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;
                        }
                    }


Answer 2:

即使它的一个非常迟到的回答,您可以使用jQuery的roundSlider插件,您可以用achive简单的CSS定制tron的皮肤。

检查以下演示:

Demo - JSFiddle

截图:



文章来源: jQuery knob tron skin issue