Мобиле Апп Десигн / Дев Цустом Теме са јКуери Мобиле

У нашем претходном јКуери Мобиле туториалу сам увео већи део основног оквира и како да поставим ваш први веб сајт. ЈС библиотека је и лагана и лако се покупи у односу на потешкоће у учењу. Ту је и генерички ЦСС стилесхеет који је укључен у датотеке тако да можете додатно прилагодити елементе у вашем распореду.

За овај други сегмент волио бих потрошити мало времена на дубље истраживање ове идеје јКуери Мобиле теме. Целокупна индустрија дизајна је револуционисана јКМ-ом и процес израде мобилног предлошка од нуле је значајно побољшан. јКуери Мобиле није само библиотека скриптова, већ читав основни оквир за надоградњу и производњу ефикасних мобилних предложака.

Дефаулт Стилесхеет Цонтентс

Требало би да почнем са тачним објашњењем који тип ЦСС кода је укључен у подразумеване датотеке. Стилски лист из јКМ 1.0 је подељен на два главна сегмента - структура и Теме.

Структурни код је оно што се углавном може игнорисати. Ово се користи за подешавање маргина, паддинг, хеигхт / видтх, фонт варијанти, као и многе друге подразумеване поставке. Унутрашње теме се затим раздвајају од А-Е које контролишу различите визуелне ефекте у вашем дизајну. Ово може да укључи боје позадине, градијенте, сенке итд.

Сваки од ових унутрашњих елемената теме се такође може назвати као сватцхес. Када правите мобилни образац, генерално ћете се придржавати једне теме. Али у скоро сваком сценарију дизајн се може побољшати различитим бојама. Подразумевана табела стилова укључује само узорке А-Е, али можете направити сватцхеве Ф-З да бисте додали још 21 алтернативу у вашу библиотеку тема. Само да поново појаснимо ове услове а тхеме сматра се једним ЦСС фајлом који може да садржи до 26 различитих сватцхес означен са А-З.

Свитцхинг Стилес

Ако не изаберете да наведете било које сватцхеве, јКуери Мобиле ће се по дефаулту држати сватцха А. Ако већ нисте знали да јКуери Мобиле документи користе ХТМЛ5 атрибуте података за многе интерне функције. Један од њих укључује промену сватцхева преко атрибута теме-података. Погледајте мој пример кода испод да видите шта мислим.

  Дефаулт јКМ Паге
 
  Ево неких унутрашњих садржаја.

Обратите пажњу на то да сам атрибут дата-тхеме поставио на див коријенску страницу. То значи да ће нова сватцх боја утицати на све што укључује и заглавље и области садржаја. Могао бих додатно укључити дата-тхеме = "ц" у заглавље див за промјену само тог садржаја из остатка моје странице.

Компоненте узорка

Требало би да буде прилично једноставно како да се ови различити примерци имплементирају у оквиру једног распореда. Сада ћемо погледати јКМ ЦСС код тако да можемо разложити појединачне компоненте сватцх-а. Погледајте најновији јКуери Мобиле 1.4.5 ЦСС фајл који се налази на њиховом ЦДН-у.

Треба да приметите како је сваки узорак одвојен одвојеним коментаром, а свака интерна класа завршава одговарајућим словима. На пример .уи-бар-а и .уи-боди-а подразумевано се примењују у траке заглавља / подножја и области садржаја. Већина својстава имплементира ресет на фонтовима и линковима, позадинским градијентима и другим ситним детаљима. Укључио сам једноставно уи-бар-а да бисте добили идеју о елементима које циљамо.

/ * А ----------------------------------------------- ---------------------------------------------- * / .уи -бар-а бордер: 1пк солид # 2А2А2А; позадина: # 111111; цолор: #фффффф; фонт-веигхт: болд; тект-схадов: 0 / * а-бар-схадов-к * / -1пк / * а-бар-схадов-и * / 1пк # 000000; бацкгроунд-имаге: -вебкит-градиент (линеарно, лево, лево, доле, од (# 3ц3ц3ц), до (# 111)); / * Саф4 +, Цхроме * / бацкгроунд-имаге: -вебкит-линеар-градиент (# 3ц3ц3ц, # 111); / * Цхроме 10+, Саф5.1 + * / бацкгроунд-имаге: -моз-линеар-градиент (# 3ц3ц3ц, # 111); / * ФФ3.6 * / бацкгроунд-имаге: -мс-линеар-градиент (# 3ц3ц3ц, # 111); / * ИЕ10 * / бацкгроунд-имаге: -о-линеар-градиент (# 3ц3ц3ц, # 111); / * Опера 11.10+ * / бацкгроунд-имаге: линеарни градијент (# 3ц3ц3ц, # 111);  .уи-бар-а, .уи-бар-улаз, .уи-бар-а селецт, .уи-бар-а тектареа, .уи-бар-а буттон фонт-фамили: Хелветица, Ариал, санс- сериф;  .уи-бар-а .уи-линк-инхерит цолор: #ффф;  .уи-бар-а .уи-линк боја: # 7цц4е7 / * а-бар-линк-цолор * /; фонт-веигхт: болд;  .уи-бар-а .уи-линк: ховер цолор: # 2489ЦЕ / * а-бар-линк-ховер * /;  .уи-бар-а .уи-линк: активна цолор: # 2489ЦЕ / * а-бар-линк-ацтиве * /;  .уи-бар-а .уи-линк: висит цолор: # 2489ЦЕ / * а-бар-линк-виситед * /;

