Mobile App Design / Dev Custom Temaer med jQuery Mobile

I vår tidligere jQuery Mobile-opplæring hadde jeg introdusert mye av det underliggende rammeprogrammet og hvordan du går om å sette opp din første nettside. JS-biblioteket er både lett og lett å hente når det gjelder læringskompetanse. Det er også generisk et CSS-stilark som følger med filene, slik at du kan tilpasse elementene i oppsettet ytterligere.

For dette andre segmentet vil jeg gjerne bruke litt tid på å dypere inn i denne ideen om jQuery Mobile-temaer. Hele designindustrien har blitt revolusjonert av jQM, og prosessen med å bygge en mobilmal fra grunnen har blitt betydelig forbedret. jQuery Mobile er ikke bare et skriptbibliotek, men et helt grunnlag for å bygge videre på og produsere effektive mobilmaler.

Standard stilark-innhold

Jeg bør begynne med å klargjøre nøyaktig hvilken type CSS-kode som er inkludert i standardfilene. Stilarket fra jQM 1.0 er delt inn i to hovedsegmenter - struktur og temaer.

Strukturen koden er de tingene du mest kan ignorere. Dette brukes til å angi marginer, polstring, høyde / bredde, fontvarianter, sammen med mange andre nettleservalg. De interne temaene deles deretter opp fra A-E, som hver kontrollerer forskjellige visuelle effekter i designet. Dette kan inkludere bakgrunnsfarger, gradienter, drop shadows, etc..

Hver av disse indre temaelementene kan også refereres til som fargeprøver. Når du bygger en mobilmal, holder du vanligvis med et enkelt tema. Men i nesten alle scenarier kan designet forbedres med forskjellige farger. Standardformatarket inneholder bare fargeprøver A-E, men du kan bygge fargeprøver F-Z for å legge til ytterligere 21 alternativer i temabiblioteket. Bare for å klargjøre disse betingelsene igjen a tema regnes som en enkelt CSS-fil som kan inneholde opptil 26 forskjellige fargeprøver merket A-Z.

Bytte stiler

Hvis du ikke velger å spesifisere noen stifter, holder jQuery Mobile til standardprøven A. Hvis du ikke var klar over at jQuery Mobile-docs bruker HTML5-dataattributter for mange interne funksjoner. En av disse inkluderer endring av stifter via datatemaattributtet. Sjekk ut koden nedenfor for å se hva jeg mener.

  Standard jQM-side
 
  Her er noe internt innhold.

Legg merke til at jeg plasserte datatemaattributtet på rotsidens div. Dette betyr at den nye fargerfargen vil påvirke alt inni som inkluderer både topptekst og innholdsområder. Jeg kunne også inkludere data-type = "c" inn i header div for å endre bare det innholdet fra resten av siden min.

Komponenter av en swatch

Det bør være ganske greit å implementere disse forskjellige fargene i en enkelt layout. Så nå, la oss ta en titt på jQM CSS-koden, slik at vi kan bryte ned de enkelte komponentene i en fargeprøve. Sjekk ut den nyeste jQuery Mobile 1.4.5 CSS filen som er hostet på egen CDN.

Du bør legge merke til hvordan hver fargeprøve separeres av en tydelig kommentar, og hver av de interne klassene slutter med riktig bokstav. For eksempel .ui-bar-en og .ui-legeme-en brukes som standard i topptekst / bunntekst og innholdsområder. De fleste egenskaper implementerer en tilbakestilling på font- og lenkefarger, bakgrunnsgradienter og andre små detaljer. Jeg inkluderte bare ui-bar-en koder for å gi deg en ide om hvilke elementer vi målretter mot.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; bakgrunn: # 111111; farge: #ffffff; font-weight: bold; tekstskygge: 0 / * a-bar-skygge-x * / -1px / * a-bar-skygge-y * / 1px # 000000; bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 3c3c3c), til (# 111)); / * Saf4 +, Chrome * / bakgrunnsbilde: -webkit-lineær-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / bakgrunnsbilde: -moz-lineær-gradient (# 3c3c3c, # 111); / * FF3.6 * / bakgrunnsbilde: -ms-lineær-gradient (# 3c3c3c, # 111); / * IE10 * / bakgrunnsbilde: -o-lineær gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / bakgrunnsbilde: lineær gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a-input, .ui-bar-a velg, .ui-bar-a textarea, .ui-bar-a-knapp font-familie: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-arv color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; font-weight: bold;  .ui-bar-a .ui-link: svever farge: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: aktiv farge: # 2489CE / * a-bar-link-aktiv * /;  .ui-bar-a .ui-link: besøkt farge: # 2489CE / * a-bar-link-visited * /;

Hvis du bare leter etter å lage en tilpasset swatch anbefaler jeg å basere malen av en av originalene. Prosessen vil gå mye jevnere hvis du begynner å skrive koder i et nytt CSS-dokument. Du vil ikke ha problemer med å redigere i den opprinnelige filen, og du kan begynne å jobbe på en ren skifer. Men de sentrale områdene du vil fokusere på, vil inkludere følgende:

topp- og bunntekststenger
kroppsinnhold og sidetekst
liste stiler
knappen angir standard / hover / aktiv
form input kontroller (ekstra)

