Mobilappdesign / Dev-anpassade teman med jQuery Mobile

I vår tidigare jQuery Mobile-handledning hade jag introducerat mycket av det underliggande ramverket och hur man går till att ställa in din första hemsida. JS-biblioteket är både lättviktigt och lätt att hämta med avseende på inlärningssvårigheter. Det finns också generiskt ett CSS-stilark som ingår i filerna så att du kan anpassa elementen i din layout ytterligare.

För det här andra segmentet vill jag spendera lite tid på att fördjupa sig djupare i den här idén om jQuery Mobile-teman. Hela designindustrin har revolutionerats av jQM och processen med att bygga en mobilmall från början har förbättrats avsevärt. jQuery Mobile är inte bara ett skript bibliotek, men en hel ram ram för att bygga på och producera effektiva mobilmallar.

Standard Stylesheet Innehåll

Jag bör börja med att klargöra exakt vilken typ av CSS-kod som ingår i standardfilerna. Stilarket från jQM 1.0 har delats upp i två huvudsegment - strukturera och teman.

Strukturkoden är de saker du oftast kan ignorera. Detta används för att ställa in marginaler, vaddering, höjd / bredd, typsnittvarianter, tillsammans med många andra standardinställningar för webbläsaren. De interna teman delas sedan upp från A-E, som kontrollerar olika visuella effekter i din design. Detta kan innehålla bakgrundsfärger, gradienter, droppe skuggor, etc..

Vart och ett av dessa inre tematiska element kan också kallas färgrutor. När du bygger en mobilmall håller du i allmänhet ett enda tema. Men i nästan alla scenarier kan designen förbättras med olika färgscheman. Standardformatarket innehåller bara färgar A-E men du kan bygga färgar F-Z för att lägga till ytterligare 21 alternativ i ditt temabibliotek. Bara för att klargöra dessa villkor igen a tema anses vara en enda CSS-fil som kan innehålla upp till 26 olika färgrutor märkt A-Z.

Växlingsstilar

Om du inte väljer att ange några färgrutor kommer jQuery Mobile att hålla fast vid korrigeringsfönstret A som standard. Om du inte redan är medveten använder jQuery Mobile docs HTML5-dataattribut för många interna funktioner. En av dessa inkluderar ändring av prickar via datatematattributet. Kolla in mitt kodexempel nedan för att se vad jag menar.

  Standard jQM-sida
 
  Här är några interna innehåll.

Lägg märke till att jag placerat attributet datatemat på rotsidans div. Det betyder att den nya färgen kommer att påverka allt inuti vilket innehåller både rubriker och innehållsområden. Jag skulle dessutom kunna inkludera uppgifter-theme = "c" in i header div för att bara ändra det innehållet från resten av min sida.

Komponenter av en swatch

Det borde vara ganska enkelt hur man implementerar dessa olika färgprov inom en enda layout. Så nu ska vi ta en titt på jQM CSS-koden så att vi kan bryta ner enskilda komponenter i en kolumn. Kolla in den senaste jQuery Mobile 1.4.5 CSS-filen som finns på egen CDN.

Du bör märka hur varje prövning separeras med en distinkt kommentar och var och en av de interna klasserna slutar med lämplig bokstäver. Till exempel .ui-bar-a och .ui-kropp-a används som standard i sidhuvud / sidfält och innehållsområden. De flesta egenskaper implementerar en återställning på teckensnitt och länkfärger, bakgrundsgradienter och andra små detaljer. Jag inkluderade helt enkelt ui-bar-a koder för att ge dig en uppfattning om vilka element vi riktar in.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; bakgrund: # 111111; färg: #ffffff; font-weight: bold; textskugga: 0 / * a-bar-skugga-x * / -1px / * a-bar-skugga-y * / 1px # 000000; bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, från (# 3c3c3c) till (# 111)); / * Saf4 +, Chrome * / bakgrundsbild: -webkit-linjär gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / bakgrundsbild: -moz-linjär gradient (# 3c3c3c, # 111); / * FF3.6 * / bakgrundsbild: -ms-linjär gradient (# 3c3c3c, # 111); / * IE10 * / bakgrundsbild: -o-linjär gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / bakgrundsbild: Linjär-gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-en inmatning, .ui-bar-a välj, .ui-bar-a textarea, .ui-bar-a-knapp font-family: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-länk-arv färg: #fff;  .ui-bar-a .ui-länk färg: # 7cc4e7 / * a-bar-länk-färg * /; font-weight: bold;  .ui-bar-a .ui-länk: svävar färg: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-länk: aktiv färg: # 2489CE / * a-bar-länk-aktiv * /;  .ui-bar-a .ui-länk: besökte färg: # 2489CE / * a-bar-link-visited * /;

