Я разрабатываю веб-сайт с использованием пользовательского интерфейса jQuery, и на моем сайте есть несколько элементов, которые кажутся несовместимыми при просмотре на устройствах с сенсорным экраном; они не вызывают никаких ошибок, но поведение не такое, каким должно быть.
Рассматриваемые элементы - это ползунки и ползунки, как определено пользовательским интерфейсом jQuery; на сенсорном экране вместо того, чтобы регистрировать касание как взятие ручки и перетаскивание как перетаскивание ручки через ползунок, оно просто сдвигает всю веб-страницу в сторону экрана. Это сработает, если вы коснетесь ручки, а затем коснетесь того места на слайдере, где вы хотите, чтобы ручка закончилась, но это очень медленно и не идеально. Любые идеи?
Я попытался загрузить плагин jqtouch, а затем прикрепить .touch([...])
ко всем вызовам slider () и rangelider (), но это не сработало.
Спасибо!
ОБНОВЛЕНИЕ: я нашел этот "патч" на сайте jQuery UI.
http://bugs.jqueryui.com/ticket/4143
в нем говорится, что это облегчает слайдер на iPhone, но теперь еще один глупый вопрос: как мне включить этот «патч» в свой код? Могу ли я просто включить его в начало кода, как плагин?
$('.ui-slider-handle').draggable();
Просто хотел добавить новую информацию об этом. Touch-punch отлично подойдет для iPad и устройств Android. Но слайдер не будет работать на мобильных устройствах Windows, насколько я мог протестировать (с последними версиями jquery ui и Touch punch)
Исправить довольно просто, просто добавьте следующие CSS-правила в .ui-slider-handle:
Надеюсь это поможет
источник
Как предложил @dazbradbury, библиотека сенсорной панели может помочь преобразовать события мыши в события касания. Параметры в .draggable () ограничивают перемещение ползунка, поэтому его нельзя переместить за пределы родительского ползунка.
РЕДАКТИРОВАТЬ: если вы уже используете слайдер JQuery UI , вам нужно только включить библиотеку touchpunch. Не вызывайте .draggable () для дескриптора .ui-slider-handle, потому что он перезапишет существующие функции.
источник
У меня такая же проблема. Я разработал тщательно продуманный интерфейс слайдера на основе слайдера пользовательского интерфейса jQuery только для того, чтобы понять, что он вообще не работает на мобильных устройствах. Я попробовал перечисленные здесь предложения, но поскольку у меня есть собственное решение, основанное только на jQuery UI Slider, оно не сработало.
Просто используйте noUiSlider .
Он имеет все сложные функции (и многое другое), как тот, который я построил поверх слайдера jQuery UI. Он прекрасно работает на мобильных устройствах и легко стилизован.
источник