Слайдеры jQuery UI на сенсорных устройствах - PullRequest
Новая
       15

Слайдеры jQuery UI на сенсорных устройствах

95 голосов
/ 15 июня 2011

Я занимаюсь разработкой веб-сайта с использованием пользовательского интерфейса jQuery, и на моем сайте есть несколько элементов, которые кажутся несовместимыми при просмотре на устройствах с сенсорным экраном; они не вызывают никаких ошибок, но поведение не такое, каким оно должно быть.

Элементами, о которых идет речь, являются ползунки и ползунки, как определено в пользовательском интерфейсе jQuery; на сенсорном экране вместо того, чтобы регистрировать прикосновение как захват ручки и перетаскивание при перетаскивании маркера по ползунку, он просто перемещает всю веб-страницу в сторону экрана. Это сработает, если вы нажмете на ручку, а затем коснитесь места на ползунке, где вы хотите, чтобы ручка оказалась в конце, но это очень медленно и не идеально. Есть идеи?

Я попытался загрузить плагин jqtouch, а затем подключить .touch([...]) ко всем вызовам к slider () и rangelider (), но это не сработало.

Спасибо!

ОБНОВЛЕНИЕ: я нашел этот «патч» на веб-сайте jQuery UI

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

говорит, что это облегчает слайдер на iPhone, но теперь еще один глупый вопрос: как мне включить этот «патч» в мой код? Я просто включаю его в начало кода как плагин?

Ответы [ 4 ]

137 голосов
/ 02 марта 2012

Эта библиотека, кажется, предлагает то, что вы ищете:

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

Также имеется пример использования кода (просто добавьте плагин): 

<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>
22 голосов
/ 26 февраля 2014

Просто хотел добавить новую информацию об этом. Touch-punch будет отлично работать на устройствах iPad и Android. Но этот слайдер не будет работать на мобильных устройствах Windows, насколько я мог его протестировать (с последними версиями jquery ui & Touch punch)

Исправление довольно простое, просто добавьте следующие CSS-правила в .ui-slider-handle: 

-ms-touch-action: none;
touch-action: none;

Надеюсь, это поможет

5 голосов

Как предположил @dazbradbury, библиотека touchpunch может помочь преобразовать события мыши в события касания.Параметры в .draggable () ограничивают перемещение ползунка, поэтому его нельзя переместить за пределы родительского ползунка.

<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>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

РЕДАКТИРОВАТЬ: Если вы уже используете ползунок Jquery UI , вам нужно только включить библиотеку Touchpunch.Не вызывайте .draggable () для .ui-slider-handle, поскольку он перезапишет существующую функциональность.

1 голос
/ 22 июня 2017

У меня была такая же проблема. Я разработал сложный пользовательский интерфейс на основе слайдера jQuery UI только для того, чтобы понять, что он вообще не работает на мобильных устройствах. Я попробовал перечисленные ниже предложения, но, поскольку у меня есть собственное решение, основанное только на jQuery UI Slider, оно не сработало.

Просто используйте noUiSlider .

Он обладает всеми сложными функциями (и многими другими), которые я построил поверх слайдера пользовательского интерфейса jQuery. Он прекрасно работает на мобильных устройствах и его легко стилизовать.

...