如果有人使用了前此插件:
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"
});
任何人都知道什么可能是错误的?
以防万一有人在寻找相同的答案,应该试试这个,在演示页面中发现,不为什么,不包含代码的源脚本,但!
包括此作为旋钮方法选项:
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;
}
}
即使它的一个非常迟到的回答,您可以使用jQuery的roundSlider插件,您可以用achive简单的CSS定制tron的皮肤。
检查以下演示:
Demo - JSFiddle
截图: