我正在将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,使您可以执行所需的操作。

您在此代码中遇到的唯一怪癖是,如果超过了代码中设置的公差或阈值,您的旋钮将转到该值,但我个人认为这是应该起作用的方式。

09-10 12:05
查看更多