jQuery Mobile — это фреймворк, построенный на базе jQuery, предназначенный для создания адаптивных мобильных веб-приложений с поддержкой сенсорных интерфейсов и различных устройств. Основная цель библиотеки — упрощение разработки мобильных интерфейсов, предоставление готовых компонентов и анимаций для страниц и элементов управления.
jQuery Mobile использует HTML5-разметку и атрибуты data-, что позволяет создавать интерактивные мобильные интерфейсы без необходимости глубокого погружения в JavaScript. Библиотека автоматически управляет переходами между страницами, анимациями и адаптацией элементов под размеры экранов.
В jQuery Mobile каждая “страница” определяется как отдельный
<div> с атрибутом data-role="page".
Внутри страницы могут находиться header,
content и footer:
<div data-role="page" id="page1">
<div data-role="header">
<h1>Заголовок страницы</h1>
</div>
<div data-role="content">
<p>Основное содержимое страницы.</p>
<a href="#page2" data-role="button">Перейти на вторую страницу</a>
</div>
<div data-role="footer">
<h4>Футер</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Вторая страница</h1>
</div>
<div data-role="content">
<p>Содержимое второй страницы.</p>
</div>
</div>Переходы между страницами автоматически обрабатываются библиотекой,
используя AJAX-загрузку и плавные анимации. Атрибут
data-transition позволяет задавать стиль анимации:
<a href="#page2" data-role="button" data-transition="slide">Скользящий переход</a>Поддерживаются эффекты: slide, fade,
pop, flip и другие.
jQuery Mobile предоставляет набор готовых виджетов для создания интерактивного интерфейса:
Элементы <a> и <button> могут
быть преобразованы в кнопки с помощью
data-role="button":
<a href="#" data-role="button" data-icon="star">Кнопка с иконкой</a>Атрибут data-icon добавляет иконку к кнопке,
data-mini="true" уменьшает размер кнопки, а
data-inline="true" позволяет располагать кнопку в одну
линию с другими элементами.
Для создания списков используется ul или ol
с data-role="listview":
<ul data-role="listview">
<li><a href="#">Элемент 1</a></li>
<li><a href="#">Элемент 2</a></li>
<li><a href="#">Элемент 3</a></li>
</ul>Списки поддерживают добавление разделителей,
иконок, мини-кнопок и
встроенных счетчиков через атрибуты
data-divider-theme, data-icon,
data-count.
jQuery Mobile улучшает стандартные элементы формы
(input, select, textarea) с
помощью стилизации и виджетов:
<label for="name">Имя:</label>
<input type="text" name="name" id="name" value="">
<label for="fruit">Выберите фрукт:</label>
<select name="fruit" id="fruit" data-native-menu="false">
<option>Яблоко</option>
<option>Банан</option>
<option>Апельсин</option>
</select>
<input type="checkbox" name="agree" id="agree" data-mini="true">
<label for="agree">Согласен с условиями</label>Атрибут data-native-menu="false" заменяет стандартное
выпадающее меню на кастомный мобильный виджет. Параметр
data-mini="true" уменьшает размер элемента для компактного
интерфейса.
jQuery Mobile поддерживает темы, которые позволяют
изменять внешний вид виджетов и страниц без изменения HTML-кода. Тема
задается через атрибут data-theme и может быть применена к
отдельным элементам или всей странице:
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="a">
<h1>Заголовок</h1>
</div>
</div>Каждая тема (буквы от a до e) задает
цветовую схему для заголовков, контента, кнопок и других элементов. Для
более сложной стилизации можно создавать собственные CSS-файлы поверх
стандартной темы.
jQuery Mobile расширяет стандартные события jQuery, добавляя специальные мобильные события:
pagecreate — вызывается после создания страницы.pagebeforeshow и pageshow — срабатывают до
и после отображения страницы.pagebeforehide и pagehide — события перед
скрытием и после скрытия страницы.tap — имитация одиночного касания.swipeleft / swiperight — события
свайпов.Пример использования:
$(document).on("pageshow", "#page1", function() {
console.log("Страница 1 показана");
});
$("#button1").on("tap", function() {
alert("Кнопка нажата через тач-событие");
});События можно навешивать как на отдельные элементы, так и на всю страницу, что упрощает управление динамическим контентом.
jQuery Mobile по умолчанию использует AJAX для переходов
между страницами, что позволяет загружать только содержимое
<div data-role="page">, а не всю HTML-страницу. Это
уменьшает время отклика и создает эффект “одностраничного
приложения”.
Для отключения AJAX можно использовать атрибут
data-ajax="false":
<a href="fullpage.html" data-ajax="false">Полная загрузка страницы</a>jQuery Mobile автоматически подстраивает элементы под разные размеры
экранов и устройства. Система сетки (grid) позволяет
создавать колонки и ряды с адаптивной шириной:
<div class="ui-grid-a">
<div class="ui-block-a">Левый блок</div>
<div class="ui-block-b">Правый блок</div>
</div>Сетки бывают a, b, c,
d, что позволяет задавать до 4 колонок на одной строке.
Элементы автоматически масштабируются под ширину экрана.
jQuery Mobile ориентирован на широкий спектр мобильных устройств, включая старые смартфоны и планшеты. Он адаптирует элементы управления, учитывая возможности браузера, разрешение экрана и сенсорные события. При необходимости можно подключать сторонние плагины и расширения для расширенной функциональности.
Каждый виджет можно стилизовать индивидуально с помощью атрибутов:
data-iconpos="left|right|top|bottom" — позиция
иконки.data-corners="false" — убирает скругление углов.data-shadow="false" — отключает тень.data-mini="true" — уменьшенный размер элемента.Пример кнопки с кастомной темой и иконкой:
<a href="#" data-role="button" data-icon="gear" data-iconpos="right" data-mini="true" data-corners="false">
Настройки
</a>Эти возможности позволяют тонко настраивать внешний вид интерфейсов без изменения глобальных стилей.
jQuery Mobile представляет собой мощный инструмент для создания кросс-платформенных мобильных приложений с минимальными усилиями, позволяя разработчикам сосредоточиться на функциональности, а не на низкоуровневых аспектах интерфейса.