Om du bara vill skapa en anpassad swatch rekommenderar jag att du baserar mallen av ett av originalet. Processen kommer att gå mycket mjukare om du börjar skriva koder i ett nytt CSS-dokument. Du kommer inte ha problem med att redigera i originalfilen och du kan börja arbeta på en ren skiffer. Men de nyckelområden du vill fokusera på kommer att innehålla följande:

rubrik och sidfot
kroppsinnehåll & sidtext
lista stilar
knappen anger standard / svävar / aktiv
form inmatningskontroller (extra)

Kodning av en ny bardesign

Från samma CSS-fil såg vi på tidigare kopior / klistra in alla prövningsfiler A-kod (linjer 12-150) till en ny fil. Vi kan använda swatchnamnet G för att implementera dessa nya stilar. Nu efter att du kopierat koden vill du byta namn på varje klass förekomst som slutar -en till -g, som det här är hur jQuery Mobile kommer att känna igen vilka stilar som ska användas.

Jag vill börja med att omkonstruera huvudfältet bg för att efterlikna en mer välkänd IOS-gradient. Detta kan göras enbart inom .ui-bar-g väljare. Vi vill redigera bakgrunds- och bakgrundsegenskaperna för att ändra gradienteffekterna. Kolla in min kod nedan och en demo-skärm av den nya lutningen.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-gränsen * /; gränsen till vänster: 0px; gränsen-höger: 0px; bakgrund: # 6d83a1; färg: #fff / * a-bar-färg * /; font-weight: bold; textskugga: 0 / * a-bar-skugga-x * / -1px / * a-bar-skugga-y * / 1px / * a-bar-skuggradius * / # 3e4957; bakgrundsbild: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# b4bfce), färgstopp (0.5, # 899cb3), färgstopp (0.505, # 7e94b0) 6d83a1)); bakgrundsbild: -webkit-linjär-gradient (topp, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / bakgrundsbild: -moz-linjär-gradient (topp, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / bakgrundsbild: -ms-linjär gradient (topp, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / bakgrundsbild: -o-linjär gradient (topp, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / bakgrundsbild: Linjärgradient (topp, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Jag använder det blå färgschema som finns i de flesta vanliga iOS-programmen. Min bakgrund är ursprungligen inställd på en solid färg för enheter som inte kan göra CSS3-gradienter. Sedan nedan använder jag färgstoppar runt 50% -markören för att återskapa den traditionella Apple-stilen glansig glans effekt. Också inom samma väljare har jag något modifierat textskuggan med en mer subtil färg och räckvidd.

Knappar och texteffekter

Det är viktigt när kodning av färgprover ska övervägas specifikt vilka områden i gränssnittet behöver uppmärksamhet. Sidhuvudet ser bra ut med den här nya bakgrunden, men en sista ändring som jag skulle vilja göra kommer att matcha knappstilarna närmare den i iOS-appar.

