Apple är ett mycket populärt varumärke i den nya tekniska åldern där vi lever. Både designers och utvecklare är överens om att Apples produkter visar utsökt talang och passion för sina färdigheter. Med tiden har användargränssnittet tagit en tur uppåt och är nu ett av de hetaste ämnena bland webbdesigners.
Nedan följer jag hur man bygger en liten Apple-formad inmatningsblankett med viss grundläggande struktur och skript. All kod som ingår är baserad på XHTML Transitional Doctype tillsammans med nyare CSS2 / CSS3 tekniker. Vi använder också biblioteket jQuery 1.4.1 för att stödja våra visningsetikelfunktioner.
Testa
Här är en snygg topp av vad vi ska bygga. Kolla in demosidan för att se den live och ladda ner exemplet för en närmare titt.
Live Demo - Hämta
Bygga vår HTML och CSS
Innan vi kan börja utveckla är det viktigt att få frontendkodstrukturen i ordning. Lyckligtvis är denna process mycket enkel och borde inte ta lång tid alls att slutföra. Nedan har jag tagit bort en avskriven kopia av HTML-koden från vårt exempel? Index.html? dokumentera. Det här borde vara standardkod för att visa en mycket grundläggande inmatningsform, inget annat än någon grundläggande HTML-utvecklarens kunskap.
Här har jag ställt upp 2 mycket viktiga inmatningselement under ID: erna? Unameblock? och? pwblock ?. Dessa står för användarnamn block och lösenord block, respektive, och kommer att vara mycket viktigt senare i vårt manus. Nu när vår kod ser bra ut skulle det vara klokt att hoppa in i CSS-stilar.
Det här är de riktiga reglerna för rakt benstrukturer, eftersom CSS är det som ger alla HTML-element i sin form. Det finns inte många förändringar som vi kommer att inkludera. Några grundläggande återställningar för globala variabler tillsammans med justering och positionering för inmatningsfält. Nedan finns klipp från källkoden, förklarad i bitintervaller.
Här har vi vår globala återställning med asterisk (*) väljaren tar bort alla webbläsarmarginaler och vadderingar. Vi ger också några stilar till kroppsdelen för att placera vår formfront och centrum. #C-divisionen är vår container div som har blivit centrerad för vår demo skull.
Det första märkbara blocket används för att ställa in våra inmatningsfält. Det riktar sig till alla inmatningselement med en klass av? U1? som både våra användarnamn och lösenord fält kör. I stället för att placera 10-20 stildeklarationer på en enda rad är det mycket lättare att redigera för att hålla detta på blocknivå.
Här har vi stilar för att konfigurera hur våra inmatningsfält kommer att se ut. Padding, font-size, bland många gränser och text manipulering egenskaper också. Vi använder många nya CSS3-tekniker här, vilket borde vara uppenbart för alla CSS-utvecklare.
Nya CSS3-enheter
Två helt nya CSS3-funktioner vi använder är -webkit-gradient och -moz-linjär-gradient som kan generera gradienter on-the-fly. Detta är en fantastisk funktion som inte har diskuterats i många CSS3-artiklar. Detta tar bort behovet av några bilder när man skapar standarder som uppfyller bakgrundsgradienter.
Vi har också -webkit-box-shadow och -moz-box-shadow. Liknande namngivningssystem hjälper till att förvirra Webkit-webbläsare och Mozilla-baserade Gecko-webbläsare.
Längre ner har vi 3 fler stilar som attackerar vår inlämningsknapp tillsammans med stater för våra inlämningsformer. De :fokus pseudo-targeting means CSS kommer endast att tillämpa våra stilar när användaren är inriktad på antingen inmatningsfält. Dessa stilar kommer att visa en blå glöd för fokus och röd glöd för fel (mycket användbart när felsökning användarinloggningar och registreringsformulär).
Hittills ser allt bra ut! Faktum är att allt vi behöver göra är att inkludera några skript / stilar i vår rubrikavsnitt för att verkligen komma igång med våra dynamiska effekter. Om du tar det aktuella dokumentet och inkluderar vårt stylesheet kan vi få effekterna direkt.
Arbeta med jQuery-effekter
jQuery är ett fantastiskt JavaScript-bibliotek som har visat sig användbart gång på gång. Din genomsnittliga webbutvecklare är starkt inriktad på hastighet och precision i skript. Detta är något som jQuery tar in och internaliserar med sina idéer.
Nedan är en liten sektion som måste läggas mellan huvud taggar av ditt dokument. Jag ska förklara några av dessa nedan och komma in i några av bakom kulisserna.
Vår style.css är filen som innehåller alla våra CSS-regler som anges ovan. En annan inkludering är tip-yellowsimple.css som ännu inte nämnts. Det är ett skript som skrivs genom jQuery som ett plug-in för verktygstipshovers.Med det här stilarkivet (ladda ner med demokälla) kan vi ställa in verktygstips på alla åtgärder.
Våra två JavaScript-filer är verkligen grundläggande och självförklarande. Vi har tillgång till jQuery 1.4.1 min så att det går ner till bearbetnings- och nedladdningshastigheter. Vi läser också igenom Googles API-koddatabas som lagrar alla tidigare och aktiva versioner av populära skript. Det här är en enorm insats och hjälper utvecklingsprojekt att stiga framåt utan att man behöver hämta jQuery-biblioteket manuellt manuellt.
Den andra filen vi har? Jquery.poshytip.js? innehåller vår plugin-kod. Poshytip är en jQuery-klass skriven av Vasil Dinkov för att stödja dynamiska verktygstips. Koden är stor och onödig att lära sig i detalj. Men om du är en jQuery-nörd kan du kolla in hans manuella ansträngningar för att se hur dessa metoder heter och vilka variabler du kan redigera.
Grundläggande handlingssamtal
Allt vi behöver nu är vår ökända ansträngning! Detta är vår huvuduppgift som laddar på dokumentbelastning och förbereder oss för att starta på vilken signal som helst som vi ringer. I det här fallet letar vi efter en händelse som händer när en användare fokuserar på ett av inmatningsfälten.
Ett sista steg är att lägga till den här koden i huvudet under hela vår fil ingår. Detta är rak JavaScript-kod så att den ska inkapslas med a manus märka. För att underlätta har jag tagit bort taggarna i koden nedan så vi kan fokusera på bara js-funktionaliteten.
Så vad vi gör kallar en generisk funktion () {} att kolla på några händelser. Vi skapar 2 nya instanser av poshytip () metod baserad på våra inlämningsformer. Detta kan ses när vi analyserar DOM för element-ID-er? Unameblock? och? pwblock ?.
Var och en av de individuella inställningarna på plats expanderar på funktionaliteten för poshytip. Om du vill se dokumentation för alla metoder finns en bra samling som Vasil har lagt på nätet. Nämligen showOn är vår viktigaste variabel som berättar för parsningsmotorn att kontrollera vilken fokusaktivitet som finns i dessa två element.
AlignX och AlignY är viktiga när det gäller placering. Dessa innehåller värdena för var vårt verktygstips kommer att visas på sidan. Detta kan vara botten, mitt, toppen, tillsammans med förskjutna placeringar som inner-vänster och inner-höger. Försök röra med dessa om du hellre vill ha verktygetips uppe på sidan eller botten istället för toppen.
Det du kanske inte har lagt märke till nu är var vår text laddas från. Poshytips gör det enkelt också här, där värdet av vårt titel Attributet visas i verktygstipstexten. Detta gör att vissa specifika element är mycket enkla och väldigt produktiva!
Slutsats
Dessa är några av de mest grundläggande stegen mot att bygga ett inmatningsfält i Apple-stil. Det finns många andra unika effekter som kan tillämpas med jQuery som sträcker sig utanför omfattningen på denna handledning. Kolla in några demos från Apples webbplats för mer inspiration. Också om du vill ladda ner hela demopaketet kan du göra det här.