Mobile App Design / Dev персонализирани теми с jQuery Mobile

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

За този втори сегмент бих искал да прекарам малко време в по-задълбочаване на тази идея за jQuery Mobile themes. Цялата индустрия за дизайн е революционизирана от jQM и процесът на изграждане на мобилен шаблон от нулата е значително подобрен. jQuery Mobile не е само библиотека за скриптове, а цялостна наземна рамка за надграждане и създаване на ефективни мобилни шаблони.

Съдържание на стилове по подразбиране

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

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

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

Смяна на стилове

Ако не изберете да зададете някакви swatches, jQuery Mobile ще се придържа към swatch A по подразбиране. Ако още не сте знаели, че jQuery Mobile docs използват HTML5 атрибути за данни за много вътрешни функции. Едно от тях включва промяна на мостри чрез атрибута на темата за данни. Проверете моя пример код по-долу, за да видите какво имам предвид.

  По подразбиране jQM Page
 
  Ето вътрешно съдържание.

Забележете, че поставих атрибута на темата за данни в раздела за главната страница. Това означава, че новият цвят swatch ще въздейства върху всичко вътре, което включва двете области на заглавието и съдържанието. Освен това бих могъл да включа данни тема = "в" в заглавния div, за да променяте само това съдържание от останалата част от моята страница.

Компоненти на Swatch

Трябва да е съвсем ясно как да се прилагат тези различни образци в рамките на едно разположение. Така че сега нека да разгледаме jQM CSS кода, за да можем да разбием отделните компоненти на мострата. Вижте най-новия jQuery Mobile 1.4.5 CSS файл, хостван на тяхно CDN.

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

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

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

ленти на горния и долния колонтитул
съдържание на тялото и текст на страницата
стилове на списък
бутонът посочва по подразбиране / hover / active
форми за контрол на входа (допълнително)

Кодиране на нов дизайн на лентата

От същия CSS файл погледнахме по-рано copy / paste всички swatch A код (редове 12-150) в нов файл. Можем да използваме името swatch G, за да приложим тези нови стилове. Сега, след като копирате кода, който искате да преименувате всеки инстанция клас завършва в -а да се -г, тъй като jQuery Mobile ще разпознае кои стилове да се използват.

Бих искал да започна с препроектиране на заглавната лента bg, за да имитира по-познат iOS градиент. Това може да стане само в рамките на .UI бар-г селектор. Искаме да редактираме свойствата на фона и фоновото изображение, за да променим ефектите на градиента. Проверете моя код по-долу и демонстрационен екран на новия градиент.

.ui-bar-g граница: 1px твърдо # 2d3033 / * a-bar-border * /; граница ляво: 0px; Граница вдясно: 0px; фон: # 6d83a1; цвят: #fff / * a-bar-color * /; тегло на шрифта: удебелен; текстова сянка: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; background-image: -webkit-gradient (линеен, 0% 0%, 0% 100%, от (# b4bfce), цветен стоп (0.5, # 899cb3), стоп (0.505, # 7e94b0), до (# 6d83a1)); background-image: -webkit-линеен градиент (отгоре, # 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-линеен градиент (отгоре, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-линеен градиент (отгоре, # 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 граница: 1px твърдо # 375073; фон: # 4a6c9b; тегло на шрифта: удебелен; цвят: #fff; текстова сянка: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: няма; -webkit-box-shadow: няма; -moz-box-shadow: няма; background-image: -webkit-gradient (линеен, 0% 0%, 0% 100%, от (# 89a0be), цветен стоп (0.5, # 5877a2), цветен стоп (0.505, # 476999), до (# 4a6c9b)); background-image: -webkit-линеен градиент (отгоре, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-линеен градиент (отгоре, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / background-image: -ms-линеен градиент (отгоре, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -о-линеен градиент (отгоре, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: линеен градиент (отгоре, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); граничен радиус: 4px; -bubkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-вътрешен, .ui-btn-hover-g .ui-btn-вътрешен, .ui-btn-down-g .ui-btn-вътрешен border-radius: 0; - радиус на полето: 0; -moz-border-radius: 0;  .ui-btn-hover-g граница: 1px твърдо # 1b49a5; фон: # 2463de; тегло на шрифта: удебелен; цвят: #fff; текстова сянка: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: няма; -webkit-box-shadow: няма; -moz-box-shadow: няма; background-image: -webkit-gradient (линеен, 0% 0%, 0% 100%, от (# 779be9), стоп-цвят (0.5, # 376fe0), стоп-цвят (0.505, # 2260dd), до (# 2463de)); background-image: -webkit-линеен градиент (отгоре, # 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-линеен градиент (отгоре, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-линеен градиент (отгоре, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: линеен градиент (отгоре, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); граничен радиус: 4px; -bubkit-border-radius: 4px; -moz-border-radius: 4px;

Зоната за код, която редактираме сега, е в класовете на потребителския интерфейс. Има 3 различни режима, които се отнасят до: .UI-BTn-до-г, .UI-BTn-висене-г, и .UI-BTn-надолу г. Аз се фокусирам най-вече върху стандартните (btn-up) и hover (btn-hover) ефекти, като редактирам полето сянка и линейни градиенти. Също така разширих ефекта на заоблени ъгли, така че бутоните да изглеждат по-правоъгълни.

Поради това трябваше да премахна радиуса на вътрешната граница от клас, озаглавен .UI-BTn-вътрешната. Този клас се прикачва към елемент на участък във всяка връзка за връзка в заглавната ви лента. Без да нулирате свойствата на радиуса на границата, ще забележите малки проблеми в дизайна, когато задържите мишката върху един бутон. Тъй като прекарвате повече време в кодиране в темите jQuery Mobile, ще запомните тези малки нюанси за бъдещи проекти.

Въведение в ThemeRoller

Ако обичате да си замърсявате ръцете с код, тогава силно ви препоръчвам да се придържате към персонализираните редакции. Не само, че имате по-голям контрол, но е много по-лесно да отстранявате грешки в CSS, ако сте направили всички редакции. Но за много дизайнери този процес е уморителен и ще отнеме повече време, отколкото е необходимо. За щастие екипът на jQuery Mobile пусна онлайн редактор под името ThemeRoller.

От тази страница имате достъп до редактиране на първите 3 модела на A-C или дори да създадете своя собствена. Ако погледнете в лявата странична лента, можете да превключвате между тези три настройки или бързо да правите промени в опциите на глобалната тема. Те включват свойства на CSS, като радиуси на рамката, сенки на кутиите или шрифтове на страниците по подразбиране. Обърнете внимание, че когато изберете някой от предварително зададените образци, можем да редактираме само същите области както преди - горните / долните ленти, съдържанието на тялото и състоянията на 3 бутона.

Но любимата ми функция трябва да бъде директен достъп до swatch на Adobe Kuler. Всъщност можете да създадете няколко цветови схеми в профила си в Kuler и да ги импортирате в ThemeRoller. Интерфейсът поддържа функцията "плъзгане и пускане", така че е много лесно да изпробвате няколко различни идеи за няколко минути.

В крайна сметка няма абсолютен метод за правилно изграждане на вашите jQM мостри. Някои дизайнери предпочитат твърдия CSS код, докато други ще харесат интуитивното уеб приложение ThemeRoller. Докато следите структурата на класа, тогава трябва да получите същите резултати.

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

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