触摸设备上的jQuery UI滑块

| 我正在使用jQuery UI开发网站，并且在我的网站上有几个元素在触摸屏设备上查看时似乎不兼容；它们不会引起任何错误，但是行为并非应有的。有问题的元素是由jQuery UI定义的滑块和Ranges滑块；在触摸屏上，它只是将整个网页滑动到屏幕的一侧，而不是将触摸注册为拿起手柄，而将拖动注册为沿滑杆拖动该手柄。如果您点击手柄，然后点击滑块上您希望手柄结束的位置，它确实可以工作，但这非常慢且不理想。有任何想法吗？我尝试下载jqtouch插件，然后将.touch([...])附加到对slider（）和rangeslider（）的所有调用，但这没有用。谢谢！更新：我在jQuery UI网站上找到了这个“补丁” http://bugs.jqueryui.com/ticket/4143 那说它有助于iPhone上的滑块，但现在又出现了一个愚蠢的问题：如何将这个“补丁”合并到我的代码中？我是否像插件一样将其包括在代码的开头？

已邀请:

4 个回复

扫窟

该库似乎提供了您要查找的内容： 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>

嗓瑰

只是想添加一些有关此的新信息。触摸打孔功能可以在Ipad和Android设备上正常使用。但是，该滑块无法在Windows移动设备上运行，因为我可以进行测试（使用最新版本的jQuery ui和Touch Punch）修复非常简单，只需将以下CSS规则添加到.ui-slider-handle即可：

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

希望这可以帮助

淑灯

正如@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（），因为它将覆盖现有功能。

栖很钾是狠

我有同样的问题。我在jQuery UI \的滑块上开发了精致的滑块UI，只是意识到它根本无法在移动设备上使用。我尝试了此处列出的建议，但是由于我有一个仅基于jQuery UI Slider的自定义解决方案，因此无法正常工作。只需使用noUiSlider。它具有我在jQuery UI滑块之上构建的所有精心设计的功能（以及更多功能）。它在移动设备上可以很好地工作，并且易于设置样式。

要回复问题请先登录或注册

触摸设备上的jQuery UI滑块

4 个回复

发起人

slider

touch

jqtouch

问题状态

触摸设备上的jQuery UI滑块

与内容相关的链接

4 个回复

发起人

slider

touch

jqtouch

问题状态