Mobile App Design / Dev Building Navigation med jQuery

Smartphones är nu utrustade med några väldigt effektiva webbläsare. JavaScript är kraftfullare än någonsin tidigare, och kan utökas med hjälp av kodbibliotek som jQuery. När du lägger till i de senaste HTML5 / CSS3-specifikationerna är det möjligt att bygga väldigt snygga mobila webapps med någon grundläggande frontendkod.

I denna handledning visar jag hur du kan bygga en mobilbaserad webbplats / webapp. Vi använder CSS3-mediafrågor för att rikta in specifika enheter och skärmupplösningar. Plus lite jQuery hjälper till att animera menyn och ladda externt sidinnehåll med Ajax-samtal. Ännu bättre kan layouten till och med expandera för att visas korrekt i vanliga skrivbordsfönstrar som Chrome eller Firefox.

Live-demo
Källkod

Definiera sidstrukturen

Låt oss börja med att gå över HTML-sidan först och stila den med några CSS-regler. Jag hoppar över de flesta av de ovanliga metataggarna i rubriken eftersom de inte direkt påverkar webben. Men det finns några som jag borde nämna, nämligen från biten nedan:

X-UA-kompatibel används för att beskriva hur ditt dokument ska göra i vissa webbläsare. Det är ett intressant scenario när man kodar i HTML5, så jag skulle inte oroa mig för mycket om detta. Men meta visningsområde tagg är mycket viktigt. Den ställer fönstret för mobilt webbläsare till 100% istället för den standardzoomade effekten.

Det är också möjligt att inaktivera användarzoom med innehållsvärdet användar skalbar = nej. Men i det här fallet vill vi bara ställa in hela skärmens bredd för att vara densamma som vår enhetens bredd. Apples webbapps-taggar låter webbplatsen sparas som en startsida-ikon till din iPhone eller iPod Touch. Inte helt nödvändigt men absolut värt att ha.

Inre kroppsinnehåll

Inom kroppen tagg har jag setup en wrapper div med ID #W. Insidan har jag brutit layouten i två andra divs med ID #pagebody och #navmenu. Hela sidbredden är begränsad till 640px efter eget val så att layouten vågar till ett strikt tal.

   HK Mobile
 
  Välkommen till Mobilsidan!
 
 
   Meny Länkar
 
  Hem
 Om oss
 Annonsera
 Skriv för oss
 Kontakter
 Integritetspolicy

Navigationsmenyn har ett lägre z-indexvärde så att #pagebody är alltid på topp. Detta är avgörande eftersom JavaScript-koden kommer att glida över sidkroppen ett visst antal pixlar för att avslöja navigeringen nedan.

