Створення мобільних сайтів і додатків за допомогою jquery mobile

у якого пропіивается атрибут data-role = "page". На основі всіх data-role фреймворк формує додаток. Сторінка, що йде першою в списку, буде відображатися за замовчуванням, всі інші сторінки будуть приховані.

Одна сторінка може включати в себе три основні елементи: заголовок, контент і підвал.

Для переходу між сторінками потрібно використовувати посилання з href = "# id". де #id - це ідентифікатор тієї сторінки, до якої потрібно перейти.

Крім data-role важливим параметром є data-theme. який визначає, який з тим за замовчуванням відповідає зазначений елемент. Всього таких вбудованих тим п'ять і ще одна тема. Вони пронумеровані: a. b. c. d. e. Зі списком усіх тем можна ознайомитися на офіційному сайті jQuery Mobile. У нашому тестовому додатку ми будемо використовувати тему «b».

Отже, створимо головну сторінку нашого застосування, яка буде включати в себе меню з переходами до інших сторінок. Для цього будемо використовувати тег списку

з додатковим атрибутом data-role = "listview".

У заголовок додамо кнопку з іконкою налаштувань. При натисканні на цю кнопку повинна відкриватися ще одна сторінка з різними настройками програми. Зображення шестерінки додається за допомогою data-icon = "gear". а її розташування в правій частині заголовка забезпечує клас ui-btn-right.

Тепер сумісний всі напрацювання і отримаємо код для головної сторінки:



Тепер створимо всі інші сторінки. Почнемо зі сторінки налаштувань. Сама сторінка буде тільки заглушкою і ніяких реальних дій виконувати не буде, проте на її прикладі ми розглянемо різні віджети для сенсорного управління форм, які нам надає jQuery Mobile.

Рекомендується все поля форми розміщувати всередині спеціального контейнера:

Тепер розташуємо в цьому контейнері різні елементи форми.

Додамо слайдер, встановимо для нього максимальне і мінімальне значення:

Ще один типовий для мобільних пристроїв елемент форми - перемикач:

А тепер додамо поле з вибором для стилізації під мобільні пристрої

Деякі елементи управління можна об'єднувати в блоки, наприклад кілька чекбоксів:

Отримали сторінку з настройками. Зверніть увагу, що в заголовку автоматично створюється кнопка з поверненням на попередню сторінку. Сталося це завдяки тому, що на сторінку було додано атрибут data-add-back-btn = "true".



Тепер створимо сторінку пошуку. Для цього jQuery Mobile пропонує використовувати готовий віджет «Поле з автозаповненням».




Додамо різні спецефекти. Наприклад, ефекти переходу між сторінками. Для цього до визначення сторінки потрібно додати data-transition = "slide". де slide = назва анімації переходу. З повним списком переходів можна ознайомитися на офіційному сайті.

Це тільки мала частина всіх можливостей, на які здатний jQuery Mobile. Якщо вам терміново і недорого потрібна мобільна версія або додаток для вашого сайту, тоді jQuery Mobile відмінне рішення цієї проблеми.