selectToUISlider:右滑块重叠问题

时间:2011-04-27 17:35:36

标签: jquery jquery-ui jquery-plugins jquery-selectors

如果你去这里:http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support//

然后单击并将第二个滑块拖到第一个滑块顶部,放开,然后尝试将第二个手柄向右滑动,它不会让你。它只会离开。我知道这是jQuery ui滑块库的一个问题,但是我想知道是否有人使用selectToUISlider找到了解决这个问题的好方法。

我根本不需要第一个手柄就可以移动,它是一个固定的值(我刚刚做了一个显示:第一个没有)。

非常感谢任何帮助!

-Rob

2 个答案:

答案 0 :(得分:2)

以DarthJDG为例,我查看了源代码并以另一种方式修复了一个错误。因此,当向右和向左滑动 - 向左移动时,右滑块将具有优先权。


jquery.ui.slider.js的这一部分

        var thisDistance = Math.abs( normValue - self.values(i) );

替换为:

        var thisDistance = Math.abs( normValue - (self.values(i) + i) );

并删除

    if( o.range === true && this.values(1) === o.min ) {
        index += 1;
        closestHandle = $( this.handles[index] );
    }

或者在缩小版本中,这部分:

var l=Math.abs(c-j.values(k));

替换为:

var l=Math.abs(c-(j.values(k)+k));

并删除此内容:

if(b.range===true&&this.values(1)===b.min){g+=1;e=d(this.handles[g])}

变量名称在缩小的jquery库的版本中可能有所不同,但可以使用文件中的此搜索查询找到锚点:

.range===true&&this.

希望这有帮助。

答案 1 :(得分:1)

我快速浏览了一下源代码,您可以根据自己的需要破解jQuery UI滑块代码。我下载了jQuery UI 1.8.12,看看./development-bundle/ui/jquery.ui.slider.js中的第281行:

// workaround for bug #3736 (if both handles of a range are at 0,
// the first is always used as the one with least distance,
// and moving it is obviously prevented by preventing negative ranges)
if( o.range === true && this.values(1) === o.min ) {
   index += 1;
   closestHandle = $( this.handles[index] );
}

错误修复是一个很好的提示,应该进行更改,将您的条件更改为以下内容:

if( o.range === true && index == 0 ) {

这确保如果它是一个范围滑块,无论你做什么,你总是拖动第二个滑块。您可以通过下载不带滑块组件的自定义jQuery UI缩小版本来使用您的代码,然后手动包含您的黑客,或者您可以破解缩小的代码。

寻找:

if(a.range===true&&this.values(1)===a.min)

更改为:

if(a.range===true&&g==0)

如果您不想丢失原始滑块(因此您可以在页面的其他位置使用它),只需将此黑客扩展名重命名为其他内容并单独包含它。

修复重叠错误并向滑块组件添加一个选项以使其中一个句柄得到修复会很好,但我担心现在这个问题超出了这个范围。 :)