【问题标题】:How to get the value from knob.js如何从旋钮.js 中获取值
【发布时间】:2015-06-28 22:17:11
【问题描述】:

我已搜索信息来解决我的问题,使用名为knap.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

【问题讨论】:

    标签: javascript jquery html css jquery-knob


    【解决方案1】:

    github文档中有例子:

    $(".knob").knob({
        'change' : function (v) { alert("The new value is: " + v); }
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-03-07
      • 1970-01-01
      • 2022-01-19
      • 1970-01-01
      • 2020-09-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多