Mobile App Design / Dev Custom Themes met jQuery Mobile

In onze eerdere jQuery Mobile-tutorial had ik een groot deel van het onderliggende framework geïntroduceerd en uitgelegd hoe je je eerste website kunt opzetten. De JS-bibliotheek is zowel lichtgewicht als gemakkelijk op te pikken met betrekking tot leermoeilijkheden. Er is ook een generieke CSS-stylesheet bij de bestanden inbegrepen, zodat u de elementen in uw lay-out verder kunt aanpassen.

Voor dit tweede segment zou ik graag een beetje tijd besteden aan het dieper ingaan op dit idee van jQuery Mobile-thema's. De gehele ontwerpindustrie is revolutionair veranderd door jQM en het proces van het volledig opnieuw bouwen van een mobiele sjabloon is aanzienlijk verbeterd. jQuery Mobile is niet alleen een scriptingbibliotheek, maar een volledig grondraamwerk om op voort te bouwen en efficiënte mobiele sjablonen te maken.

Standaard stylesheetinhoud

Ik zou om te beginnen moeten verduidelijken wat voor soort CSS-code is opgenomen in de standaardbestanden. Het stylesheet van jQM 1.0 is opgesplitst in twee hoofdsegmenten - structuur en thema's.

De structuurcode is het spul dat je meestal kunt negeren. Dit wordt gebruikt om marges, opvulling, hoogte / breedte, lettertype-varianten in te stellen, samen met vele andere standaardinstellingen van de browser. De interne thema's worden vervolgens opgesplitst in A-E, die elk verschillende visuele effecten in uw ontwerp bepalen. Dit kunnen achtergrondkleuren, verlopen, slagschaduwen, enzovoort zijn.

Elk van deze innerlijke thema-elementen kan ook worden aangeduid als stalen. Wanneer u een mobiele sjabloon maakt, houdt u over het algemeen vast aan één thema. Maar in bijna elk scenario kan het ontwerp worden verbeterd met verschillende kleurenschema's. Het standaard stylesheet bevat alleen stalen A-E, maar u kunt stalen F-Z samenstellen om nog 21 andere alternatieven toe te voegen aan uw themabibliotheek. Gewoon om deze voorwaarden nogmaals te verduidelijken thema wordt beschouwd als 1 enkel CSS-bestand dat tot 26 verschillende kan bevatten stalen met het label A-Z.

Schakelen tussen stijlen

Als u niet opgeeft om stalen in te stellen, blijft jQuery Mobile standaard bij monster A hangen. Als u niet al wist dat de jQuery Mobile-documenten HTML5-gegevensattributen gebruiken voor veel interne functies. Een daarvan is het wijzigen van stalen via het kenmerk data-theme. Bekijk mijn codevoorbeeld hieronder om te zien wat ik bedoel.

  Standaard jQM-pagina
 
  Hier is wat interne inhoud.

Merk op dat ik het attribuut data-theme heb geplaatst op de rootpaginad. Dit betekent dat de nieuwe kleur van het staal alles zal beïnvloeden waarbinnen zowel de koptekst als inhoudsgebieden zijn opgenomen. Ik zou dit ook kunnen toevoegen data-theme = "c" in de header div om alleen die inhoud van de rest van mijn pagina te veranderen.

Onderdelen van een staal

Het moet redelijk eenvoudig zijn om deze verschillende stalen in één lay-out te implementeren. Laten we nu eens kijken naar de jQM CSS-code, zodat we afzonderlijke componenten van een staal kunnen splitsen. Bekijk het nieuwste CSS1-bestand voor jQuery Mobile 1.4.5 dat op hun eigen CDN wordt gehost.

U moet opmerken hoe elk staal wordt gescheiden door een afzonderlijke opmerking en elk van de interne klassen eindigt met de juiste letters. Bijvoorbeeld .ui-bar-a en .ui-body-a worden standaard toegepast in de kop- / voettekstbalken en contentgebieden. De meeste eigenschappen implementeren een reset op lettertype en koppelingskleuren, achtergrondgradiënten en andere kleine details. Ik omvatte eenvoudig het ui-bar-a codes om u een idee te geven van welke elementen we targeten.