Jag har använt en hash-symbol (#) framför varje .html-sida för att stoppa lite dåligt beteende i Mobile Safari. När du vill klicka på en länk visas URL-fältet och trycker ner innehållet. Men när man hänvisar till ett ID laddas ingenting om annat än genom JavaScript-samtal.

CSS-positionering

Det finns inte mycket förvirrande innehåll i vår CSS-kod. Det mesta av positioneringen görs manuellt och manipuleras sedan genom jQuery. Men det finns några intressanta bitar i vårt dokument.

/ ** @group kärnkropp ** / #w #pagebody position: relative; vänster: 0; max bredd: 640px; min bredd: 320px; z-index: 99999;  #w #navmenu bakgrund: # 475566; höjd: 100%; display: block; position: fast; bredd: 300px; vänster: 0px; topp: 0px; z-index: 0;

Det här toppsegmentet definierar stilar för båda sidorna på sidan. Vår navmeny är bara 300px bred, så det lämnar lite utrymme för att sidinnehållet fortfarande ses. Öppna / stänga menyknappen finns också direkt på vänster sida och alltid tillgänglig. Det viktiga biten här är z-indexvärdet och använder position: fast; på vår navmenu.

Den översta delen av verktygsfältet är också en intressant del. Detta är inställt på ett fast läge så det bläddrar med sidinnehållet. Detta replikerar en liknande effekt som du skulle hitta i någon iOS-apprubrik.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; position: fast; vänster: 0px; topp: 0px; z-index: 9999; bakgrund: # 0b1851 url ('img / tabbar-solid-bg.png') övre vänster ingen upprepning; gränsstråle: 5px; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px; -gräns-radie: 5px; gränsbotten-högra radie: 0; -moz-gräns-radie-bottomright: 0; -webkit-border-bottom-right-radius: 0; gränsen längst ner till vänster: 0; -moz-gränsen-radie-bottenled: 0; -webkit-border-bottom-left-radius: 0; höjd: 44px; bredd: 100%; max bredd: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; padding-top: 10px; padding-right: 40px; färg: # e6e8f2; font-weight: bold; typsnittstorlek: 2.1em; textskugga: 1px 1px 0px # 313131;

Mobila regler

Det är lätt att lägga märke till att jag också använder en bakgrundsbild för den blå rubrikens textur. Detta är dimensionerat vid 640 × 44 pixlar för att hålla med den konsekventa layoutstrukturen. Men jag har också utvecklat en bild @ 2x för iPhone / iPad retina-skärmar. Du kan se båda bilderna nedan eller ta dem från min demokällkod.

System/demo/img/[email protected]
System/demo/img/[email protected]

Jag installerar mobil CSS för denna funktionalitet i en annan fil med namnet responsive.css. Den innehåller två mediefrågor som ersätter titelfältet bg och menyknappsymbolen för näthinnanordningar.

/ ** näthinneskärm ** / @media bara skärm och (-webkit-min-enhet-pixel-förhållande: 2), endast skärm och (min-moz-enhet-pixel-förhållande: 1,5), endast skärm och ( min-enhet-pixel-förhållande: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') övre vänster ingen upprepning; bakgrundsstorlek: 640px 44px;  #w #pagebody header # menu-btn bakgrund: url ('img/[email protected] ') no-repeat; bakgrundsstorlek: 53px 30px;

Designa menypilar

I navigeringsområdet har jag också tagit med en liten pilikon över till höger om varje menykoppling. Det här kan enkelt ersättas med en bild från något kreativt commons-konstverk. Men för det mesta kommer alla CSS3 aficionados att älska att testa den här metoden.

#w #navnetu ul li a: efter innehåll: "; display: block; bredd: 6px; höjd: 6px; gränsen-höger: 3px solid # d0d0d8; gränstopp: 3px solid # d0d0d8; position: absolut; : 30px; topp: 45%; -webkit-transform: rotera (45deg); -moz-transform: rotera (45deg); -o-transform: rotera (45deg); transformera: rotera (45deg); #w #navmenu ul li a: svävar :: efter border-color: # cad0e6;

Vi använder omvandla egendom för att skapa en liten gräns efter innehållet. Jag installerar också position: absolut; så vi kan fritt flytta dessa gränser runt det inre länkobjektet. Det är super lätt att byta gränsvärg på ett svävarläge, vilket ger en mer dynamisk känsla. Det är ganska otroligt vad du kan uppnå bara genom att använda grundläggande HTML5 och CSS3 regler.

Men nu ska vi flytta in i bitar och bitar av JavaScript-kod. Kom ihåg detta kräver att en inkluderas i jQuery-biblioteket för att min kod ska köras korrekt.

jQuery Animerad

Genom att skriva dessa anpassade koder har jag skapat ett helt nytt dokument som heter script.js. Skriv gärna dessa direkt i > taggar eller ladda ner mitt exempel från demokällkoden.

 $ (dokument) .ready (funktion ) var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ #content "); var viewport = bredd: $ (fönster). bredd (), höjd: $ (fönster) .höjd (); // hämta variabler som // viewport.width / viewport.height 
 Till att börja med har jag satt upp några sidvariabler där vi kan referera till element i dokumentet mycket snabbare. Visningsvärdet används aldrig, men det kan vara användbart om du vill justera animeringsstegen. Du kan till exempel kontrollera den aktuella webbläsarens bredd och öppna din meny mindre eller bredare i enlighet därmed.
 Funktionen openme () $ function ) topbar.animate left: "290px", duration: 300, kö: false); pagebody.animate (vänster: "290px", duration: 300 , kö: false););  funktionskåpa () var closeme = $ (funktion () topbar.animate (vänster: "0px", varaktighet: 180, kö: falskt); pagebody.animate (vänster: "0px", varaktighet: 180, kö: false);); 
 Nästa har jag definierat två viktiga funktioner för att öppna och stänga menyn. Dessa kunde ha gjorts i en enda funktion och återuppringningsväxling - förutom att vi faktiskt behöver animera två olika element samtidigt. Tyvärr är detta inte standardbeteendet för jQuery, så vi måste tillgripa en alternativ syntax.
 De två elementen vi riktar in är namngivna topbar och pagebody. Det inre innehållsområdet med en vit bakgrund är den fullständiga sidokroppen; men vi har titelförrådspositionen fixerad till toppen av sidan. Det betyder att det inte kommer att naturligt animera med sidan och vi behöver använda ett separat samtal. Öppningen är inställd för att trycka 290px kvar (nästan hela 300px navbredden) och stängningsfunktionen drar tillbaka den.
 Laddar dynamiskt innehåll
 Koden ovan är lätt nog för att ta hand om animationen. Och teoretiskt sett är det allt du behöver för en så enkel mobilwebbplats - men jag vill lägga till en liten bit mer.
 Varje gång användaren klickar på en menylänk vill vi stänga den aktuella navigeringen och visa en laddningsgenom medan vi letar efter sidinnehållet. När vi är färdiga tar vi bort gifbilden och laddar allt innanför. Det här är fantastiskt eftersom vi även kan använda statiska .html-sidor för innehållet. Ingen PHP eller Ruby eller Perl eller några backend språk för att göra saker rörigt.
 Hantera klick
 Först vill vi testa när våra användare klickar på navigeringsknapparna. Detta kommer att stoppa det normala href-värdet från laddning och vi kan istället använda våra egna funktioner för att visa externt innehåll.
 // laddar sidinnehåll för navigeringen $ ("a.navlink"). live ("klicka", funktion (e) e.preventDefault (); var linkurl = $ (detta) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 
 Nu öppnar vi en väljare för alla ankar med klassen navlink. När en användare klickar på en av dessa länkar stoppar vi det från att ladda och konfigurera en variabel för hela webbadressen. Jag har också konfigurerat en variabel för innehållet HTML för att inkludera en standard image loader. Om du vill anpassa din egen rekommenderar jag starkt Ajaxload.
 Ajax .load ()
 Det finns två olika delar till denna effekt som jag har snyggt brutit upp. Koden nedan är vår första bit som stänger navigeringsmenyn och glider det totala dokumentfönstret helt upp till toppen. Vi vill ersätta det inre kroppsinnehållet med en liten laddareanimering, och användarna kan inte se detta om de tittade längst ner på sidan.
 closeme (); $ (funktion () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Nu vill vi äntligen byta ut det inre kroppsinnehållet med vår bild och hämta den externa sidan som ska laddas. Normalt tar det bara ett par hundra millisekunder eller ännu snabbare, så jag har ställt in en timeout-funktion.
 content.html (imgloader); setTimeout (funktion () content.load (linkhtmlurl, function () / * no callback * /), 1200);
 Detta pausar 1200 millisekunder innan du laddar nytt innehåll. För min demo ser det mycket bättre ut och ger dig en uppfattning om hur applikationen skulle fungera på långsammare internetanslutningar.
 
 Slutsats
 Jag uppmuntrar alla webbutvecklare att ladda ner källkoden för handledning och spela om sig själv. Detta är ett exempel på vad som kan utföras med HTML / CSS3 och en touch av JavaScript-effekter. Att bygga för mobila skärmar är enklare än någonsin med mediefrågor och fler extensibla webbläsare.
 Se om du kan tillämpa någon av denna kod i dina framtida webbprojekt. Att bygga mobila applikationer är en konst, ungefär som webbdesign, och kräver mycket engagemang och övning. Jag hoppas att denna handledning kan vara en bra utgångspunkt för några få entusiastiska utvecklare. Om du har frågor eller tankar om koden, är du välkommen att dela med oss i diskussionsområdet.