Question

我的网站上有3个滑动条，我无法用手指在iPad上移动它。移动它的唯一方法是点击应该成为下一步的地方。在桌面上正常工作。

$(function() {
    $( "#slider1" ).slider({
      range: "2",
      min: 1,
      max: 2,
      value: 1,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider1" ).slider( "value" ) );
  });

这是希望有用的CSS文件

.ui-slider {
    position: absolute;
    width:279px;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.4em;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    display: block;
}

.ui-slider-horizontal {
    height: 1em;
}
.ui-widget-content {
    background:url("../images/bar.png");
    background-repeat: no-repeat;
}
.ui-state-default {
    background: url("../images/slidet.png");
    background-repeat: no-repeat;
}

Answer 1

使用javascript的touchstart，touchmove和touchend事件。 CSS中的任何内容都不会使其响应触摸，因为您没有提供任何JS，我无法帮助您。

我建议找一个可以进行多点触控的旋转木马。如果你在github上搜索carousel，这应该很容易。

Answer 2

包括TouchPunch库可能有所帮助。 http://touchpunch.furf.com/

它有助于提供jQuery UI移动兼容性。

Answer 3

在我做的最后一个项目中，TouchPunch与我们的其他一些脚本发生了冲突。我们最终使用[No UI Slider 1]代替。除了常规的jQuery之外，它没有任何依赖。

如何在iPad上使滑杆可以触摸？

3 个答案: