Mobile App Design / Dev Building Navigering med jQuery

Smarttelefoner er nå utstyrt med noen svært effektive nettlesere. JavaScript er kraftigere enn noen gang før, og kan utvides ved hjelp av kodebiblioteker som jQuery. Når du legger til i de nyeste HTML5 / CSS3-spesifikasjonene, er det mulig å bygge veldig snappy mobile webapper med noen grunnleggende frontendkode.

I denne opplæringen viser jeg hvordan du kan bygge en mobilbasert nettside / webapp. Vi bruker CSS3-mediesøk for å målrette mot bestemte enheter og skjermoppløsninger. Pluss litt jQuery bidrar til å animere menyen og laste inn eksternt sideinnhold ved hjelp av Ajax-anrop. Enda bedre, layoutet kan til og med ekspandere for å vises riktig i vanlige desktop-nettlesere som Chrome eller Firefox.

Live Demo
Kildekode

Definere sidestrukturen

La oss begynne med å gå over HTML-siden først og stil den ved å bruke noen CSS-regler. Jeg hopper over de fleste av de uvanlige metakoder i overskriften, siden de ikke påvirker webapplikasjonen direkte. Men det er noen jeg bør nevne, nemlig fra koden nedenfor:

X-UA-Compatible brukes til å beskrive hvordan dokumentet skal gjengi i visse nettlesere. Det er et interessant scenario når det kodes i HTML5, så jeg ville ikke bekymre meg for mye om dette. Men meta view tag er veldig viktig. Den setter det mobile nettleservinduet til 100% i stedet for den standardzoomede effekten.

Det er også mulig å deaktivere brukerzoom med innholdsverdien bruker skalerbar = no. Men i dette tilfellet vil vi bare sette hele skjermbredden til den samme som enhetens bredde. Apples web app-tagger vil tillate at nettstedet blir lagret som et startskjermikon til iPhone eller iPod Touch. Ikke helt nødvendig, men absolutt verdt å ha.

Inner kroppsinnhold

Inne i kroppen tagget har jeg satt opp en wrapper div med ID #W. Innvendig har jeg brutt oppsettet til to flere divs ved hjelp av IDer #pagebody og #navmenu. Hele sidebredden er begrenset til 640px etter eget valg, slik at utformingen skaleres til et strengt antall.

   HK Mobile
 
  Velkommen til mobilnettstedet!
 
 
   Meny Lenker
 
  Hjem
 Om oss
 Reklamere
 Skriv for oss
 Kontakt
 Personvernregler

Navigasjonsmenyen får en lavere z-indeksverdi slik at #pagebody er alltid på toppen. Dette er avgjørende siden JavaScript-koden vil glide over sidekroppen et visst antall piksler for å vise navigasjonen under.

Jeg har brukt et hash-symbol (#) foran hver .html-side for å stoppe noen dårlig oppførsel i Mobile Safari. Når du vil klikke på en kobling, vises nettadresselinjen og skyver ned innholdet. Men når du refererer til en ID, blir det ikke lastet opp, unntatt gjennom JavaScript-anrop.

CSS posisjonering

Det er ikke mye forvirrende innhold inni CSS-koden vår. Det meste av posisjoneringen gjøres manuelt og manipuleres deretter gjennom jQuery. Men det er noen få interessante ting i dokumentet vårt.

/ ** @group kjernekropp ** / #w #pagebody posisjon: relative; venstre: 0; maksimal bredde: 640px; min bredde: 320px; z-indeks: 99999;  #w #navmenu bakgrunn: # 475566; høyde: 100%; skjerm: blokk; posisjon: fast; bredde: 300px; venstre: 0px; topp: 0px; z-indeks: 0;

Dette toppsegmentet definerer stiler for begge deler av siden. Nav-menyen er bare 300px bred, så dette gir litt plass til at sidens innhold fremdeles blir sett. Åpne / Lukk menyknappen er også plassert direkte på venstre side og alltid tilgjengelig. Det viktige brikket her er z-indeksen eiendomsverdi og bruk posisjon: fast; på vår navmenu.

Den øverste verktøylinjeoverskriften er også en interessant del. Dette er satt til en fast posisjon, slik at den vil rulle med sidens innhold. Dette replikerer en lignende effekt som du finner i en hvilken som helst iOS-appens tittellinje.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; posisjon: fast; venstre: 0px; topp: 0px; z-indeks: 9999; bakgrunn: # 0b1851 url ('img / tabbar-solid-bg.png') øverst til venstre, ikke-gjenta; border-radius: 5px; -moz-grense-radius: 5px; -webkit-grense-radius: 5px; -grense-radius: 5px; grensebunn-høyre-radius: 0; -moz-border-radius-bottomright: 0; -webkit-grense-bunn-høyre-radius: 0; Grensen nederst til venstre: 0; -moz-border-radius-bottomleft: 0; -webkit-grense-bunn-venstre-radius: 0; høyde: 44px; bredde: 100%; maksimal bredde: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; polstring: 10px; polstring-høyre: 40px; farge: # e6e8f2; font-weight: bold; skriftstørrelse: 2.1em; tekstskygge: 1px 1px 0px # 313131;

Mobilregler

Det er lett å legge merke til at jeg også bruker et bakgrunnsbilde for den blå topptekst tekstur. Dette er dimensjonert på 640 × 44 piksler for å holde med den konsekvente layoutstrukturen. Men jeg har også utviklet et bilde @ 2x for iPhone / iPad retina skjermer. Du kan se begge bildene under, eller ta dem fra min demo kildekode.

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

Jeg installerer mobil CSS for denne funksjonaliteten i en annen fil som heter responsive.css. Den inneholder to medieforespørsler som erstatter tittellinjen bg og menyknappikonet for netthinnenheter.

/ ** netthinnen skjerm ** / @media bare skjerm og (-webkit-min-enhet-pixel-forhold: 2), bare skjerm og (min - moz-enhet-pixel-forhold: 1,5), bare skjerm og Min-enhet-pixel-forhold: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') øverst til venstre, ikke-gjentatt; bakgrunnsstørrelse: 640px 44px;  #w #pagebody header # menu-btn bakgrunn: url ('img/[email protected] ') no-repeat; bakgrunnsstørrelse: 53px 30px;

Designe menypiler

I navigasjonsområdet har jeg også tatt med et lite pilikon over til høyre side av hver menykobling. Dette kan enkelt byttes ut med et bilde fra en hvilken som helst Creative Commons artwork. Men for det meste vil alle CSS3 aficionados elske å teste ut denne metoden.

#w #navnetu ul li a: etter innhold: "; display: blokk; bredde: 6px; høyde: 6px; grense-høyre: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; posisjon: absolutt; : 30px; topp: 45%; -webkit-transform: roter (45deg); -moz-transform: roter (45deg); -o-transform: roter (45deg); transform: roter (45deg); #w #navmenu ul li a: hover :: etter border-color: # cad0e6;

Vi bruker forvandle eiendom for å lage en liten ramme etter innholdet. Jeg har også oppsett posisjon: absolutt; så vi kan fritt bevege disse grensene rundt det indre linkelementet. Det er super enkelt å endre kantfargen på en svingerstat, som gir en mer dynamisk følelse. Det er ganske utrolig hva du kan oppnå bare ved å bruke grunnleggende HTML5- og CSS3-regler.

Men nå, la oss flytte inn i biter og biter av JavaScript-kode. Husk at dette krever en inkludere til jQuery-biblioteket for at koden min skal kjøre riktig.

jQuery Animated

Ved å skrive disse egendefinerte kodene har jeg opprettet et helt nytt dokument som heter script.js. Du er velkommen til å skrive disse direkte inn > tagger, eller last ned mitt eksempel fra demo kildekoden.

 $ (dokument) .ready (funksjon () var sidebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var toppbar = $ ("# toolbarnav"); var content = $ #content "); var viewport = bredde: $ (vindu). bredde (), høyde: $ (vindu) .height (); // hente variabler som // viewport.width / viewport.height 
 For å begynne med har jeg satt opp noen sidevariabler der vi kan referere til elementer i dokumentet mye raskere. Visningsverdien blir aldri brukt, men det kan være nyttig hvis du ønsker å justere animasjonsstadiene. For eksempel kan du sjekke gjeldende nettleservidd og åpne menyen mindre eller bredere i henhold til dette.
 funksjon openme () $ (funksjon () topbar.animate (left: "290px", varighet: 300, kø: false); pagebody.animate (left: "290px", varighet: 300 , kø: false););  funksjonsterminal () var closeme = $ (funksjon () topbar.animate (left: "0px", varighet: 180, kø: false); pagebody.animate (left: "0px", varighet: 180, kø: false);); 
 Deretter har jeg definert to viktige funksjoner for å åpne og lukke menyen. Disse kunne ha blitt gjort i en enkelt funksjon og tilbakeringingsvegg - bortsett fra at vi faktisk trenger å animere to forskjellige elementer på samme tid. Dessverre er dette ikke standardoppførelsen for jQuery, så vi må ty til en alternativ syntaks.
 De to elementene vi målretter mot er navngitt topbar og pagebody. Det indre innholdsområdet med en hvit bakgrunn er den fulle sidekroppen; men vi har tittellinjeposisjonen festet til toppen av siden. Dette betyr at det ikke naturlig vil animere med siden, og vi må bruke et eget anrop. Åpningen er satt opp for å skyve 290px igjen (nesten hele 300px navbredden) og lukkingsfunksjonen trekker den inn.
 Laster inn dynamisk innhold
 Koden ovenfor er enkel nok til å ta vare på animasjonen. Og teoretisk er det alt du trenger for en så enkel mobil nettside - men jeg vil legge til litt mer.
 Hver gang brukeren klikker på en menykobling, vil vi lukke den nåværende navigasjonen og vise et lastegift mens vi ser etter sidens innhold. Så en gang ferdig fjerner vi gifbildet og laster det hele innvendig. Dette er fantastisk fordi vi selv kan bruke statiske .html sider for innholdet. Ingen PHP eller Ruby eller Perl eller noen backend-språk for å gjøre ting rotete.
 Administrere klikk
 Først vil vi teste når brukerne klikker på navigasjonsknappene. Dette vil stoppe den normale href-verdien fra lasting, og vi kan i stedet bruke våre egne funksjoner til å vise eksternt innhold.
 // loading side innhold for navigasjon $ ("a.navlink"). live ("klikk", funksjon (e) e.preventDefault (); var linkurl = $ (dette) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 
 Nå åpner vi en velger for ethvert anker med klassen navlink. Når en bruker klikker på en av disse koblingene, stopper vi det fra å laste inn og konfigurere en variabel for hele nettadressen. Jeg har også satt opp en variabel for innholdet HTML for å inkludere en standard bildelaster. Hvis du vil tilpasse din egen, anbefaler jeg Ajaxload.
 Ajax .load ()
 Det er to forskjellige stykker til denne effekten som jeg har nettopp brutt opp. Koden nedenfor er vår første bit som lukker navigasjonsmenyen og skyver det totale dokumentvinduet helt opp til toppen. Vi ønsker å erstatte det indre kroppsinnholdet med en liten lasteranimasjon, og brukere kan ikke se dette hvis de så på bunnen av siden.
 closeme (); $ (funksjon () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Nå vil vi endelig erstatte det indre kroppsinnholdet med vårt bilde og hente den eksterne siden for å laste. Normalt vil dette bare ta et par hundre millisekunder eller enda raskere, så jeg har satt en timeout-funksjon.
 content.html (imgloader); setTimeout (funksjon () content.load (linkhtmlurl, funksjon () / * ingen tilbakeringing * /), 1200);
 Dette vil pause 1200 millisekunder før du laster inn nytt innhold. For min demonstrasjon ser dette mye bedre ut og gir deg en ide om hvordan applikasjonen ville opptre på langsommere Internett-tilkoblinger.
 
 Konklusjon
 Jeg oppfordrer alle webutviklere til å laste ned kildekoden til opplæringen og spille rundt på egenhånd. Dette er et grunnleggende eksempel på hva som kan oppnås med HTML / CSS3 og et snev av JavaScript-effekter. Bygging for mobile skjermer er enklere enn noensinne med medieforespørsler og flere utvidbare nettlesere.
 Se om du kan bruke en hvilken som helst kode i fremtidige webprosjekter. Bygging av mobile applikasjoner er en kunst, lik webdesign, og krever mye engasjement og praksis. Jeg håper denne opplæringen kan være et godt utgangspunkt for bare noen få entusiastiske utviklere. Hvis du har spørsmål eller tanker om koden, kan du dele med oss i det etterfølgende diskusjonsområdet.