Question

我已经在项目中设计并实现了jQuery UI滑块。虽然它可移动并且可以正确缩放，但它不允许轻击和拖动。相反，你必须触摸滑块的位置。 jQuery移动UI支持这一点，但我有时间投入已经存在的东西。

我们想要的功能： Here
我们正在使用的是：Here

在桌面上，你无法区分它们。在移动设备上很明显。

任何人都知道如何将此支持添加到jquery UI？

$("#cameraSlider").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    cameramen = ui.value;
    return calcTotal();
  }
});

谢谢，塞特

Answer 1

jQuery ui没有触控支持。您应该将其与jQuery-ui touch punch一起使用。

只需在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>

注意：最好在Github上给this repo一颗星。

Answer 2

你可以链接这个js。

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

感谢。

Answer 3

如果您使用 Wordpress，您可以在 functions.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 );

jQuery UI滑块Touch＆amp;移动设备上的拖放支持

3 个答案: