移动设备上的 jQuery UI 滑块触摸拖放支持

我已经在一个项目中设计并实现了 jQueryUI 滑块。虽然它的响应，滑块不响应被触摸和拖动。相反，你必须触摸你想要滑块去的地方。我希望避免切换到支持触摸和拖动的 jQuery 移动 UI，因为我们已经广泛使用了 jQuery (非移动) UI。

我们需要的功能: 给你
我们正在使用的: < a href = “ http://jqueryui.com/slider/# step”rel = “ norefrer”> 这里

On a desktop you can't tell the difference. On a mobile device it is apparent.

Anyone know how to add this support to jquery UI?

$("#videographers").slider({
value: 2,
min: 1,
max: 3,
step: 1,
slide: function(event, ui) {
return calcTotal(ui.value);
}
});
104936 次浏览
小开
最佳答案

JQuery ui 没有触摸支持，应该和 JQuery-ui 触摸打孔机一起使用。

只需在 jQuery ui 后面添加脚本:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

也可以使用 cdnjs:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Note: Better give 这个回购 a star on Github.

小开

你可以把这个 J 连接起来。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

谢谢。

小开

如果你在 WordPress中，你可以在 function. php 中使用这段代码:

add_action( 'wp_head', function () {


// jquery.ui.touch-punch
wp_enqueue_script( 'jquery.ui.touch-punch', '//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js', [], '0.2.3',false );


}, 999 );

提交答案