Я разрабатываю веб-сайт с использованием jQuery UI, и на моем сайте есть несколько элементов, которые выглядят несовместимыми при просмотре на сенсорных устройствах; они не вызывают никаких ошибок, но поведение не то, что должно быть.
Элементы, о которых идет речь, - ползунки и диапазоны, как определено jQuery UI; на сенсорном экране вместо того, чтобы регистрировать прикосновение, поднимая ручку и перетаскивая ее, перетаскивая ручку по ползунку, она просто перемещает всю веб-страницу в сторону экрана. Он работает, если вы нажмете на ручку, а затем коснитесь места на слайдере, где вы хотите, чтобы ручка закончилась, но это очень медленно и не идеально. Любые идеи?
Я попробовал загрузить плагин jqtouch и затем прикрепить .touch([...]) ко всем вызовам слайдера() и rangelider(), но это не сработало.
Спасибо!
UPDATE: я нашел этот "патч" на веб-сайте jQuery UI
http://bugs.jqueryui.com/ticket/4143
который говорит, что он облегчает слайдер на iPhone, но теперь для другого глупого вопроса: как включить этот "патч" в свой код? Я просто включил его в начало кода, как плагин?
Эта библиотека, похоже, предлагает то, что вы ищете:
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>
Просто хотел добавить новую информацию об этом. Touch-punch отлично подходит для Ipads и Android-устройств. Но слайдер не будет работать на мобильных устройствах Windows, насколько я могу проверить (с последними версиями jquery ui и Touch punch)
Исправление довольно просто, просто добавьте следующие CSS-правила в .ui-slider-handle:
-ms-touch-action: none;
touch-action: none;
Надеюсь, что это поможет
Как предположил @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 JQuery, вам нужно включить только библиотеку touchpunch. Не вызывайте .draggable() для .ui-slider-handle, потому что он перезапишет существующую функциональность.
У меня была та же проблема. Я разработал разработанный пользовательский интерфейс слайдера на слайдере jQuery UI только для того, чтобы понять, что он вообще не работает на мобильных устройствах. Я попробовал предложения, перечисленные здесь, но поскольку у меня есть собственное решение, основанное только на jQuery UI Slider, оно не работает.
Просто используйте noUiSlider.
Он выполняет все сложные функции (и многое другое), как тот, который я построил поверх слайдера jQuery UI. Он прекрасно работает на мобильных устройствах и легко стирается.
для функции использования слайдера $('#your_slider_id').slider();