jquery ui中的滑块是否有错误?

时间:2013-10-13 07:02:56

标签: jquery jquery-ui slider

ui插件中的jquery滑块似乎工作正常,直到您特别快速地移动手柄。

这是一个演示: http://jsfiddle.net/5aXba/5/

正常移动滑块以获得预期效果,然后尽可能快地移动滑块并使其断裂。在演示中快速移动它,所有内容都消失了。

我们如何解决这个问题?这完全是不可避免的吗?

1 个答案:

答案 0 :(得分:1)

我不会说这是本身的错误 - 更像是一个限制。问题基本上是关于滑块的长度,您可以在其上安装/注册的步数以及如何捕获和舍入鼠标移动。

想象一下300px宽的滑块,上面有546个数据点 - 无法通过拖动鼠标捕捉该滑块上的每个点。在你的情况下,如果你在700px上适合12点并使用鼠标协调来捕获这些点,你必然会在某个时刻偶然发现近似值。

如果你真的需要一个你必须在路上注册每一步的情况 - 我建议在slide() method中设置一个控制计数器并检查鼠标移动是否计入每一步踩到范围,否则 - 用js触发缺失的步骤。

从您的演示版和我想象中的300px宽滑块中制作jsFiddle example以演示处理此限制的一种方法(它还会跳过第1行以适合您的示例)。

...
slide: function (event, ui) {
    if(!counter) counter=$(this).slider( "option", "value" );
    var step=$(this).slider( "option", "step" );
    if(Math.abs(ui.value-counter)>step){
        if(ui.value > counter) for (var i=counter+1;i<=ui.value;i++) addrow(i);
        else if(ui.value < counter) for (var i=counter;i>ui.value;i--) removerow();
    }else{
        if (ui.value > counter) addrow(ui.value);
        else if (ui.value < counter) removerow();                
    }
    counter = ui.value;
}
...