触摸设备上的jQuery UI滑块

我正在开发一个使用jQuery UI的网站，并且我的网站上有几个元素在触摸屏设备上查看时显示为不兼容;他们不会导致任何错误，但行为不是它应该的。触摸设备上的jQuery UI滑块

有问题的元素是由jQuery UI定义的滑块和范围滑块;在触摸屏上，不是将触摸注册为拾取手柄，拖动手柄拖动滑块，而是将整个网页滑动到屏幕一侧。如果您点击手柄，然后点击滑块上您想要手柄最终位置的位置，它会起作用，但这非常慢并且不理想。有任何想法吗？

我尝试下载jqtouch插件，然后将.touch([...])附加到所有对slider（）和rangeslider（）的调用中，但没有奏效。

谢谢！

更新：我发现了jQuery UI网站

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

，指出它有利于在iPhone上的滑块，但现在再愚蠢的问题，对这个“补丁”：我怎么将这一“补丁”成我的代码？我是否只是在代码的开始部分像插件一样包含它？

来源

2011-06-15 jqcoder

133

这个库似乎提供你在找什么：

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>

来源

2012-03-02 13:11:16 dazbradbury

这为我工作。 ;） – 2012-03-16 20:44:46

+27

注意群众：将它附加到滑块手柄，而不是整个事情。（对于jQuery滑块，这将是'$（'。ui-slider-handle'）。draggable（）;' – PaulSkinner 2013-05-17 10:41:30

+14

现在我可以在整个页面上移动滑块手柄!!这很荒谬 – dezman 2013-05-24 15:17:42

只想添加一些关于此的新信息。对于iPad和Android设备，Touch-punch可以很好地工作。但滑动条将无法在Windows移动设备上工作，目前为止我可以测试（使用最新版本的jquery UI &触摸打孔机）

该修复非常简单，只需将以下CSS规则添加到.ui -slider手柄：

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

希望这有助于

来源

2014-02-26 07:59:06

非常有用，谢谢！ – evilscary 2014-03-27 16:38:14

不适合我吗？任何示例链接请@Stijn_d – ShibinRagh 2015-02-06 10:42:12

呃，但这遗址的实际触摸冲的功能 – user151496 2015-02-12 17:08:17

由于@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，你只需要包含touchpunch库。不要为.ui-slider-handle调用.draggable（），因为它会覆盖现有的功能。

来源

2016-05-19 08:35:52

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

只需使用noUiSlider。

它完成了我在jQuery UI滑块之上构建的所有精巧功能（以及更多）。它在移动设备上运行非常漂亮，并且很容易使用。

来源

2017-06-22 08:33:59

触摸设备上的jQuery UI滑块

回答

相关问题