Koding av en ny bardesign

Fra samme CSS-fil så vi på tidligere kopi / lim inn alle stikkordene A-kode (linjer 12-150) til en ny fil. Vi kan bruke eksponeringsnavnet G for å implementere disse nye stilene. Nå etter at du har kopiert koden, vil du omdøpe hver klasseeksempel som slutter -en til -g, som dette er hvordan jQuery Mobile vil gjenkjenne hvilke stilarter du skal bruke.

Jeg vil gjerne starte med å omforme topplinjen bg for å etterligne en mer kjent iOS-gradient. Dette kan gjøres utelukkende innenfor .ui-bar-g velgeren. Vi vil redigere bakgrunns- og bakgrunnsbildeegenskapene for å endre gradienteffekter. Sjekk ut koden min nedenfor og en demo skjerm av den nye graden.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; border-left: 0px; grense høyre: 0px; bakgrunn: # 6d83a1; farge: #fff / * a-bar-farge * /; font-weight: bold; tekstskygge: 0 / * a-bar-skygge-x * / -1px / * a-bar-skygge-y * / 1px / * a-bar-skygge-radius * / # 3e4957; bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# b4bfce), fargestopp (0,5, # 899cb3), fargestopp (0.505, # 7e94b0) 6d83a1)); bakgrunnsbilde: -webkit-lineær-gradient (topp, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / bakgrunnsbilde: -moz-lineær-gradient (topp, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / bakgrunnsbilde: -ms-lineær gradient (topp, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / bakgrunnsbilde: -o-lineær gradient (topp, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / bakgrunnsbilde: lineær gradient (topp, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Jeg bruker det blå fargeskjemaet som finnes i de fleste standard iOS-applikasjoner. Min bakgrunn er i utgangspunktet satt til en solid farge for enheter som ikke kan gjengi CSS3-gradienter. Deretter bruker jeg fargestopper rundt 50% -markøren for å gjenskape den tradisjonelle glansseffekten i Apple-stil. Også i samme velger har jeg litt endret tekstskyggen med en mer subtil farge og rekkevidde.

Knapper og tekst effekter

Det er viktig når kodingsprøver skal vurderes spesifikt hvilke områder av grensesnittet som trenger oppmerksomhet. Overskriftslinjen ser bra ut med denne nye bakgrunnen, men en siste modifikasjon jeg vil gjerne vil samsvare med knappestilene nærmere iOS-appene.

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

Koden området vi redigerer nå er innenfor UI-knappen klasser. Det er 3 forskjellige moduser å være opptatt av: .ui-btn-up-g, .ui-btn-hold-g, og .ui-btn-down-g. Jeg fokuserer for det meste på standard (btn-up) og hover (btn-hover) effekter ved å redigere bokseskyggen og lineære gradienter. Også jeg utvidet den avrundede hjørner effekten slik at knappene vises mer rektangulær.

På grunn av dette har jeg trengte å fjerne den indre grensen radius fra en tittel med tittelen .ui-btn-indre. Denne klassen blir festet på et spenningselement innenfor hver ankerlänk i topptekstlinjen. Uten å tilbakestille grensen radius egenskaper vil du legge merke til små glitches i design når du svinger over en knapp. Når du bruker mer tidskoding i jQuery Mobile-temaer, vil du huske disse små nyansene for fremtidige prosjekter.

Introduksjon til ThemeRoller

Hvis du liker å få hendene dine skitne i kode, så anbefaler jeg på det sterkeste å holde deg til tilpassede endringer. Ikke bare har du mer kontroll, men det er mye lettere å feilsøke problemer i CSS hvis du har gjort alle endringene selv. Men for mange designere er denne prosessen kjedelig og vil bare ta lengre tid enn nødvendig. Heldigvis har jQuery Mobile Team laget en online-editor under navnet ThemeRoller.

Fra denne siden har du tilgang til å redigere de første 3 A-C-stikkordene eller til og med lage en egen. Hvis du ser i venstre sidefelt, kan du bytte mellom disse tre innstillingene eller raskt gjøre endringer i de globale temaalternativene. Disse inkluderer CSS-egenskaper som grenseradier, boksskygger eller standardsidefonter. Legg merke til når du velger noen av de forhåndsinnstilte stikkordene som vi kan redigere kun de samme områdene som før - topp- / bunnstenger, kroppsinnhold og de 3 knappene.

Men min favorittfunksjon må være direkte tilgang til Adobe Kuler-fargeprøver. Du kan faktisk lage noen fargeskjemaer i din Kuler-konto og importere dem til ThemeRoller. Grensesnittet støtter dra-og-slipp-funksjonalitet, så det er veldig enkelt å prøve ut noen forskjellige ideer om noen minutter.

Til slutt er det ingen absolutt metode for riktig bygging av jQM-stifter. Noen designere foretrekker hardkode CSS mens andre vil elske den intuitive ThemeRoller webapp. Så lenge du følger klassestrukturen, bør du få de samme resultatene hverken.

Nyttige ressurser

jQuery Mobile Themes - Dokumentasjon
Bruke og tilpasse jQuery Mobile-temaer