jQuery Knob部分只读

Question

我的页面上有一组jQuery旋钮，代表百分比。每个旋钮可以具有0-100的值，但是，每个后续旋钮的值不应小于前一个旋钮。基本上我想让旋钮的一部分只读 - 防止用户拖动前一个旋钮值以下的值 - 类似于'min'值。

实施例

• 旋钮1 25％
• 旋钮2 50％（最小值仍为0，最大值为100，但值必须大于25）
• 旋钮3 75％
• 旋钮4 100％

我已尝试绑定旋钮上的'change'事件，但这并没有给我我想要的东西。下面我绑定到更改事件以尝试限制值 - 这是硬编码来测试简单的用例。我可能想要绑定到'draw'事件来限制动画的值，但还没有那么远。

        $(this).trigger('configure', {
        'change': function (v) {
            console.log("Updating value " + v);
            if(v < 25) {
              console.log("Updating value");
              this.cv = 25;
            }
        }
    });

Answer 1

不确定这是否是最好的方法，但您可以根据前一个的值操纵拨号的angleOffset和angleArc选项。例如，如果您有两个拨号：

<强> HTML

<input type="text" value="75" id="dial1">
<input type="text" value="75" id="dial2">

你的javascript会是这样的：

$(function () {
    $("#dial1").knob({
            'change': function (v) {
            $('#dial2')
                .trigger(
                'configure', {
                    'angleOffset': (v / 100 * 360),
                    'angleArc': ((100-v) / 100 * 360),
                    'min': v,
            });
        }
    });
    $("#dial2").knob();
});

对于表盘中剩余的空白区域，您可以通过将画布背景设置为完整旋钮的图像来解决此问题。

<强> CSS

canvas {
    background: url('http://imgur.com/aeTBhL9.png');
}

这里是jsFiddle example。