jQuery UI slider Touch & Drag / Drop поддержка на мобильных устройствах

Я уже создал и реализовал слайдер jQuery UI в проекте. Хотя он является мобильным и масштабируется должным образом, он не позволяет нажимать и перетаскивать. Вместо этого вы должны коснуться, где вы хотите, чтобы ползунок идти. jQuery mobile UI поддерживает это, но у меня есть время, вложенное в то, что уже есть.

функциональность, которую мы хотим: здесь
Что мы используем: здесь

на рабочем столе вы не можете сказать, разница. На мобильном устройстве это очевидный.

кто-нибудь знает, как добавить эту поддержку в jQuery UI?

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

спасибо, Сет!--2-->

86
jquery jquery-ui jquery-ui-slider touch

2 ответов

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.

214

вы можете просто связать этот js.

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

спасибо.

2