我搜索了有关使用名为 knob.js 的 JQuery 插件解决我的问题的信息,但找不到任何对我有帮助的信息。
这里是插件的链接:
https://github.com/aterrien/jQuery-Knob
http://anthonyterrien.com/knob/
我的问题是:
我想使用旋钮中的值来操纵我元素中的另一个元素。
我需要这样的东西:
var myVariable = value;
if(myVariable > 50){
.....
} else{
}
这是我的代码:
<div id="zeitRegler">
<input
class="knob"
data-height="100%";
data-width="100%";
data-fgColor="#0090C5"
data-skin="tron"
data-thickness=".1"
data-angleOffset="180"
value="20">
<script src="jquery.min.js"></script>
<script src='jquery.knob.min.js'></script>
<script>
$(function () {
$('.knob').knob({
draw: function () {
if (this.$.data('skin') == 'tron') {
this.cursorExt = 0.3;
var a = this.arc(this.cv);
var pa;
var 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
github文档中有例子:
$(".knob").knob({
'change' : function (v) { alert("The new value is: " + v); }
});
我是一名优秀的程序员,十分优秀!