Mobile App Design / Dev Building Navigation med jQuery

Smartphones er nu udstyret med nogle meget effektive webbrowsere. JavaScript er kraftigere end nogensinde før, og kan udvides ved hjælp af kodebiblioteker som jQuery. Når du tilføjer de nyeste HTML5 / CSS3-specifikationer, er det muligt at opbygge meget snappy mobile webapps med nogle grundlæggende frontend-kode.

I denne vejledning viser jeg, hvordan du kan opbygge en mobilbaseret hjemmeside / webapp. Vi bruger CSS3-medieforespørgsler til målretning af bestemte enheder og skærmopløsninger. Plus en smule jQuery hjælper med at animere menuen og indlæse eksternt sideindhold ved hjælp af Ajax-opkald. Endnu bedre kan layoutet endda udvides til at blive vist korrekt i almindelige desktopbrowsere som Chrome eller Firefox.

Live Demo
Kildekode

Definerer sidestrukturen

Lad os begynde med at gå over HTML-siden først og stil den ved hjælp af nogle CSS-regler. Jeg springer over de fleste af de usædvanlige metatags i overskriften, da de ikke påvirker webapplikationen direkte. Men der er et par, jeg bør nævne, nemlig fra udsnittet nedenfor:

X-UA-Compatible bruges til at beskrive, hvordan dit dokument skal gøre i visse browsere. Det er et interessant scenario ved kodning i HTML5, så jeg ville ikke bekymre mig for meget om dette. Men metaen viewport tag er meget vigtigt. Den indstiller mobilbrowservinduet til 100% i stedet for den standardzoomede effekt.

Det er også muligt at deaktivere brugerzoom med indholdsværdien skalléres = no. Men i dette tilfælde ønsker vi bare at indstille hele skærmbredden til at være den samme som vores enhedsbredde. Apples web app-tags giver mulighed for at gemme hjemmesiden som et startskærmikon til din iPhone eller iPod Touch. Ikke helt nødvendigt, men bestemt værd at have.

Indre kropsindhold

Inden i kroppen tag jeg har setup en wrapper div med ID #W. Indenfor har jeg brudt layoutet i to flere divs ved hjælp af id'er #pagebody og #navmenu. Hele sidebredden er begrænset til 640px efter eget valg, så layoutet skaleres til et strengt antal.

   HK Mobile
 
  Velkommen til Mobilsiden!
 
 
   Menu Links
 
  Hjem
 Om os
 Annoncer
 Skriv til os
 Kontakter
 Fortrolighedspolitik

Navigationsmenuen får en lavere z-indeksværdi, så at #pagebody er altid på toppen. Dette er afgørende, da JavaScript-koden vil glide over sidekroppen et vist antal pixels for at afsløre navigationen nedenunder.