Ако само желите да направите прилагођени узорак, препоручујем да предложак базирате на једном од оригинала. Процес ће бити пуно лакши ако почнете писати кодове у новом ЦСС документу. Нећете имати проблема са уређивањем у оригиналном фајлу и можете почети да радите на чистој табли. Али кључне области на које желите да се усредсредите укључују следеће:

траке заглавља и подножја
садржај тела и текст странице
лист стилес
статус дугмета дефаулт / ховер / ацтиве
контрола за унос (додатно)

Кодирање новог дизајна шипке

Из истог ЦСС фајла смо погледали раније цопи / пасте све сватцх А кода (линије 12-150) у нови фајл. Можемо користити име сватцха Г да имплементирамо ове нове стилове. Сада након копирања кода желите преименовати сваку инстанцу класе која завршава -а до -г, јер ће јКуери Мобиле препознати које стилове треба користити.

Желео бих да почнем редизајнирањем заглавља бг да би опонашао познатији иОС градијент. Ово се може урадити искључиво унутар .уи-бар-г селектор. Желимо да уредимо својства позадине и слике позадине да бисмо променили ефекте градијента. Погледајте мој код испод и демо екран новог градијента.

.уи-бар-г бордер: 1пк солид # 2д3033 / * а-бар-бордер * /; бордер-лефт: 0пк; граница десно: 0пк; позадина: # 6д83а1; цолор: #ффф / * а-бар-цолор * /; фонт-веигхт: болд; тект-схадов: 0 / * а-бар-схадов-к * / -1пк / * а-бар-схадов-и * / 1пк / * а-бар-схадов-радиус * / # 3е4957; бацкгроунд-имаге: -вебкит-градиент (линеарно, 0% 0%, 0% 100%, од (# б4бфце), боја-стоп (0.5, # 899цб3), боја-стоп (0.505, # 7е94б0), до (# 6д83а1)); бацкгроунд-имаге: -вебкит-линеар-градиент (топ, # б4бфце, # 899цб3 50%, # 7е94б0 52%, # 6д83а1); / * Цхроме 10+, Саф5.1 + * / бацкгроунд-имаге: -моз-линеар-градиент (топ, # б4бфце, # 899цб3 50%, # 7е94б0 52%, # 6д83а1); / * ФФ3.6 * / бацкгроунд-имаге: -мс-линеар-градиент (врх, # б4бфце, # 899цб3 50%, # 7е94б0 52%, # 6д83а1); / * ИЕ10 * / бацкгроунд-имаге: -о-линеар-градиент (топ, # б4бфце, # 899цб3 50%, # 7е94б0 52%, # 6д83а1); / * Опера 11.10+ * / бацкгроунд-имаге: линеар-градиент (топ, # б4бфце, # 899цб3 50%, # 7е94б0 52%, # 6д83а1);

Користим плаву схему боја која се налази у већини стандардних иОС апликација. Моја позадина је иницијално постављена на једнобојну боју за уређаје који не могу приказати ЦСС3 градијенте. Онда испод користим обојене боје око 50% маркера како бих поново створио традиционални ефекат сјајног сјаја у Аппле стилу. Такође унутар истог селектора, помало сам модификовао текстуалну сенку суптилнијом бојом и дометом.

Дугмад и текстуални ефекти

Важно је када кодирање сватцхева посебно разматра која подручја сучеља требају пажњу. Трака заглавља изгледа сјајно са овом новом позадином, али последња измена коју бих желео да изврши ће одговарати стиловима дугмади ближе онима за иОС апликације.

