我正在将jQuery knob与选项data-displayPrevious=true
一起使用。
我需要对行为进行一些更改:
如果用户将值调高,则应在最大值处停止,并且在最大溢出后不跳到最小值。而且,如果用户向下更改值,则应至少停止。
完全像这样:http://demo.tutorialzine.com/2011/11/pretty-switches-css3-jquery/
您能帮我吗?
最佳答案
这是您可以采用的方法的粗略示例。 http://jsfiddle.net/KjtSP/
它有一些问题,例如,如果您退回,则不继续拖动,但除此之外,它还应作为您构想的良好基础。基本上,我正在做的是先检查旋钮要设置的值,如果可以说是超过最大值或低于最小值,我将取消当前的鼠标事件。
通过返回false,我们可以防止插件设置其接收的值。
var knob = $(".dial");
lastValue = 0;
max = 100;
min = 0;
variance = Math.floor(max / 5);
knob.knob({
"change": function(v) {
if (v > max - variance && lastValue < min + variance) {
knob.val(0).change();
return false;
} else if (v < min + variance && lastValue > max - variance) {
knob.val(100).change();
return false;
}
lastValue = v;
}
});
更新资料
由于返回false确实会阻止新值的设置,因此您不能调用
mouseup
ergo来继续该过程。对我的代码进行一些微调,产生以下fiddle,使您可以执行所需的操作。您在此代码中遇到的唯一怪癖是,如果超过了代码中设置的公差或阈值,您的旋钮将转到该值,但我个人认为这是应该起作用的方式。