Jeg har brugt et hash-symbol (#) foran hver .html-side for at stoppe en vis dårlig opførsel i Mobile Safari. Når du klikker på et link, vises URL-linjen og skubber indholdet ned. Men når der henvises til et ID, genindlæses der ikke andet end via JavaScript-opkald.

CSS positionering

Der er ikke en masse forvirrende indhold inde i vores CSS-kode. Det meste af positioneringen sker manuelt og manipuleres derefter gennem jQuery. Men der er et par interessante stykker i vores dokument.

/ ** @group kernelegeme ** / #w #pagebody position: relative; venstre: 0; maksimal bredde: 640px; min bredde: 320px; z-indeks: 99999;  #w #navmenu baggrund: # 475566; højde: 100%; display: blok; stilling: fast; bredde: 300px; venstre: 0px; top: 0px; z-indeks: 0;

Dette øverste segment definerer stilarter for begge sektioner på siden. Vores nav menu er kun 300px bred, så det giver lidt plads til, at sidens indhold stadig ses. Menuknappen Åbn / Luk er også placeret direkte på venstre side og altid tilgængelig. Det vigtige stykke her er z-indeks ejendomsværdien og bruger stilling: fast; på vores navmenu.

Den øverste værktøjslinje header er også en interessant sektion. Dette er indstillet til en fast position, så den vil rulle med sidens indhold. Dette replikerer en lignende effekt som du ville finde i en hvilken som helst iOS-appens titellinje.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; stilling: fast; venstre: 0px; top: 0px; z-indeks: 9999; baggrund: # 0b1851 url ('img / tabbar-solid-bg.png') øverst til venstre, ingen gentagelse; grænse-radius: 5px; -moz-grænse-radius: 5px; -webkit-grænse-radius: 5px; -grense-radius: 5px; grænse-bund-højre-radius: 0; -moz-grænse-radius-bottomright: 0; -webkit-grænse-bund-højre-radius: 0; grænse-bund-venstre-radius: 0; -moz-grænse-radius-bottomleft: 0; -webkit-grænse-bund-venstre-radius: 0; højde: 44px; bredde: 100%; maksimal bredde: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; polstring-top: 10px; polstring-højre: 40px; farve: # e6e8f2; font-weight: bold; skrifttypestørrelse: 2.1em; tekstskygge: 1px 1px 0px # 313131;

Mobile regler

Det er nemt at lægge mærke til, jeg bruger også et baggrundsbillede til den blå header bar tekstur. Dette er dimensioneret på 640 × 44 pixel for at holde med den konsistente layoutstruktur. Men jeg har også udviklet et billede @ 2x til iPhone / iPad retina displays. Du kan se begge billederne nedenfor, eller tag dem fra min demo kildekode.

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

Jeg opsætter den mobile CSS til denne funktionalitet i en anden fil med navnet responsive.css. Den indeholder to medieforespørgsler, som erstatter titellinjen bg og menuknappen for nethindenheder.

/ ** nethinden display ** / @media only screen og (-webkit-min-enhed-pixel-forhold: 2), kun skærm og (min - moz-enhed-pixel-forhold: 1,5), kun skærm og min-enhed-pixel-forhold: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') øverst til venstre, ingen gentagelse; baggrundsstørrelse: 640px 44px;  #w #pagebody header # menu-btn baggrund: url ('img/[email protected] ') no-repeat; Baggrundsstørrelse: 53px 30px;

Design af menupile

I navigationsområdet har jeg også inkluderet et lille pilikon over til højre side af hvert menukobling. Dette kan let erstattes med et billede fra enhver kreativ samling kunst. Men for det meste vil alle CSS3 aficionados elske at afprøve denne metode.

#w #navnetu ul li a: efter indhold: "; display: blok; bredde: 6px; højde: 6px; grænse-højre: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; position: absolut; : 30px; top: 45%; -webkit-transform: roter (45deg); -moz-transform: roter (45deg); -o-transform: roter (45deg); transform: roter (45deg); #w #navmenu ul li a: hover :: efter border-color: # cad0e6;

Vi bruger omdanne ejendom for at oprette en lille grænse efter indholdet. Jeg opsætter også position: absolut; så vi kan frit flytte disse grænser omkring det indre link element. Det er super nemt at ændre grænsekarveren på en svømmerstat, hvilket giver en mere dynamisk følelse. Det er ret utroligt, hvad du kan opnå ved blot at bruge grundlæggende HTML5 og CSS3 regler.

Men lad os nu flytte ind i bit og stykker af JavaScript-kode. Husk dette kræver en inkludering til jQuery-biblioteket, så min kode kan køre ordentligt.

jQuery Animeret

Ved at skrive disse brugerdefinerede koder har jeg oprettet et helt nyt dokument med navnet script.js. Du er velkommen til at skrive disse direkte ind > tags eller hent mit eksempel fra demo kildekoden.

 $ (dokument) .ready (funktion ) var sidebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var indhold = $ #content "); var viewport = bredde: $ (vindue). bredde (), højde: $ (vindue) .height (); // hente variabler som // viewport.width / viewport.height 
 For at begynde med har jeg opsat nogle sidevariabler, hvor vi kan referere elementer i dokumentet meget hurtigere. Visningsværdien bruges aldrig, men det kan være nyttigt, hvis du ønsker at justere animationsstadierne. For eksempel kan du tjekke den aktuelle browserbredde og åbne din menu mindre eller bredere i overensstemmelse hermed.
 funktion openme () $ (funktion () topbar.animate (left: "290px", varighed: 300, kø: falsk); pagebody.animate (left: "290px" , kø: false););  funktionsterminal () var closeme = $ (funktion () topbar.animate (left: "0px", varighed: 180, kø: falsk); pagebody.animate (left: "0px" varighed: 180, kø: falsk);); 
 Dernæst har jeg defineret to vigtige funktioner til åbning og lukning af menuen. Disse kunne have været gjort i en enkelt funktion og tilbagekaldsknap - bortset fra at vi faktisk skal animere to forskellige elementer på samme tid. Desværre er dette ikke standardadfærd for jQuery, så vi er nødt til at ty til en alternativ syntaks.
 De to elementer, vi målretter mod, er navngivet topbar og pagebody. Det indre indholdsområde med en hvid baggrund er den fulde sidefelt; Men vi har titellinjens position fastgjort til toppen af siden. Det betyder, at det ikke vil naturligvis animere med siden, og vi skal bruge et særskilt opkald. Åbningen er indstillet til at skubbe 290px tilbage (næsten hele 300px navbredden), og lukkefunktionen trækker den tilbage.
 Indlæser dynamisk indhold
 Koden ovenfor er nem nok til at tage sig af animationen. Og teoretisk set er alt hvad du behøver for en så simpel mobilwebsite - men jeg vil gerne tilføje en lille smule mere.
 Hver gang brugeren klikker på en menulinje, ønsker vi at lukke den aktuelle navigation og vise et indlæsergif, mens vi søger efter sidens indhold. Så når vi er færdige fjerner vi gifbilledet og indlæser det hele inde. Dette er fantastisk, fordi vi endda kan bruge statiske .html sider til indholdet. Ingen PHP eller Ruby eller Perl eller nogen backend sprog for at gøre tingene rodet.
 Administration af klik
 Først vil vi teste, når vores brugere klikker på navigationsknapperne. Dette stopper den normale href-værdi fra indlæsning, og vi kan i stedet bruge vores egne funktioner til at vise eksternt indhold.
 // loading side indhold til navigation $ ("a.navlink"). live ("klik", funktion (e) e.preventDefault (); var linkurl = $ (dette) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 
 Nu åbner vi en vælger for ethvert anker med klassen navlink. Når en bruger klikker på en af disse links, stopper vi den fra at indlæse og opsætte en variabel for hele webadressen. Jeg har også opsæt en variabel for indholdet HTML til at inkludere en standard billedlader. Hvis du vil tilpasse din egen, anbefaler jeg stærkt Ajaxload.
 Ajax .load ()
 Der er to forskellige stykker til denne effekt, som jeg har pænt brudt op. Koden nedenfor er vores første bit, som lukker navigationsmenuen og glider det samlede dokumentvindue helt op til toppen. Vi ønsker at erstatte det indre kropsindhold med en lille loader-animation, og brugerne kan ikke se dette, hvis de så på bunden af siden.
 closeme (); $ (funktion () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Nu vil vi endelig erstatte det indre kropsindhold med vores billede og hente den eksterne side, der skal læses. Normalt vil dette kun tage et par hundrede millisekunder eller endnu hurtigere, så jeg har indstillet en timeout-funktion.
 content.html (imgloader); setTimeout (funktion () content.load (linkhtmlurl, funktion () / * ingen tilbagekaldelse * /), 1200);
 Dette vil standse 1200 millisekunder, før du læser nyt indhold. For min demo ser det meget bedre ud og giver dig en ide om, hvordan applikationen ville opføre sig på langsommere internetforbindelser.
 
 Konklusion
 Jeg opfordrer alle webudviklere til at downloade kildekoden til selvstudium og spille rundt på egen hånd. Dette er et så grundlæggende eksempel på, hvad der kan opnås med HTML / CSS3 og et strejf af JavaScript-effekter. Opbygning af mobilskærme er nemmere end nogensinde med medieforespørgsler og mere udvidelige webbrowsere.
 Se om du kan anvende en af denne kode i dine fremtidige webprojekter. Opbygning af mobile applikationer er en kunst, ligesom webdesign, og kræver en masse dedikation og praksis. Jeg håber, at denne tutorial kan være et godt udgangspunkt for blot et par entusiastiske udviklere. Hvis du har spørgsmål eller tanker om koden, er du velkommen til at dele med os i det efterfølgende diskussionsområde.