jQuery Knob部分读
jQuery Knob部分读
提问于 2014-05-27 16:51:25
我的页面上有一个代表百分比的jQuery旋钮集合。每个旋钮可以有一个值从0-100，然而，每个后续旋钮不应该有一个值小于前一个旋钮。本质上，我想使旋钮的一部分只读-防止用户拖动值低于上一个旋钮的值-类似于'min‘值。
示例
- 旋钮1 25%
- 旋钮2. 50% (最小值仍为0，最大值为100，但必须大于25)
- 旋钮3 75%
- 旋钮4 100%
我试过绑定到旋钮上的“变化”事件，但这并没有给我想要的东西。下面我将绑定到change事件，试图限制值--这是硬编码的，用于测试简单的用例。我可能会想要绑定到‘绘图’事件，以限制在动画上的值，但还没有达到那么远。
$(this).trigger('configure', {
'change': function (v) {
console.log("Updating value " + v);
if(v < 25) {
console.log("Updating value");
this.cv = 25;
}
}
});
回答 1
Stack Overflow用户
发布于 2014-05-29 23:19:16
不确定这是否是最好的方法，但您可以根据上一次的值来操作拨号盘的angleOffset和angleArc选项。例如，如果您有两个刻度盘：
<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实例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23894850
复制相关文章
相似问题
腾讯云开发者
