Разработка мобильных приложений / Разработка пользовательских тем с помощью jQuery Mobile

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

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

Содержание таблицы стилей по умолчанию

Я должен начать с уточнения, какой именно тип кода CSS включен в файлы по умолчанию. Таблица стилей из jQM 1.0 была разделена на два основных сегмента - состав а также темы.

Структурный код - это то, что вы можете игнорировать. Это используется для установки полей, отступов, высоты / ширины, вариантов шрифта, а также многих других настроек браузера по умолчанию. Внутренние темы затем отделяются от A-E, каждый из которых контролирует различные визуальные эффекты в вашем дизайне. Это может включать в себя цвета фона, градиенты, тени и т.д..

Каждый из этих внутренних элементов темы также может называться образчики. При создании мобильного шаблона вы обычно придерживаетесь одной темы. Но почти в каждом сценарии дизайн может быть улучшен с помощью различных цветовых схем. Таблица стилей по умолчанию включает только образцы A-E, но вы можете создавать образцы F-Z, чтобы добавить еще 21 альтернативу в вашу библиотеку тем. Просто чтобы уточнить эти условия снова тема считается одним файлом CSS, который может включать в себя до 26 различных образчики помечены A-Z.

Переключение стилей

Если вы не захотите указывать какие-либо образцы, то jQuery Mobile по умолчанию будет использовать образец A. Если вы еще не знали, что документы jQuery Mobile используют атрибуты данных HTML5 для многих внутренних функций. Один из них включает изменение образцов через атрибут data-theme. Посмотрите мой пример кода ниже, чтобы увидеть, что я имею в виду.

  Страница jQM по умолчанию
 
  Вот некоторый внутренний контент.

Обратите внимание, что я разместил атрибут data-theme в корневой странице div. Это означает, что новый цвет образца будет влиять на все внутри, включая заголовок и области содержимого. Я мог бы дополнительно включить данные тема = «C» в заголовок div, чтобы изменить только этот контент из остальной части моей страницы.

Компоненты образца

Это должно быть довольно просто, как реализовать эти различные образцы в рамках одного макета. Итак, теперь давайте посмотрим на код jQM CSS, чтобы мы могли разбить отдельные компоненты образца. Проверьте последний CSS-файл jQuery Mobile 1.4.5, размещенный на собственном CDN.

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

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; фон: # 111111; цвет: #ffffff; вес шрифта: полужирный; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image: -webkit-градиент (линейный, слева вверху, слева внизу, от (# 3c3c3c) до (# 111)); / * Saf4 +, Chrome * / background-image: -webkit-linear-Gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-Gradient (# 3c3c3c, # 111); / * FF3.6 * / background-image: -ms-linear-градиент (# 3c3c3c, # 111); / * IE10 * / background-image: -o-linear-Gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: линейный градиент (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button семейство шрифтов: Helvetica, Arial, sans- засечек;  .ui-bar-a .ui-link-наследовать color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; вес шрифта: полужирный;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: active цвет: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: посещения цвет: # 2489CE / * a-bar-ссылка-посещения * /;

Если вы просто хотите создать собственный образец, я рекомендую использовать шаблон на основе одного из оригиналов. Процесс станет намного более плавным, если вы начнете писать коды в новом документе CSS. У вас не будет проблем с редактированием в исходном файле, и вы можете начать работать с чистого листа. Но ключевые области, на которых вы хотите сосредоточиться, будут включать следующее:

верхний и нижний колонтитулы
содержание тела и текст страницы
список стилей
состояние кнопок по умолчанию / зависание / активный
контроль ввода формы (дополнительно)

Кодирование нового дизайна бара

Из того же CSS-файла мы рассмотрели более раннее копирование / вставку всего кода образца A (строки 12-150) в новый файл. Мы можем использовать имя образца G для реализации этих новых стилей. Теперь после копирования кода вы хотите переименовать каждый экземпляр класса, заканчивающийся на - в -г, как это то, как JQuery Mobile будет распознавать, какие стили использовать.

