jQuery UI — это, без сомнения, одна из первых библиотек, о которых каждый разработчик думает и полагается для легкого внедрения функций взаимодействия с пользователем, таких как динамическое изменение размеров элементов, перетаскиваемых элементов, сортируемых и сбрасываемых объектов.
Однако, хотя преимуществ больше, чем недостатков, одним из наиболее известных недостатков инфраструктуры является то, что она не обеспечивает поддержку мобильных сенсорных устройств. Для человека, который ожидает такое поведение по умолчанию, потому что jQuery широко известен, он, вероятно, будет разочарован после внедрения jQuery UI для всего проекта и после обнаружения, что его приложение не работает хорошо на мобильных устройствах. К счастью, есть люди, которые думали об этой проблеме и решили поработать над ее решением. Мы говорим о проекте JQuery UI Touch Punch, он работает с использованием смоделированных событий для сопоставления сенсорных событий с аналогами событий мыши. Просто включите скрипт на своей странице, и ваши сенсорные события будут превращены в соответствующие им события мыши, на которые пользовательский интерфейс jQuery будет реагировать, как и ожидалось.
В этой статье мы покажем, как легко добавить поддержку сенсорного ввода для нескольких компонентов пользовательского интерфейса jQuery, добавив только дополнительную библиотеку.
1. Включите JQuery UI Touch Punch
Чтобы добавить поддержку сенсорного ввода, вам потребуется только копия распространяемого JQuery UI Touch Punch. Вы можете получить копию скрипта, загружая версию для разработки или минимизированную версию из репозитория на Github. Затем включите его после исходного кода jQuery UI и все:
После включения файла сенсорная поддержка будет автоматически добавлена в пользовательский интерфейс jQuery. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github или же официальный сайт здесь. Библиотека имеет двойную лицензию по лицензиям MIT или GPL версии 2 и поэтому может свободно использовать, модифицировать и / или распространять, но если вы включите Touch Punch в другие пакеты программного обеспечения или плагины, пожалуйста, включите ссылку на оригинальное программное обеспечение и ссылку на сайт Touch Punch.
2. Использование плагина
Как уже упоминалось, только включение плагина заставит ваш обычный код jQuery UI работать на сенсорных устройствах. Среди поддерживаемых сенсорных возможностей вы можете найти изменяемый размер, dropbleable, ползунки, аккордеоны, выбираемые и т. Д.
