Innhold
- 01. Stenger (.ui-bar-?)
- 02. Innholdsblokker (.ui-body-?)
- 03. Knapper og listevisninger (.ui-btn-?)
- 04. Blanding og matchende fargeprøver
- 05. Aktiv tilstand for hele området
- 06. Standardikoner
- 07. Opprette og bruke et tilpasset tema
- 08. Hva er ThemeRoller?
- 09. Bruke ThemeRoller
- 10. Forhåndsvisning
- 11. Farger
- 12. Inspektør
- 13. Verktøy
- 14. Lage et tema for Notekeeper
- 15. Eksportere temaet ditt
- Kunnskap som trengs: HTML, litt CSS og JavaScript
- Krever: Ingenting mer enn din favoritt HTML-editor og en nettleser
- Prosjekt Tid: To timer
- Støttefil
Dette er et redigert utdrag fra kapittel 11 av jQuery Mobile Web Development Essentials, utgitt av Packt Publishing.
Theming i jQuery Mobile er grei og enkel å bruke for utvikleren, men er ganske forseggjort bak kulissene. Heldigvis vil det sjelden være en tid da du trenger å vite alt som blir gjort for deg. Det er imidlertid verdt litt av vår tid å forstå hvordan det fungerer.
Ut av boksen kommer jQuery Mobile med et temasett som består av fem fargeprøver, hver tilknyttet et brev fra A-E. Temaet inneholder en serie basale CSS-klasser som kan brukes etter eget ønske på nesten ethvert element, og de inneholder globale innstillinger for bredde, høyde, kantradius, skygger. De enkelte fargeprøvene inneholder spesifikk informasjon om farge, skrifttyper og så videre.
Ytterligere fargeprøver kan legges til de fem originale fargeprøvene fra F-Z, eller de originale fargeprøvene kan erstattes eller overstyres etter ønske. Dette systemet gir totalt 26 forskjellige fargeprøver, noe som gir mulighet for millioner av mulige kombinasjoner av temafarger, stiler og mønstre. Du bruker et jQuery Mobile-tema på det valgte elementet ved å legge til et datatema-attributt med bokstaven til ønsket tema:
Utviklere vil vanligvis velge å bruke datatema-attributtmetoden når de bruker stiler, men det er også mulig å knytte CSS-klassenavnene direkte til sideelementene dine for mer detaljert kontroll. Det er en håndfull primære prefikser som tillater denne fleksibiliteten.
01. Stenger (.ui-bar-?)
Linjeprefikset brukes vanligvis på topptekster, bunntekster og andre områder med høy betydning:
02. Innholdsblokker (.ui-body-?)
Innholdsblokker brukes vanligvis på områder der det forventes at tekst i avsnittet skal forekomme. Fargen bidrar til å sikre maksimal lesbarhet med tekstfargen plassert mot den:
03. Knapper og listevisninger (.ui-btn-?)
Knapper og listevisninger er to av de viktigste elementene i jQuery Mobile-biblioteket, og du kan være trygg på at teamet tok seg god tid til å gjøre det riktig. Prefikset .ui-btn inkluderer også stiler for opp, ned, sveve og aktive tilstander:
04. Blanding og matchende fargeprøver
En av de fine tingene med temaet i jQuery Mobile er at underordnede elementer arver fra foreldrene med mindre annet er spesifisert. Dette betyr at hvis du setter en knapp uten sitt eget datatema-attributt i en topptekst eller bunntekstlinje, vil den knappen bruke samme tema som foreldrene. Onde ikke?
Det er også helt akseptabelt, og til og med oppmuntret, å plassere et element ved hjelp av en fargeprøve og barnet til et element ved hjelp av en annen fargeprøve. Dette kan hjelpe elementet til å skille seg ut mer, eller matche en annen del av appen, eller hvilken som helst begrunnelse utvikleren velger. Det er mulig, og dessuten er det enkelt. Bare plasser en knapp (eller et annet element) inne i en headerbar, og tilordne det sitt eget datatema-attributt:
05. Aktiv tilstand for hele området
jQuery Mobile bruker også en global aktiv tilstand for alle elementer. Denne aktive tilstanden brukes til knapper, skjemaelementer, navigering og hvor som helst der det er behov for å indikere at noe er valgt for øyeblikket. Den eneste måten å endre denne fargeverdien er å angi (eller overstyre) den via CSS.CSS-klassen for den aktive tilstanden er passende nok .ui-btn-aktiv:
06. Standardikoner
Inkludert i jQuery Mobile-settet er 18 ikoner som dekker et bredt spekter av behov for utviklere. Ikonsettet er hvitt på gjennomsiktig, som jQuery Mobile legger over en semi-gjennomsiktig svart sirkel for å gi kontrast mot alle fargeprøvene. For å legge til et ikon, spesifiser data-ikonattributtet med navnet på ønsket ikon:
jQuery Mobile gir også muligheten til å plassere ikoner på toppen, høyre, bunn eller venstre side av en knapp ved hjelp av data-iconpos = "[top, right, bottom, left]" attributtet, med venstre som standardplassering. Utviklere kan også vise et ikon alene uten tekst ved å spesifisere data-iconpos = "notext":
Implementering av egendefinerte ikoner er også mulig og vil bli omtalt senere i dette kapittelet.
07. Opprette og bruke et tilpasset tema
Vi har allerede diskutert hvor kraftig tema er i jQuery Mobile. Det gjør det trivielt å utvikle et rikt mobilnettsted med enkel og elegant stil. Enda kraftigere er muligheten til å lage ditt eget fargeprøvebibliotek som kan brukes til å gjøre applikasjonen eller nettstedet ditt virkelig unikt. Å utvikle ditt eget tema kan tilnærmes på en av følgende to måter:
- Last ned og åpne den eksisterende jQuery Mobile CSS-filen, og rediger etter eget ønske.
- Pek nettleseren din mot ThemeRoller for jQuery Mobile.
Vi vil kun fokusere på alternativ to, for la oss være ærlige, hvorfor gå gjennom hele CSS når du kan peke, klikke og dra deg til et nytt tema, fullt av fargeprøver på ti minutter? La oss finne ut hva ThemeRoller handler om.
08. Hva er ThemeRoller?
ThemeRoller for jQuery Mobile er en utvidelse av en nettbasert app som ble skrevet for jQuery UI-prosjektet. Det lar brukerne raskt sette sammen et tema fullt av fargeprøver på få minutter ved hjelp av dra og slipp fargestyring. Den har en interaktiv forhåndsvisning slik at du umiddelbart kan se hvordan endringene påvirker temaet ditt. Den har også et innebygd inspektørverktøy som hjelper deg med å grave i detaljene (hvis du vil ha dem). Den integreres også med Adobe® Kuler®, et fargestyringsverktøy. Du kan laste ned temaet ditt etter at du er ferdig, du kan dele det med andre via en egendefinert nettadresse, og du kan importere tidligere temaer for finjustering i siste øyeblikk. Det er et kraftig verktøy og er et perfekt supplement til jQuery Mobile.
Et av kjennetegnene på de fem standardprøvene er at jQuery Mobile-teamet brukte ganske mye tid på å lese og lese. Fargeprøvene spenner fra høyeste kontrast (A) til laveste kontrast (E). Innenfor et enkelt tema er områdene som har mest kontrast områdene som er mest fremtredende på siden. Dette inkluderer overskriften (og listvisningsoverskrifter) og knappene. Når du lager ditt eget tema, er det lurt å ha dette i bakhodet. Vi vil alltid fokusere på brukervennlighet i appen vår, ikke sant? Hva nytter det med en glatt app hvis ingen kan lese den på grunn av dårlige fargevalg?
09. Bruke ThemeRoller
Det første du ser når du laster opp ThemeRoller, er en glatt utseende skjerm, etterfulgt av en nyttig Komme i gang-skjerm:
Komme i gang-skjermen har noen nyttige tips, så sørg for å se på det før du klikker på Get Rolling-knappen:
Når alle sprutskjermene ikke er i veien, vil du bli presentert for det primære grensesnittet:
ThemeRoller er delt inn i fire hovedområder: Forhåndsvisning, Farge, Inspektør og Verktøy. Hver av disse inneholder viktig funksjonalitet som vi trenger å gjennomgå. Vi begynner med delen Forhåndsvisning.
10. Forhåndsvisning
Med mindre du laster inn et eksisterende tema, vil forhåndsvisningsområdet presentere tre komplette, identiske og interaktive jQuery Mobile-sider full av widgets av alle slag:
Flytt musen over dem, så ser du at hver side fungerer. Overskriften på hver side inneholder en bokstav som angir hvilken fargeprøve som styrer utseendet.
11. Farger
Øverst på siden ser du en serie fargebrikker, sammen med to skyvekontroller og en vippeknapp. Lengre til høyre ser du ytterligere ti fargebrikker som skal være blanke. Disse er dedikert til nylig brukte farger og vil være tomme til du har valgt en farge:
Under fargebrikkene er to glidere merket Lyshet og metning. Glidebryteren for lysstyrke justerer de lyse og mørke tonene i serien med fargeprøver, mens metningen gjør fargene mer eller mindre levende. Til sammen bør en bruker kunne tilnærme seg nesten hvilken som helst farge de velger. For å bruke farger fra Kuler, klikk på tekstlenken merket Adobe Kuler-fargeprøver.
Hver av fargebrikkene kan bli dratt til et hvilket som helst element i forhåndsvisningsområdet. Dette gjør utviklingen av et fargesett ekstremt enkelt. Vær oppmerksom på at mange av jQuery Mobile-stilene overlapper hverandre, for eksempel får topptekstlinjen øverst på siden den samme stilen som toppteksten i listevisningen. Juster fargene etter ønske, og dra deretter hver brikke til et element på siden. Husk at hver enkelt side er sin egen fargeprøve, så vær forsiktig med hvordan du velger å blande farger.
12. Inspektør
Helt til venstre på grensesnittet er inspektørpanelet, delt i to deler. Den øverste delen inneholder knapper som lar utviklere laste ned temaet, importere et eksisterende tema og dele en lenke til temaet. Det er også en hjelpelink for folk som ikke kjøpte denne boken:
Den nederste delen inneholder en serie faner merket Global, A, B, C og +. Hver av disse kategoriene har et trekkspillpanel som inneholder alle verdiene for en individuell fargeprøve, med unntak av fanen Global som gjelder for alle fargeprøvene.
Velg kategorien Global, klikk deretter Aktiv tilstand, og trekkspillpanelet utvides for å vise innstillinger for den aktive tilstanden for hele temaet. Alternativene inkluderer tekstfarge, tekstskygge, bakgrunn og kantlinje. Endring av en verdi i det globale fører til at hver nåværende (og fremtidig) fargeprøve gjenspeiler den nye innstillingen.
Ytterligere fargeprøver kan legges til temaet ditt på to måter. Ved å klikke på + -fanen øverst på inspektøren, blir det lagt til en ny fargeprøve på det siste stedet i temaet ditt. Du kan også legge til en ny fargeprøve ved å klikke på Legg til fargeknapp nederst i forhåndsvisningsområdet. Fargeprøver kan slettes ved å velge kategorien med fargeprøven du vil fjerne, og deretter klikke på Slett-lenken til høyre for fargeprøvenavnet. Merk at å slette en fargeprøve fra toppen av bunken vil føre til at de gjenværende fargeprøvene blir omdøpt.
13. Verktøy
Helt øverst på siden er det en serie knapper. Disse knappene lar deg utføre en rekke oppgaver som vi vil dekke om et øyeblikk, men først se på knappene selv:
Du vil legge merke til følgende knapper: en bryter som lar deg bytte mellom 1.1 (nåværende) versjon og 1.0.1-versjonen, angre / gjøre om og en veksleknapp for inspektøren. Hvis du setter denne slåen på, kan du inspisere en hvilken som helst widget i forhåndsvisningsområdet. Sveve over en widget fremhever elementet med en blå rute. Ved å klikke på elementet vil trekkspillmenyen i inspektørområdet utvides for å vise innstillinger som er spesifikke for det elementet.
Det er fire ekstra knapper som lar deg laste ned temaet ditt, importere eller oppgradere et tidligere opprettet tema, dele temaet ditt med andre og en hjelpeknapp.
14. Lage et tema for Notekeeper
Nå som vi er kjent med ThemeRoller-grensesnittet, hva med å fortsette og lage vårt første tema? I stedet for å bygge en abstrakt, la oss lage en som vi faktisk vil bruke til Notekeeper-appen vi bygde tidligere. La oss starte ganske enkelt med å endre et av de eksisterende temaene som leveres med jQuery Mobile. Teamet var snill nok til å la brukerne importere standardtemaene som utgangspunkt for nye temaer, så det er der vi går først. Klikk på Importer-knappen øverst til venstre i vinduet, så får du en rute som lar deg lime inn innholdet i et eksisterende tema:
Importer standardtemaet ved å klikke på lenken øverst til høyre, med tittelen Importer standardtema. Når tekstområdet er fylt med CSS, klikker du på Importer. Forhåndsvisningsområdet vil laste om og vise fargeprøver fra A til E.
Vi vil fokusere vår innsats på å endre opp den hvite fargeprøven, D, da den er nærmest hva vårt endelige mål er. Siden vi heller vil bruke fargeprøve A som navnet, la oss slette de andre fargeprøvene slik at bare D er igjen. Husk at ThemeRoller omdøper fargeprøver når andre slettes. Det betyr at når du sletter fargeprøve A, blir B A, C blir D, og ​​så videre.
Fortsett til fargeprøven som var D nå er i A-posisjon. Til slutt, slett fargeprøve B (som tidligere var fargeprøve E) slik at alt vi har igjen er fargeprøve A:
Denne fargeprøven ser fin ut, men den er litt kjedelig. La oss injisere litt farge ved å endre toppteksten til en fin grønn. Den enkleste måten å bestemme hvilke verdier som skal endres for ethvert element er å bruke inspektøren. Bytt inspektøren til På øverst, og klikk deretter hvor som helst i overskriften til tema A. Du vet om du fikk det riktig hvis A-fanen er valgt til venstre, og panelet Topptekst / bunntekst utvides:
Du kan endre fargen på en av få måter. Du kan dra en fargebrikke fra toppen direkte på bakgrunnen. Du kan også dra en fargebrikke til et inndatafelt. Til slutt kan du legge inn verdien manuelt. Legg merke til at når du klikker inn i et felt som inneholder en fargeverdi, får du en glatt fargevelger. Fortsett og endre verdiene i inndatafeltene i dette panelet til verdiene vist i forrige skjermbilde.
Ser bra ut, men nå kolliderer det blå fra temaets aktive tilstand med det grønne. Ved hjelp av inspektørverktøyet klikker du en gang på På-delen av av / på-veksellinjen. Dette bør føre til at Active State-panelet i Global-fanen utvides. Vi endrer det blå til en varm varm grå. Det globale panelet skal nå se ut som følgende skjermbilde:
Det er bare én ting som hindrer det nye temaet i å se det hotteste ut, den blå tekstlenken i avsnittet øverst. Gå tilbake til vår pålitelige inspektør, la oss klikke direkte på lenken som utvider Content Body-panelet i A-fanen. Nå, for de som allerede er kjent med CSS, vet du at du ikke bare kan endre koblingsfargen uten å endre hover også, besøkt: hover og aktive tilstander. Problemet er at det ikke er noen alternativer for å gjøre disse endringene, men ThemeRoller har du dekket. Klikk på + til høyre for inntastingsfeltet Link Color for å vise resten av alternativene, og endre deretter fargene, som vist på følgende skjermbilde:
Og det er det. Gjør gjerne flere endringer i temaet ditt når du utforsker inspektørområdet. Endre hva du vil, det er bare bits og bytes akkurat nå. Vær imidlertid oppmerksom på at det ikke er noe angringsalternativ den gangen. Hvis du virkelig liker noe, bør du vurdere å skrive ned verdiene slik at du ikke mister dem eller eksporterer det slik det er. Apropos...
15. Eksportere temaet ditt
Før vi faktisk eksporterer temaet vårt, er det en ting som må bemerkes. Husker du sprutsiden med den "nyttige" informasjonen? Det viser seg at det er ett stykke som ikke er en anbefaling, men et krav.
Vi anbefaler å bygge temaer med minst tre fargeprøver (AC).
For at temaet vårt skal gjelde for Notekeeper-appen vår riktig, må vi kopiere vår enkeltprøve (bokstav A) til fargeprøver B og C. Heldigvis er dette en enkel ting å gjøre. Velg A-fanen øverst på inspektøren, og klikk deretter på + -fanen to ganger. Det du bør se er tre identiske fargeprøver, og nå er vi ferdige.
Nå som vi er ferdige med temaet, skal vi eksportere det til bruk i Notekeeper-applikasjonen. Dette er en grei prosess som begynner med å klikke på Last ned tema-knappen midt på siden, øverst i grensesnittet. Du får en rute som lar deg navngi temaet, litt informasjon om hvordan du bruker temaet og en knapp merket Last ned zip. Etter å ha navngitt temaet Notekeeper, klikker du på Last ned Zip-knappen og du får en smakfull liten bit i nedlastingsmappen.
Pakk ut innholdet i ZIP-filen, og du ser følgende katalogstruktur:
- index.html
- temaer / Notekeeper.css (Den ukomprimerte versjonen av temaet ditt) Notekeeper.min.css (Den komprimerte versjonen. Bruk dette i produksjonen) images / ajax-loader.gif icons-18-black.png icons-18-white.png icons -36-black.png ikoner-36-white.png
HTML-filen øverst på treet inneholder informasjon om hvordan du implementerer temaet ditt, samt noen få widgets for å bekrefte at temaet fungerer. Alle koblingene er relative i eksempelfilen, så du bør kunne dra den inn i et hvilket som helst nettleservindu og se resultatene.
Noen notater om nedlasting og implementering av temaer:
1. jQuery-teamet gir deg ikonene for knapper i denne ZIP-filen av en grunn. Temaet krever at bildene skal være i forhold til CSS-filen. Dette betyr at med mindre du allerede bruker standardtemaene, må du også inkludere bildemappen når du laster opp temaet ditt til nettstedet ditt, ellers vises ikke ikonene.
2. Hold deg til den ukomprimerte versjonen av temaet ditt. Selv om du ikke vil bruke den i produksjon på grunn av størrelsen, trenger du den hvis du noen gang vil redigere den i ThemeRoller. ThemeRoller kan ikke, i skrivende stund, importere den minimerte CSS-filen.
Andy Matthews har vært applikasjonsutvikler i over 16 år og har ferdigheter innen UI / UX, grafisk design og programmering. Han er foredragsholder, åpen kildekodeutvikler, og han bor i Nashville, TN med familien. Han er @commadelimited på Twitter.
Raymond Camden er senior utviklerevangelist for Adobe. Hans arbeid fokuserer på nettstandarder, mobilutvikling og ColdFusion. Han er publisert forfatter og presenterer på konferanser og brukergrupper om en rekke emner. Følg ham på @cfjedimaster.
