Средний
10 уроков
(1 час 4 минуты)
Курс
jQuery mobile
Данный видеокурс посвящен jQuery Mobile — веб-фреймворку, который также известен как мобильный фреймворк. Разработка сфокусирована на кроссбраузерности с уклоном в сторону смартфонов и планшетов.

#7 — Создание собственных тем. Изменение стилей.

Сегодняшний наш видеоурок посвящен настройке и стилизации приложений с помощью собственных тем.

Знакомьтесь, темы jQuery Mobile!

Тема представляет собой набор css-стилей, определяющих отображение элементов приложения и позволяющих менять такие значения, как цвет текста, цвет ссылок, цвета градиентов, внешний вид кнопок и другие. Тема также содержит глобальные настройки элементов (шрифты, их размеры, эффекты тени, внешний вид кнопок), которые будут применяться вне зависимости от выбранного цветового оформления, для поддержания единого стиля для элементов приложения.

Параметры темы хранятся в css-файле, который должен быть добавлен на html-страницу проекта, после подключения собственных стилей jQuery Mobile. Не рекомендуется изменять файл собственных стилей фреймворка, это может привести к проблемам несовместимости с последующими версиями при обновлении. Для этой цели лучше создать еще один, отдельный css-файл, который будет переопределять структурные свойства фреймворка (размеры отступов, ширину элементов и других).

Для определения значений в теме используются специальные имена классов, которые определены соглашениями jQuery Mobile. Для каждого элемента оформления есть свой класс, параметры которого можно переопределять в своей собственной теме.

Приложение ThemeRoller — генератор тем

Наиболее простым способом создания собственной темы является использование приложения ThemeRoller. Это еще один ресурс от разработчиков jQuery Mobile, который предоставляет удобный интерфейс для генерации тем. Здесь в интерактивном режиме можно выбирать элементы, которые требуется стилизовать, и указать для них значения цветов. Полученную тему можно скачать к себе на компьютер и использовать в собственных проектах. Также в приложение ThemeRoller можно загрузить уже имеющуюся тему и внести необходимые изменения.

Приятного всем просмотра! Учитесь с удовольствием!

Полезные ссылки:
http://jqmgallery.com — примеры сайтов на jQuery MoЬile
https://color.adobe.com/ru/ — создание цветовых схем от Adobe

Материалы к уроку:
Делись:

Оставь комментарий!

Добавить комментарий

Рекомендуемые курсы