触摸设备上的 jQuery UI 滑块 [英] jQuery UI sliders on touch devices

问题描述

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

I'm developing a website using jQuery UI, and there are several elements on my site that appear to be incompatible when viewed on touchscreen devices; they don't cause any errors, but the behavior is not what it should be.

有问题的元素是 jQuery UI 定义的滑块和范围滑块；在触摸屏上，不是将触摸注册为拿起手柄，将拖动注册为在滑块上拖动手柄，它只是将整个网页滑动到屏幕的一侧.如果您点击手柄，然后点击滑块上您希望手柄结束的位置，它确实有效，但这非常缓慢且不理想.有什么想法吗?

The elements in question are sliders and rangesliders as defined by jQuery UI; on the touch screen, instead of registering a touch as picking up a handle and a drag as dragging the handle across the slider, it just slides the whole webpage to the side of the screen. It does work if you tap the handle and then tap the location on the slider where you want the handle to end up, but this is very slow and not ideal. Any ideas?

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

I tried downloading the jqtouch plugin and then attaching .touch([...]) to all calls to slider() and rangeslider(), but that didn't work.

谢谢！

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

UPDATE: I found this "patch" on the jQuery UI website

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

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

that says it facilitates slider on iPhone, but now for another stupid question: how do I incorporate this "patch" into my code? Do I just include it at the beginning of the code like a plugin?

推荐答案

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

This library seems to offer what you're looking for:

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

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

It also has some example use code (simply add the plugin):

<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>

这篇关于触摸设备上的 jQuery UI 滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！