Я хотел бы начать с изменения дизайна панели заголовка bg, чтобы имитировать более знакомый градиент iOS. Это может быть сделано исключительно в рамках .UI-бар-г селектор. Мы хотим отредактировать свойства фона и фонового изображения, чтобы изменить эффекты градиента. Проверьте мой код ниже и демонстрационный экран нового градиента.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; Граница слева: 0px; border-right: 0px; фон: # 6d83a1; color: #fff / * a-bar-color * /; вес шрифта: полужирный; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; background-image: -webkit-градиент (линейный, 0% 0%, 0% 100%, от (# b4bfce), остановка цвета (0,5, # 899cb3), остановка цвета (0.505, # 7e94b0), до (# 6d83a1)); background-image: -webkit-linear-Gradient (вверху, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-Gradient (вверху, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linear-Gradient (верх, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-linear-Gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: линейный градиент (верх, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Я использую синюю цветовую схему, найденную в большинстве приложений iOS по умолчанию. Мой фон изначально настроен на сплошной цвет для устройств, которые не могут отображать CSS3-градиенты. Затем ниже я использую цветовые остановки вокруг маркера 50%, чтобы воссоздать традиционный эффект глянцевого блеска в стиле Apple. Также внутри того же селектора я немного изменил тень текста с более тонким цветом и диапазоном.

Кнопки и текстовые эффекты

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

.ui-btn-up-g border: 1px solid # 375073; фон: # 4a6c9b; вес шрифта: полужирный; цвет: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; тень от коробки: нет; -webkit-box-shadow: нет; -moz-box-shadow: нет; background-image: -webkit-градиент (линейный, 0% 0%, 0% 100%, от (# 89a0be), остановка цвета (0.5, # 5877a2), остановка цвета (0.505, # 476999), до (# 4a6c9b)); background-image: -webkit-linear-Gradient (вверху, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-Gradient (вверху, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / background-image: -ms-linear-градиент (вверху, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -o-linear-Gradient (вверху, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: линейный градиент (вверху, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); радиус границы: 4 пикселя; -webkit-border-radius: 4 пикселя; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; фон: # 2463de; вес шрифта: полужирный; цвет: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; тень от коробки: нет; -webkit-box-shadow: нет; -moz-box-shadow: нет; background-image: -webkit-градиент (линейный, 0% 0%, 0% 100%, от (# 779be9), остановка цвета (0,5, # 376fe0), остановка цвета (0.505, # 2260dd), до (# 2463de)); background-image: -webkit-linear-Gradient (вверху, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-Gradient (вверху, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-linear-градиент (вверху, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-linear-Gradient (вверху, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: линейный градиент (вверху, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); радиус границы: 4 пикселя; -webkit-border-radius: 4 пикселя; -moz-border-radius: 4px;

Область кода, которую мы сейчас редактируем, находится внутри классов кнопок пользовательского интерфейса. Есть 3 различных режима, которые нужно учитывать: .UI-БТН-до-г, .UI-БТН-парения-г, а также .UI-БТН-вниз-г. В основном я фокусируюсь на стандартных (btn-up) и hover (btn-hover) эффектах, редактируя тени блока и линейные градиенты. Также я расширил эффект закругленных углов, чтобы кнопки выглядели более прямоугольными.

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

Введение в ThemeRoller

Если вам нравится запачкать руки в коде, тогда я настоятельно рекомендую придерживаться пользовательских изменений. Мало того, что у вас есть больше контроля, но намного легче отлаживать проблемы в CSS, если вы сделали все изменения самостоятельно. Но для многих дизайнеров этот процесс утомителен и просто займет больше времени, чем необходимо. К счастью, команда jQuery Mobile выпустила онлайн-редактор под названием ThemeRoller..

На этой странице вы можете редактировать первые 3 образца A-C или даже создавать свои собственные. Если вы посмотрите на левую боковую панель, вы можете переключаться между этими 3 настройками или быстро вносить изменения в глобальные параметры темы. К ним относятся свойства CSS, такие как радиусы границ, тени от ячеек или шрифты страниц по умолчанию. Обратите внимание, что при выборе любого из предустановленных образцов мы можем редактировать только те же области, что и раньше - верхняя / нижняя панели, содержимое тела и 3 состояния кнопок..

Но моей любимой функцией должен быть прямой доступ к образцам Adobe Kuler. Вы можете создать несколько цветовых схем в вашей учетной записи Kuler и импортировать их в ThemeRoller. Интерфейс поддерживает функцию перетаскивания, поэтому очень просто попробовать несколько разных идей за считанные минуты.

В конечном счете, не существует абсолютного метода правильного построения образцов jQM. Некоторые дизайнеры предпочитают жестко программировать CSS, в то время как другим понравится интуитивное веб-приложение ThemeRoller. Пока вы следуете структуре классов, вы должны получать одинаковые результаты в любом случае.

Полезные ресурсы

jQuery Mobile Themes - Документация
Использование и настройка тем jQuery Mobile