.уи-бтн-уп-г гран: 1пк солид # 375073; бацкгроунд: # 4а6ц9б; фонт-веигхт: болд; цолор: #ффф; тект-схадов: 0 / * а-буп-схадов-к * / -1пк / * а-буп-схадов-и * / 1пк / * а-буп-схадов-радиус * / # 40536д; бок-схадов: нема; -вебкит-бок-схадов: нема; -моз-бок-схадов: нема; бацкгроунд-имаге: -вебкит-градиент (линеарно, 0% 0%, 0% 100%, од (# 89а0бе), боја-стоп (0.5, # 5877а2), боја-стоп (0.505, # 476999), до (# 4а6ц9б)); бацкгроунд-имаге: -вебкит-линеар-градиент (топ, # 89а0бе, # 5877а2 50%, # 476999 52%, # 4а6ц9б); / * Цхроме 10+, Саф5.1 + * / бацкгроунд-имаге: -моз-линеар-градиент (топ, # 89а0бе, # 5877а2 50%, # 476999 52%, # 4а6ц9б); / * ФФ3.6 * / бацкгроунд-имаге: -мс-линеар-градиент (топ, # 89а0бе, # 5877а2 50%, # 476999 52%, # 4а6ц9б); / * ИЕ10 * / бацкгроунд-имаге: -о-линеарно-градијент (топ, # 89а0бе, # 5877а2 50%, # 476999 52%, # 4а6ц9б); / * Опера 11.10+ * / бацкгроунд-имаге: лине-градиент (топ, # 89а0бе, # 5877а2 50%, # 476999 52%, # 4а6ц9б); бордер-радиус: 4пк; -вебкит-бордер-радиус: 4пк; -моз-бордер-радиус: 4пк;  .уи-бтн-уп-г .уи-бтн-интернал, .уи-бтн-ховер-г .уи-бтн-интернал, .уи-бтн-довн-г .уи-бтн-интернал бордер-радиус: 0; -вебкит-бордер-радиус: 0; -моз-бордер-радиус: 0;  .уи-бтн-ховер-г бордер: 1пк солид # 1б49а5; позадина: # 2463де; фонт-веигхт: болд; цолор: #ффф; тект-схадов: 0 / * а-буп-схадов-к * / -1пк / * а-буп-схадов-и * / 1пк / * а-буп-схадов-радиус * / # 40536д; бок-схадов: нема; -вебкит-бок-схадов: нема; -моз-бок-схадов: нема; бацкгроунд-имаге: -вебкит-градиент (линеарно, 0% 0%, 0% 100%, од (# 779бе9), боја-стоп (0.5, # 376фе0), боја-стоп (0.505, # 2260дд), до (# 2463де)); бацкгроунд-имаге: -вебкит-линеар-градиент (врх, # 779бе9, # 376фе0 50%, # 2260дд 52%, # 2463де); / * Цхроме 10+, Саф5.1 + * / бацкгроунд-имаге: -моз-линеар-градиент (врх, # 779бе9, # 376фе0 50%, # 2260дд 52%, # 2463де); / * ФФ3.6 * / бацкгроунд-имаге: -мс-линеар-градиент (врх, # 779бе9, # 376фе0 50%, # 2260дд 52%, # 2463де); / * ИЕ10 * / бацкгроунд-имаге: -о-линеарно-градијент (топ, # 779бе9, # 376фе0 50%, # 2260дд 52%, # 2463де); / * Опера 11.10+ * / бацкгроунд-имаге: лине-градиент (топ, # 779бе9, # 376фе0 50%, # 2260дд 52%, # 2463де); бордер-радиус: 4пк; -вебкит-бордер-радиус: 4пк; -моз-бордер-радиус: 4пк;

Област кода коју тренутно уређујемо је унутар УИ тастера. Постоје 3 различита начина рада: .уи-бтн-уп-г, .уи-бтн-ховер-г, и .уи-бтн-довн-г. Ја се углавном фокусирам на стандардне (бтн-уп) и ховер (бтн-ховер) ефекте тако што уређујем кутију сенке и линеарне градијенте. Такође сам проширио ефекат заобљених углова тако да су дугмад изгледала правокутно.

Због тога сам морао уклонити радијус унутарње границе из класе под називом .уи-бтн-унутрашњи. Ова класа се прикључује на елемент спан унутар сваке везе за сидрење у вашој заглављеној траци. Без ресетовања својстава радијуса границе приметићете мале грешке у дизајну кад год пређете преко дугмета. Како проводите више времена кодирања у јКуери Мобиле темама, запамтите ове мале нијансе за будуће пројекте.

Увод у ТхемеРоллер

Ако уживате у томе да вам руке буду прљаве у коду, препоручујем да се придржавате прилагођених измена. Не само да имате већу контролу, већ је много лакше исправити грешке унутар ЦСС-а ако сте сами уредили све измене. Али за многе дизајнере овај процес је заморан и једноставно ће трајати дуже него што је потребно. Срећом јКуери Мобиле тим је издао онлине уредник под именом ТхемеРоллер.

На овој страници имате приступ за уређивање првих 3 А-Ц сватцхева или чак креирање сопствених. Ако погледате у леву бочну траку, можете се пребацивати између ова три подешавања или брзо извршити промене у опцијама глобалне теме. То укључује ЦСС особине као што су радијуси обруба, сјенке оквира или фонтови задане странице. Обратите пажњу да приликом одабира било ког од предефинисаних узорака можемо да уређујемо само исте области као и раније - горње / доње траке, садржај тела и стања дугмета 3.

Али моја омиљена особина мора бити директан приступ Адобе Кулер сватцхевима. Можете креирати неколико схема боја унутар вашег Кулер налога и увести их у ТхемеРоллер. Интерфејс подржава драг-анд-дроп функционалност тако да је једноставно испробати неколико различитих идеја за неколико минута.

На крају крајева, не постоји апсолутна метода исправног изградње ваших јКМ сватцхева. Неки дизајнери више воле хард цоде ЦСС, док ће други волети интуитивну ТхемеРоллер веб апликацију. Докле год пратите структуру класе, требали бисте добити исте резултате у сваком случају.

Хелпфул Ресоурцес

јКуери Мобиле Тхемес - Документација
Коришћење и прилагођавање јКуери Мобиле тема