Max Home IndustryКоманда jQuery Mobile объявила о первом выпуске-кандидате 1.3.0. Он имеет новый виджет панели, ползунки диапазона с двумя ручками и два разных режима работы с таблицами.
jQuery Mobile соответствует идее адаптивного веб-дизайна (RWD) в том смысле, что он был разработан для работы на всех устройствах и платформах — не только на мобильных телефонах, но также на планшетах и настольных браузерах.
Основное внимание в jQuery Mobile 1.3 уделяется обучению своего сообщества RWD, и с учетом этого у него есть адаптивная документация и демонстрации, объясняющие ключевые концепции RWD, а также новые виджеты, такие как адаптивные таблицы, панели и сетки.
По словам Тодда Паркера в блоге jQuery Mobile:
Мы видели вопрос «Что мне использовать: RWD или jQuery Mobile?» много раз в Твиттере, и наш ответ — безоговорочное «и то и другое». Думайте о jQuery Mobile как о наборе сенсорных элементов пользовательского интерфейса, которые созданы для вашего адаптивного дизайна.
Версия 1.3 представляет новый виджет для панелей, которые открываются для отображения меню, формы или другого содержимого. Их можно размещать слева или справа на экране и гибко размещать в исходном порядке HTML. Виджет предоставляет три различных способа открытия панели: отображение по умолчанию сдвигает страницу, чтобы показать панель внизу, отображение с нажатой кнопкой анимирует и панель, и страницу, а отображение наложения помещает панель вверху страницы. Панели можно закрыть, проведя пальцем по экрану, коснувшись страницы или нажав клавишу Esc на клавиатуре.
В этом примере есть левая панель навигации и правая панель с формой:
В ответ на популярный запрос был добавлен виджет для ползунка диапазона с двумя ручками:
Адаптивные сетки необходимы для адаптивного дизайна, и в jQuery 1.3 есть подробные инструкции о том, как создавать собственные медиа-запросы для настройки сеток в различных точках останова. Он также предоставляет предустановленную точку останова, которую можно применить, добавив класс в оболочку вашей сетки. Это применит точку останова CSS к более узкой ширине экрана, которая будет складывать все блоки сетки, а не перемещать их. Это простой способ сделать ваши сетки более отзывчивыми и лучше подходящими для телефонов.
В jQuery 1.3 включены два разных режима адаптивных таблиц:
Режим перекомпоновки таблиц, который переключается на представление стека этикеток / данных в виде стека при небольшой ширине экрана. Этот режим лучше всего подходит для ситуаций, когда длина содержимого довольно велика и сравнение данных по строкам в таблице менее критично.
Столбец переключает режим таблицы, который скрывает столбцы на более узкой ширине страницы в соответствии с приоритетом, установленным для каждого столбца в качестве разумного значения по умолчанию, чтобы гарантировать, что таблица умещается на экране. Всплывающее окно выбора столбца, создаваемое динамически, позволяет пользователю выбирать, какие столбцы он хочет видеть, для полного контроля. Этот режим лучше всего подходит для ситуаций, когда критически важно сравнение данных по строкам и столбцам.
Команда jQuery также переработала свою систему навигации AJAX, чтобы сделать ее более простой в использовании и более согласованной во всех браузерах. Версия 1.3 имеет новое событие и метод Navigate, а также функцию отображения списка, чтобы упростить автозаполнение с локальными данными.