.ui-btn-up-g border: 1px solid # 375073; bakgrund: # 4a6c9b; font-weight: bold; färg: #fff; textskugga: 0 / * a-bup-skugga-x * / -1px / * a-bup-skugga-y * / 1px / * a-bup-skugga-radien * / # 40536d; boxskugga: ingen; -webkit-box-skugga: ingen; -moz-box-skugga: ingen; bakgrundsbild: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# 89a0be), färgstopp (0.5, # 5877a2), färgstopp (0.505, # 476999) 4a6c9b)); bakgrundsbild: -webkit-linjär gradient (topp, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / bakgrundsbild: -moz-linjär-gradient (topp, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / bakgrundsbild: -ms-linjär gradient (topp, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / bakgrundsbild: -o-linjär gradient (topp, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / bakgrundsbild: linjär gradient (topp, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); gränsstråle: 4px; -webkit-gräns-radie: 4px; -moz-gränsen-radien: 4px;  .ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-ned-g .ui-btn-inre gränsstråle: 0; -webkit-gränsen-radien: 0; -moz-gränsen-radien: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; bakgrund: # 2463de; font-weight: bold; färg: #fff; textskugga: 0 / * a-bup-skugga-x * / -1px / * a-bup-skugga-y * / 1px / * a-bup-skugga-radien * / # 40536d; boxskugga: ingen; -webkit-box-skugga: ingen; -moz-box-skugga: ingen; bakgrundsbild: -webkit-gradient (linjär 0% 0%, 0% 100%, från (# 779be9), färgstopp (0.5, # 376fe0), färgstopp (0.505, # 2260dd) 2463de)); bakgrundsbild: -webkit-linjär gradient (topp, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / bakgrundsbild: -moz-linjär-gradient (topp, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / bakgrundsbild: -ms-linjär gradient (topp, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / bakgrundsbild: -o-linjär gradient (topp, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / bakgrundsbild: Linjärgradient (topp, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); gränsstråle: 4px; -webkit-gräns-radie: 4px; -moz-gränsen-radien: 4px;

Kodområdet som vi redigerar nu ligger inom UI-knappklassen. Det finns 3 olika lägen att vara angelägna om: .ui-BTN-up-g, .ui-BTN-hover-g, och .ui-BTN-down-g. Jag fokuserar mest på standard (btn-up) och hover (btn-hover) effekter genom att redigera boxskuggan och linjära gradienter. Dessutom utvidgade jag den avrundade hörnseffekten så att knapparna ser mer rektangulär ut.

På grund av detta har jag behövt ta bort den inre gränsen radie från en klass med titeln .ui-BTN-inre. Den här klassen fästs på ett spännelement inom varje ankarlänk i din rubrik. Utan att återställa gränsvärdena kommer du att märka små glitches i designen när du svävar över en knapp. När du spenderar mer tidskodning i jQuery Mobile-teman kommer du att memorera dessa lilla nyanser för framtida projekt.

Introduktion till ThemeRoller

Om du gillar att få händerna smutsiga i kod rekommenderar jag starkt att du klarar anpassade ändringar. Inte bara har du mer kontroll, men det är mycket lättare att felsöka problem inom CSS om du själv gjort alla ändringar. Men för många designers är denna process tröttsam och kommer helt enkelt att ta längre tid än nödvändigt. Lyckligtvis har jQuery Mobile-laget släppt en online-redigerare under namnet ThemeRoller.

Från den här sidan har du tillgång till att redigera de första 3 A-C-prickarna eller ens skapa en egen. Om du tittar i den vänstra sidofältet kan du växla mellan dessa 3 inställningar eller snabbt göra ändringar i de globala tematillvalen. Dessa inkluderar CSS-egenskaper, såsom gränsstrålar, boxskuggor eller standardfonter. Lägg märke till när du väljer någon av de förinställda korrigeringsfönstren som vi kan redigera endast samma områden som tidigare - topp- / bottenfält, kroppsinnehåll och 3-knappen.

Men min favoritfunktion måste vara direkt tillgång till Adobe Kuler-färgprover. Du kan faktiskt skapa några färgscheman inom ditt Kuler-konto och importera dem till ThemeRoller. Gränssnittet stöder drag-och-släppfunktion, så det är enkelt att pröva några olika idéer på några minuter.

I slutändan finns det ingen absolut metod för att bygga dina jQM-korrigeringar korrekt. Vissa designers föredrar att hårdkod CSS medan andra kommer att älska den intuitiva ThemeRoller webapp. Så länge du följer klassstrukturen så borde du få samma resultat på något sätt.

Användbara resurser

jQuery Mobile Themes - Dokumentation
Använda och anpassa jQuery Mobile-teman