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＆amp; 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 slider，则只需要包含触摸式图书馆。不要为.ui-slider-handle调用.draggable（），因为它会覆盖现有的功能。

Answer 4

我遇到了同样的问题。我在jQuery UI的滑块上开发了一个精心设计的滑块UI，只是为了实现它在移动设备上根本不起作用。我尝试了这里列出的建议，但由于我有一个仅基于jQuery UI Slider的自定义解决方案，它没有用。

只需使用noUiSlider。

它完成了我在jQuery UI滑块之上构建的所有精心设计的功能（以及更多功能）。它在移动设备上运行良好，也很容易风格。

触摸设备上的jQuery UI滑块

4 个答案: