Mobile App Design / Dev Custom Themes med jQuery Mobile

I vores tidligere jQuery Mobile-tutorial havde jeg introduceret en del af de underliggende rammer og hvordan man går i gang med at oprette din første hjemmeside. JS-biblioteket er både letvægt og let at hente i forhold til læring vanskeligheder. Der er også generisk et CSS stilark inkluderet i filerne, så du kan tilpasse elementerne i dit layout yderligere.

Til dette andet segment vil jeg gerne bruge lidt tid på at dybere dybere ind i denne ide om jQuery Mobile-temaer. Hele designindustrien er blevet revolutioneret af jQM, og processen med at opbygge en mobilskabelon fra bunden er blevet væsentligt forbedret. jQuery Mobile er ikke kun et scriptbibliotek, men et helt fundament for at bygge videre på og producere effektive mobilskabeloner.

Standard stilarkindhold

Jeg bør begynde med at præcisere præcis, hvilken type CSS-kode der er inkluderet i standardfilerne. Stylearket fra jQM 1.0 er opdelt i to hovedsegmenter - struktur og temaer.

Strukturen kode er de ting, du kan for det meste ignorere. Dette bruges til at indstille marginer, polstring, højde / bredde, skrifttypevarianter, sammen med mange andre standardindstillinger for browser. De interne temaer splittes derefter fra A-E, som hver kontrollerer forskellige visuelle effekter i dit design. Dette kan omfatte baggrundsfarver, gradienter, drop shadows osv.

Hvert af disse indre temaelementer kan også betegnes som farveprøver. Når du opbygger en mobilskabelon, holder du normalt med et enkelt tema. Men i næsten alle scenarier kan designet forbedres med forskellige farveskemaer. Standard stylesheet indeholder kun farveprøver A-E, men du kan oprette farveprøver F-Z for at tilføje yderligere 21 alternativer til dit temabibliotek. Bare for at præcisere disse vilkår igen a tema betragtes som 1 enkelt CSS-fil, som kan indeholde op til 26 forskellige farveprøver mærket A-Z.

Skiftende stilarter

Hvis du ikke vælger at angive nogen farveprøver, holder jQuery Mobile til standardprøven A. Hvis du ikke var klar over, bruger jQuery Mobile docs HTML5-dataattributter til mange interne funktioner. En af disse indbefatter skiftende farveprøver via datatemaattributten. Tjek min kodeeksempel nedenfor for at se, hvad jeg mener.

  Standard jQM-side
 
  Her er noget internt indhold.

Bemærk, at jeg har lagt datatemaattributten på rodsiden div. Det betyder, at den nye farveprøvefarve vil påvirke alt indeni, som omfatter både overskrift og indholdsområder. Jeg kunne desuden medtage data-tema = "c" ind i overskriften div for kun at ændre det indhold fra resten af min side.

Komponenter af en swatch

Det skal være ret nemt at implementere disse forskellige farveprøver inden for et enkelt layout. Så lad os nu kigge på jQM CSS-koden, så vi kan nedbryde de enkelte komponenter i en farveprøve. Tjek den nyeste jQuery Mobile 1.4.5 CSS-fil hostet på deres egen CDN.

Du bør bemærke, hvordan hver farveprøve adskilles af en særskilt kommentar, og hver af de interne klasser slutter med den korrekte bogstaver. For eksempel .ui-bar-a og .ui-legeme-a Anvendes som standard i overskrift / fodbjælker og indholdsområder. De fleste egenskaber implementerer en nulstilling på skrifttype og linkfarver, baggrundsgradienter og andre små detaljer. Jeg inkluderede blot den ui-bar-a koder for at give dig en ide om hvilke elementer vi målretter mod.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; baggrund: # 111111; farve: #ffffff; font-weight: bold; tekstskygge: 0 / * a-bar-skygge-x * / -1px / * a-bar-skygge-y * / 1px # 000000; baggrundsbillede: -webkit-gradient (lineær, venstre top, venstre bund, fra (# 3c3c3c) til (# 111)); / * Saf4 +, Chrome * / baggrundsbillede: -webkit-lineær-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / baggrundsbillede: -moz-lineær-gradient (# 3c3c3c, # 111); / * FF3.6 * / baggrundsbillede: -ms-lineær gradient (# 3c3c3c, # 111); / * IE10 * / baggrundsbillede: -o-lineær gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: lineær gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a-indtastning, .ui-bar-a vælg, .ui-bar-a textarea, .ui-bar-a-knap font-familie: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-arv farve: #fff;  .ui-bar-a .ui-link farve: # 7cc4e7 / * a-bar-link-farve * /; font-weight: bold;  .ui-bar-a .ui-link: svinge farve: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: aktiv farve: # 2489CE / * a-bar-link-aktiv * /;  .ui-bar-a .ui-link: besøgte farve: # 2489CE / * a-bar-link-visited * /;

Hvis du bare ønsker at oprette en brugerdefineret farveprøve, anbefaler jeg at basere skabelonen ud af en af originalerne. Processen vil gå meget glattere, hvis du begynder at skrive koder i et nyt CSS-dokument. Du vil ikke have besværet med at redigere i den oprindelige fil, og du kan begynde at arbejde på en ren skifer. Men de nøgleområder, du vil fokusere på, vil omfatte følgende:

header og footer barer
kropsindhold og sidetekst
liste stilarter
knappen angiver standard / hover / aktiv
form input kontroller (ekstra)

Kodning af en ny bardesign

Fra den samme CSS-fil kiggede vi på tidligere kopi / indsæt alle farveprøver A-kode (linjer 12-150) til en ny fil. Vi kan bruge swatchnavnet G til at implementere disse nye stilarter. Nu efter at du har kopieret koden, skal du omdøbe hver klasseeksempel, der slutter --en til -g, da det er sådan, hvordan jQuery Mobile genkender hvilke stilarter der skal bruges.

Jeg vil gerne starte med at omforme overskriftslinjen bg for at efterligne en mere velkendt iOS-gradient. Dette kan kun ske inden for .ui-bar-g vælgeren. Vi vil redigere baggrunds- og baggrundsbilledegenskaberne for at ændre gradienteffekterne. Tjek min kode nedenfor og en demo skærm af den nye gradient.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-grænse * /; grænse-venstre: 0px; grænse-højre: 0px; baggrund: # 6d83a1; farve: #fff / * a-bar-farve * /; font-weight: bold; tekstskygge: 0 / * a-bar-skygge-x * / -1px / * a-bar-skygge-y * / 1px / * a-bar-skygge-radius * / # 3e4957; baggrundsbillede: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# b4bfce), farvestop (0,5, # 899cb3), farvestop (0.505, # 7e94b0) 6d83a1)); baggrundsbillede: -webkit-lineær-gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / baggrundsbillede: -moz-lineær-gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / baggrundsbilde: -ms-lineær gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / baggrundsbillede: -o-lineær gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / baggrundsbillede: lineær gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Jeg bruger den blå farveskema, der findes i de fleste standard iOS-programmer. Min baggrund er oprindeligt sat til en solid farve for enheder, som ikke kan gengive CSS3-gradienter. Derefter nedenfor bruger jeg farvestop omkring 50% markøren for at genskabe den traditionelle Apple-stil glansende effekt. Også inden for samme vælger har jeg lidt ændret tekstskyggen med en mere subtil farve og rækkevidde.

Knapper og teksteffekter

Det er vigtigt, når kodning af farveprøver skal overvejes specifikt, hvilke områder af grænsefladen der skal tages hensyn til. Overskriftslinjen ser godt ud med denne nye baggrund, men en sidste ændring, jeg gerne vil lave, stemmer overens med knappestyperne tættere på iOS apps.

.ui-btn-up-g border: 1px solid # 375073; baggrund: # 4a6c9b; font-weight: bold; farve: #fff; tekstskygge: 0 / * a-bup-skygge-x * / -1px / * a-bup-skygge-y * / 1px / * a-bup-skygge-radius * / # 40536d; box-skygge: ingen; -webkit-boks-skygge: ingen; -moz-box-shadow: none; baggrundsbillede: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# 89a0be), farvestop (0,5, # 5877a2), farvestop (0.505, # 476999) 4a6c9b)); baggrundsbillede: -webkit-lineær-gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / baggrundsbillede: -moz-lineær-gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / baggrundsbillede: -ms-lineær gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / baggrundsbillede: -o-lineær gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / baggrundsbillede: lineær gradient (top, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); grænse-radius: 4px; -webkit-grænse-radius: 4px; -moz-grænse-radius: 4px;  .ui-btn-up-g .ui-btn-indre, .ui-btn-hover-g .ui-btn-indre, .ui-btn-ned-g .ui-btn-indre grænse-radius: 0; -webkit-grænse-radius: 0; -moz-grænse-radius: 0;  .ui-btn-hover-g grænse: 1px solid # 1b49a5; baggrund: # 2463de; font-weight: bold; farve: #fff; tekstskygge: 0 / * a-bup-skygge-x * / -1px / * a-bup-skygge-y * / 1px / * a-bup-skygge-radius * / # 40536d; box-skygge: ingen; -webkit-boks-skygge: ingen; -moz-box-shadow: none; baggrundsbillede: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# 779be9), farvestop (0,5, # 376fe0), farvestop (0.505, # 2260dd) 2463de)); baggrundsbillede: -webkit-lineær-gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / baggrundsbillede: -moz-lineær-gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / baggrundsbillede: -ms-lineær gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / baggrundsbillede: -o-lineær gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / baggrundsbillede: lineær gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); grænse-radius: 4px; -webkit-grænse-radius: 4px; -moz-grænse-radius: 4px;

Kodeområdet, som vi redigerer nu, er inden for UI-knapklasserne. Der er 3 forskellige tilstande, der skal beskæftige sig med: .ui-Btn-up-g, .ui-Btn-hold markøren g, og .ui-Btn-down-g. Jeg fokuserer for det meste på standard (btn-up) og hover (btn-hover) effekter ved at redigere bokseskyggen og lineære gradienter. Også jeg udvidede den afrundede hjørner effekt, så knapperne vises mere rektangulære.

På grund af dette har jeg brug for at fjerne den indvendige grænse radius fra en klasse med titlen .ui-Btn-indre. Denne klasse bliver vedhæftet på et spændingselement inden for hvert ankerlink i din header bar. Uden nulstilling af grænsen radius egenskaber vil du bemærke små fejl i designet, når du svæver over en knap. Når du bruger mere tidskodning i jQuery Mobile-temaer, gemmer du disse små nuancer til fremtidige projekter.

Introduktion til ThemeRoller

Hvis du nyder at få dine hænder snavset i kode, så anbefaler jeg stærkt, at du holder dig til brugerdefinerede redigeringer. Ikke alene har du mere kontrol, men det er meget lettere at fejle problemer inden for CSS, hvis du selv har foretaget alle redigeringer. Men for mange designere er denne proces trættende og vil simpelthen tage længere tid end nødvendigt. Heldigvis har jQuery Mobile-holdet udgivet en online-editor under navnet ThemeRoller.

Fra denne side har du adgang til at redigere de første 3 A-C-farveprøver eller endda lave en af dine egne. Hvis du ser i venstre sidepanel, kan du skifte mellem disse 3 indstillinger eller hurtigt ændre de globale temaindstillinger. Disse omfatter CSS-egenskaber som grænseradiader, boksskygger eller standardsidefonter. Bemærk, at du vælger en af de forudindstillede farveprøver, som vi kun kan redigere på samme områder som før - top- / bundstænger, kropsindhold og de 3 knapper.

Men min yndlingsfunktion skal være den direkte adgang til Adobe Kuler-farveprøver. Du kan faktisk oprette et par farveskemaer i din Kuler-konto og importere dem til ThemeRoller. Interfacet understøtter træk-og-slip-funktionalitet, så det er rigtigt nemt at afprøve et par forskellige ideer om få minutter.

I sidste ende er der ingen absolut metode til korrekt opbygning af jQM-farveprøver. Nogle designere foretrækker at kode CSS, mens andre vil elske den intuitive ThemeRoller web app. Så længe du følger klassestrukturen, skal du få de samme resultater hverken.

Nyttige ressourcer

jQuery Mobile Themes - Dokumentation
Brug og tilpasning af jQuery Mobile-temaer