jQuery 旋钮部分只读答案

【问题标题】：jQuery Knob partially read onlyjQuery 旋钮部分只读
【发布时间】：2014-05-27 16:51:25
【问题描述】：

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

例子

旋钮 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;
            }
        }
    });

【问题讨论】：

你试过什么？你能分享你的代码，这样我们就可以知道在哪里添加缺失的部分？ - 最初的想法是在 'on change' 事件之后设置 data-max 和 data-min 值（如您所建议的那样），但如果不查看您的代码，很难说出您的代码为什么不能工作的细节:)跨度>
@blurfus - data-max 和 data-min (min/max) 的问题在于它会重新校准旋钮，如果最小值为 25，则旋钮为 25 - 100，我需要0-100，只是限制所以你不能选择低于25%
这是一个艰难的...我一直无法找到一个实用的解决方案。我能想到的最好的方法是实现 validate() 函数或类似函数，但验证检查与您在“更改时”事件中所做的基本相同。对不起，我没有额外的帮助 ATM

标签： javascript jquery jquery-ui jquery-knob

【解决方案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。

【讨论】：

实际上我认为这可能对我有用。我昨天开始玩弧线，这看起来可行。