触摸设备上的jQuery UI滑块

95

我正在使用jQuery UI开发网站，并且在我的网站上有几个元素在触摸屏设备上查看时似乎不兼容；它们不会引起任何错误，但是行为不是应该的。

有问题的元素是jQuery UI定义的滑块和Ranges滑块；在触摸屏上，它只是将整个网页滑动到屏幕的一侧，而不是将触摸注册为抓起手柄，而将拖动注册为在整个滑块上拖动手柄。如果您点击手柄，然后点击滑块上您希望手柄结束的位置，它确实可以工作，但这非常慢且不理想。有任何想法吗？

我尝试下载jqtouch插件，然后附加.touch([...])到对slideler （）和rangelider（）的所有调用，但这没有用。

谢谢！

更新：我在jQuery UI网站上找到了这个“补丁”

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

那说它有助于iPhone上的滑块，但现在又出现了一个愚蠢的问题：如何将这个“补丁”合并到我的代码中？我是否像插件一样将其包括在代码的开头？

slider touch jqtouch

— jqcoder
source

140

该库似乎提供您想要的内容：

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>

— 达兹布拉德伯里
source

28

群众请注意：不要将其安装在滑块手柄上，而应将其安装在整个手柄上。（对于jQuery滑块，它是$('.ui-slider-handle').draggable();

— PaulSkinner，2013年

17

现在，我可以在整个页面上移动滑块！这是荒唐的。

— dezman 2013年

我可以在Firefox Mac的整个页面上移动手柄。我想知道我们是否需要放置条件if（ipad | iphone）...然后draggable（）。

— 乔·海德

13

在上面划掉我的原始评论。只需在HEAD中包含此插件即可。通过不添加$（selector）.draggable（）;添加<script src> 使滑块手柄起作用。

— 2013年

6

您只需要包括触摸打孔脚本即可。就像@JoeHyde在他的第二条评论中说的那样，不需要在任何元素上调用.draggable（）。仅包括脚本，它应该可以工作。

— Jack Vial

22

只是想添加一些有关此的新信息。触摸打孔功能可以在Ipad和Android设备上正常运行。但是，该滑块无法在Windows移动设备上运行，因为我可以进行测试（使用最新版本的jQuery ui和Touch Punch）

修复非常简单，只需将以下CSS规则添加到.ui-slider-handle即可：

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

希望这可以帮助

— Stijn_d
source

不为我工作？任何示例链接，请@Stijn_d

— ShibinRagh，2015年

呃，但这会破坏实际的触摸打孔功能

— user151496

这解决了我的问题。谢谢！

— parker_codes

无劳动形式我的戴尔笔记本电脑用触摸屏jsfiddle.net/jhtcqbqo

— 让·弗朗索瓦·比彻姆

6

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

— DPH交易丹麦板房
source

这对我有用。现在唯一的问题是背景区域（设置范围：“ min”时）不遵循滑块位置。

— ejectamenta

这应该是公认的答案。

— ionalchemist

3

我有同样的问题。我在jQuery UI的滑块上开发了精心设计的滑块UI，只是意识到它根本无法在移动设备上使用。我尝试了这里列出的建议，但是由于我有一个仅基于jQuery UI Slider的自定义解决方案，因此无法正常工作。

只需使用noUiSlider即可。

它具有我在jQuery UI滑块之上构建的所有精心设计的功能（以及更多功能）。它在移动设备上可以很好地工作，并且易于设置样式。

— 亚当·卡拉乔尼
source