1

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

例子

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

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

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

在此处输入图像描述

4

1 回答 1

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 示例。

于 2014-05-29T23:19:16.920 回答