触摸设备上的jQuery UI滑块

Question

我正在使用jQuery UI开发一个网站,我的网站上有几个元素在触摸屏设备上查看时似乎不兼容; 它们不会导致任何错误,但行为不是应该的.

有问题的元素是jQuery UI定义的滑块和rangeliders; 在触摸屏上,不是将触摸注册为拾取手柄和拖动,而是将手柄拖过滑块,而只是将整个网页滑动到屏幕的一侧.如果您点击手柄然后点击滑块上您希望手柄最终的位置,它确实有效,但这非常慢而且不理想.有任何想法吗？

我尝试下载jqtouch插件,然后附加.touch([...])到所有对slider()和rangeslider()的调用,但这不起作用.

谢谢!

更新:我在jQuery UI网站上找到了这个"补丁"

http://bugs.jqueryui.com/ticket/4143

这说明它有利于iPhone上的滑块,但现在又出现了另一个愚蠢的问题:如何将这个"补丁"合并​​到我的代码中？我是否只是像插件一样将它包含在代码的开头？

Answer 1

这个库似乎提供了您正在寻找的东西:

https://github.com/furf/jquery-ui-touch-punch#readme

它还有一些使用代码示例(只需添加插件):

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>

Answer 2

只想添加一些关于此的新信息.Touch-punch适用于Ipads和Android设备.但是滑块无法在Windows移动设备上运行,因为我可以测试(使用最新版本的jquery ui和Touch punch)

修复非常简单,只需将以下CSS规则添加到.ui-slider-handle:

-ms-touch-action: none;
touch-action: none;

希望这可以帮助

Answer 3

正如@dazbradbury建议的那样,touchpunch库可以帮助将鼠标事件转换为触摸事件..draggable()中的参数限制滑块的移动,因此无法移动滑块父级.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

编辑:如果您已经在使用Jquery UI滑块,则只需要包含touchpunch库.不要为.ui-slider-handle调用.draggable(),因为它会覆盖现有的功能.

Answer 4

我有同样的问题。我在 jQuery UI 的滑块上开发了一个精心制作的滑块 UI，结果发现它在移动设备上根本不起作用。我尝试了此处列出的建议，但由于我有一个仅基于 jQuery UI Slider 的自定义解决方案，因此它不起作用。

只需使用noUiSlider。

它具有我在 jQuery UI 滑块之上构建的所有复杂功能（以及更多功能）。它在移动设备上工作得很好，也很容易设计。