/* EEN ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; achtergrond: # 111111; kleur: #ffffff; lettertype: vet; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, van (# 3c3c3c), tot (# 111)); / * Saf4 +, Chrome * / achtergrondafbeelding: -webkit-lineaire gradiënt (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / achtergrondafbeelding: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / achtergrondafbeelding: -ms-lineaire gradiënt (# 3c3c3c, # 111); / * IE10 * / achtergrondafbeelding: -o-lineaire gradiënt (# 3c3c3c, # 111); / * Opera 11.10+ * / achtergrondafbeelding: lineaire gradiënt (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button font-family: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; lettertype: vet;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: active color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: bezocht color: # 2489CE / * a-bar-link-visited * /;

Als u alleen op zoek bent naar een aangepast staal, raad ik aan de sjabloon van een van de originelen te baseren. Het proces gaat een stuk soepeler als u begint met het schrijven van codes in een nieuw CSS-document. U zult niet het gedoe hebben met bewerken in het originele bestand en u kunt beginnen met werken aan een schone lei. Maar de belangrijkste gebieden waarop u zich wilt concentreren, zijn onder meer:

kop- en voettekststaven
inhoud van het lichaam & paginatekst
lijst stijlen
knopstatussen standaard / zweven / actief
vorm invoerbesturing (extra)

Codering van een nieuw staafdesign

Van hetzelfde CSS-bestand dat we eerder hebben gekeken kopieer / plak alle staal A-code (regels 12-150) in een nieuw bestand. We kunnen de staalnaam G gebruiken om deze nieuwe stijlen te implementeren. Nu na het kopiëren van de code waarvan u de naam wilt geven aan elke eindinstantie -een naar -g, omdat dit is hoe jQuery Mobile herkent welke stijlen moeten worden gebruikt.

Ik zou willen beginnen met het opnieuw ontwerpen van de header bar bg om een vertrouwde iOS-gradiënt na te bootsen. Dit kan alleen binnen de .ui-bar-g selector. We willen de eigenschappen van de achtergrond en de achtergrondafbeelding bewerken om de verloopeffecten te wijzigen. Bekijk hieronder mijn code en een demoscherm van het nieuwe verloop.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; border-left: 0px; border-right: 0px; achtergrond: # 6d83a1; kleur: #fff / * a-bar-kleur * /; lettertype: vet; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; achtergrondafbeelding: -webkit-verloop (lineair, 0% 0%, 0% 100%, van (# b4bfce), kleurstop (0,5, # 899cb3), kleurstop (0,505, # 7e94b0), tot (# 6d83a1)); achtergrondafbeelding: -webkit-lineaire gradiënt (boven, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / achtergrondafbeelding: -moz-linear-gradient (boven, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / achtergrondafbeelding: -ms-lineaire gradiënt (boven, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / achtergrondafbeelding: -o-lineaire gradiënt (boven, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / achtergrondafbeelding: lineair verloop (boven, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Ik gebruik het blauwe kleurenschema in de meeste standaard iOS-applicaties. Mijn achtergrond is in eerste instantie ingesteld op een effen kleur voor apparaten die geen CSS3-gradiënten kunnen renderen. Daarna gebruik ik kleurstops rond de 50% markering om het traditionele glanzende effect van de Apple-stijl na te bootsen. Ook binnen dezelfde selector heb ik de tekstschaduw enigszins aangepast met een meer subtiele kleur en bereik.

Knoppen en teksteffecten

Het is belangrijk om bij het coderen van stalen te overwegen welke delen van de interface aandacht nodig hebben. De kopbalk ziet er geweldig uit met deze nieuwe achtergrond, maar een laatste wijziging die ik wil maken, komt overeen met de knopstijlen die dichter bij die van iOS-apps liggen.

.ui-btn-up-g border: 1px solid # 375073; achtergrond: # 4a6c9b; lettertype: vet; kleur: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; vakschaduw: geen; -webkit-box-shadow: geen; -moz-box-shadow: geen; achtergrondafbeelding: -webkit-verloop (lineair, 0% 0%, 0% 100%, van (# 89a0be), kleurstop (0,5, # 5877a2), kleurstop (0,505, # 476999), tot (# 4a6c9b)); achtergrondafbeelding: -webkit-lineair-gradiënt (boven, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / achtergrondafbeelding: -moz-linear-gradient (boven, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / achtergrondafbeelding: -ms-lineaire gradiënt (boven, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / achtergrondafbeelding: -o-lineaire gradiënt (boven, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / achtergrondafbeelding: lineair verloop (boven, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); grensradius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; achtergrond: # 2463de; lettertype: vet; kleur: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; vakschaduw: geen; -webkit-box-shadow: geen; -moz-box-shadow: geen; achtergrondafbeelding: -webkit-verloop (lineair, 0% 0%, 0% 100%, van (# 779be9), kleurstop (0,5, # 376fe0), kleurstop (0,505, # 2260dd), tot (# 2463de)); achtergrondafbeelding: -webkit-lineair verloop (bovenaan, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / achtergrondafbeelding: -moz-linear-gradient (bovenaan, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / achtergrondafbeelding: -ms-lineaire gradiënt (boven, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / achtergrondafbeelding: -o-lineaire gradiënt (boven, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / achtergrondafbeelding: lineair verloop (boven, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); grensradius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Het codegebied dat we nu bewerken, bevindt zich binnen de UI-knopklassen. Er zijn 3 verschillende modi om u bezig te houden: .-Ui btn-up-g, .-Ui btn-hang-g, en .-Ui btn-down-g. Ik concentreer me voornamelijk op de standaard (btn-up) en hover (btn-hover) effecten door de doosschaduw en lineaire gradiënten te bewerken. Ook heb ik het effect met afgeronde hoeken uitgebreid, zodat de knoppen meer rechthoekig lijken.

Daarom moest ik de binnenste grensradius verwijderen van een klasse met de titel .-Ui btn-binnen. Deze klasse wordt gekoppeld aan een spanelement binnen elke ankerverbinding in uw kopbal. Zonder de randradiuseigenschappen opnieuw in te stellen, merkt u kleine foutjes in het ontwerp wanneer u de muisaanwijzer over een knop beweegt. Naarmate u meer tijd besteedt aan het coderen in jQuery Mobile-thema's, onthoudt u deze kleine nuances voor toekomstige projecten.

Introductie tot ThemeRoller

Als je het leuk vindt om je handen vies te maken in code, raad ik je ten zeerste aan om aangepaste bewerkingen uit te voeren. U hebt niet alleen meer controle, maar het is ook eenvoudiger om fouten in de CSS te debuggen als u alle bewerkingen zelf hebt uitgevoerd. Maar voor veel ontwerpers is dit proces vermoeiend en duurt het gewoon langer dan nodig. Gelukkig heeft het jQuery Mobile-team een online editor uitgebracht onder de naam ThemeRoller.

Vanaf deze pagina hebt u toegang om de eerste 3 A-C-stalen te bewerken of zelfs een van uw eigen stalen te maken. Als u in de linkerzijbalk kijkt, kunt u schakelen tussen deze 3 instellingen of snel wijzigingen aanbrengen in de algemene thema-opties. Deze omvatten CSS-eigenschappen zoals grensstralen, doosschaduwen of standaardpaginadooptypen. Merk op dat je een van de vooraf ingestelde stalen selecteert, zodat we alleen dezelfde gebieden als voorheen kunnen bewerken - bovenste / onderste balken, inhoud van het lichaam en de status van 3 knoppen.

Maar mijn favoriete functie moet de directe toegang tot de Adobe Kuler-stalen zijn. U kunt in uw Kuler-account zelfs een paar kleurenschema's maken en deze importeren in ThemeRoller. De interface ondersteunt slepen-en-neerzetten, dus het is heel eenvoudig om een paar verschillende ideeën in een paar minuten uit te proberen.

Uiteindelijk is er geen absolute methode om je jQM-stalen goed te maken. Sommige ontwerpers geven de voorkeur aan harde code CSS, terwijl anderen dol zijn op de intuïtieve web-app ThemeRoller. Zolang je de klassenstructuur volgt, zou je op beide manieren dezelfde resultaten moeten behalen.

Handige bronnen

jQuery Mobile Themes - Documentatie
Gebruikmaken en aanpassen van jQuery Mobile-thema's