Izdelava mobilnih aplikacij / navigacija gradnje Devov z jQuery

Pametni telefoni so zdaj opremljeni z zelo učinkovitimi spletnimi brskalniki. JavaScript je močnejši kot kdajkoli prej in ga je mogoče razširiti s pomočjo knjižnic kod, kot je jQuery. Ko dodate najnovejše specifikacije HTML5 / CSS3, je možno izdelati zelo privlačne mobilne spletne aplikacije z nekaj osnovnimi kodami.

V tej vadnici bom prikazal, kako lahko zgradite spletno mesto / spletno aplikacijo, ki temelji na mobilnih napravah. Uporabili bomo medijske poizvedbe CSS3 za ciljanje na določene naprave in ločljivosti zaslona. Poleg tega vam malo jQuery pomaga animirati meni in naložiti zunanjo vsebino strani s pomočjo klicev Ajax. Še bolje, postavitev se lahko celo razširi, da se prikaže pravilno v običajnih namiznih brskalnikih, kot sta Chrome ali Firefox.

Predstavitev v živo
Izvorna koda

Določanje strukture strani

Začnimo tako, da najprej preberemo HTML stran in jo oblikujemo s pomočjo nekaterih pravil CSS. Preskočil bom večino nenavadnih metaoznak v glavi, ker ne vplivajo neposredno na spletno aplikacijo. Vendar pa je nekaj, ki jih moram omeniti, in sicer iz spodnjega odseka:

X-UA-Združljiv se uporablja za opis, kako naj se vaš dokument upodobi v nekaterih brskalnikih. To je zanimiv scenarij pri kodiranju v HTML5, tako da ne bi preveč skrbel glede tega. Vendar meta pogled je zelo pomembna. Okno mobilnega brskalnika nastavi na 100% namesto standardnega povečanega učinka.

Uporabniško povečavo lahko tudi onemogočite z vrednostjo vsebine user-scalable = ne. Toda v tem primeru želimo nastaviti širino celotnega zaslona, ki bo enaka širini naše naprave. Oznake spletnih aplikacij Apple omogočajo, da se spletno mesto shrani kot ikona domačega zaslona na vaš iPhone ali iPod Touch. Ni povsem potrebno, ampak vsekakor vredno.

Vsebina notranjega telesa

V notranjosti oznake za telo sem namestil ovoj divja z ID-jem #w. Znotraj sem lomil postavitev v še dva divja dela z uporabo ID-jev #pagebody in #navmenu. Celotna širina strani je omejena na 640px po izbiri, tako da je postavitev skalirana na strogo številko.

   HK Mobile
 
  Dobrodošli na mobilnem spletnem mestu!
 
 
   Meni povezave
 
  Domov
 O nas
 Oglašujte
 Pišite nam
 Stiki
 Pravilnik o zasebnosti

Navigacijski meni ima nižjo vrednost z-indeksa, tako da #pagebody je vedno na vrhu. To je ključnega pomena, saj bo koda JavaScript drsela po telesu strani določeno število slikovnih pik, da prikaže navigacijo pod njo.

Pred vsako .html stranjo sem uporabil simbol razpršitve (#), da bi zaustavil slabo vedenje v storitvi Mobile Safari. Kadarkoli kliknete povezavo, se prikaže vrstica URL in potisne vsebino navzdol. Toda pri sklicevanju na ID ničesar ni mogoče ponovno naložiti, razen prek klicev JavaScript.

Pozicioniranje CSS

V naši CSS kodi ni veliko nejasnih vsebin. Večina pozicioniranja se opravi ročno in nato manipulira preko jQuery. V našem dokumentu pa je nekaj zanimivih del.

/ ** @group osnovno telo ** / #w #pagebody position: relative; levo: 0; max-width: 640px; min-width: 320px; z-indeks: 99999;  #w #navmenu ozadje: # 475566; višina: 100%; prikaz: blok; položaj: fiksno; širina: 300px; levo: 0px; vrh: 0px; z-indeks: 0;

Ta vrhnji segment določa sloge za oba dela strani. Naš navigacijski meni je širok le 300 pikslov, tako da je ostalo malo prostora za vsebino strani, ki jo še vedno lahko vidite. Meni menija za odpiranje / zapiranje se nahaja tudi na levi strani in je vedno dostopen. Najpomembnejši del je vrednost lastnosti z-indeksa in uporaba položaj: fiksno; na našem navmenu.

Zgornja glava orodne vrstice je tudi zanimiv del. To je nastavljeno na fiksni položaj, tako da se bo pomikalo z vsebino strani. To podvoji podoben učinek, kot bi ga našli v kateri koli naslovni vrstici aplikacije iOS.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; položaj: fiksno; levo: 0px; vrh: 0px; z-indeks: 9999; ozadje: # 0b1851 url ('img / tabbar-solid-bg.png') zgoraj levo brez ponovitve; obrobni polmer: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -okrajni polmer: 5px; polmer rob-spodaj-desno: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; polmer meje-spodaj levo: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; višina: 44px; širina: 100%; max-width: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; padding-top: 10px; padding-right: 40px; barva: # e6e8f2; font-weight: krepko; velikost pisave: 2.1em; text-shadow: 1px 1px 0px # 313131;

Pravila za mobilne naprave

Zelo preprosto je opaziti, da uporabljam tudi sliko za ozadje za modro strukturo naslovne vrstice. To je velikost 640 × 44 slikovnih pik, da ostane skladna struktura postavitve. Toda razvil sem tudi sliko @ 2x za zaslone retine iPhone / iPad. Ogledate si lahko obe sliki spodaj ali pa ju vzemite iz moje demo izvorne kode.

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

Mobilni CSS sem za to funkcijo nastavil v drugi datoteki z imenom responsive.css. Vsebuje dve medijski poizvedbi, ki nadomestita naslovno vrstico bg in ikono menijskega gumba za naprave z mrežnico.

/ ** retina display ** / @media samo zaslon in (-webkit-min-naprava-pixel-razmerje: 2), samo zaslon in (min - moz-device-pixel-razmerje: 1.5), samo zaslon in ( razmerje min-device-pixel: 1.5) #w #pagebody header ozadje: # 0b1851 url ('img/[email protected] ') zgoraj levo brez ponovitve; velikost ozadja: 640px 44px;  #w #pagebody header # menu-btn ozadje: url ('img/[email protected] ') brez ponavljanja; velikost ozadja: 53px 30px;

Oblikovanje puščic menija

V navigacijskem področju sem na desno stran vsake menijske povezave vključil tudi ikono majhne puščice. To lahko enostavno zamenjate s sliko iz vseh ustvarjalnih del. Toda večinoma bodo vsi ljubitelji CSS3 radi testirali to metodo.

#w #navmenu ul li a :: after content: "; display: block; širina: 6px; višina: 6px; meja-desna: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; položaj: absolutna, desna : 30px; top: 45%; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg); #w #navmenu ul li a: hover :: after border-color: # cad0e6;

Uporabljamo transform lastnost za ustvarjanje majhne meje po vsebini. Prav tako sem nastavil položaj: absolutno; zato lahko te meje prosto premikamo okoli elementa notranje povezave. Zelo enostavno je spremeniti barvo obrobe v stanju lebdenja, ki ponuja bolj dinamičen občutek. To je precej neverjetno, kaj lahko dosežete samo z uporabo osnovnih pravil HTML5 in CSS3.

Zdaj pa se premaknimo k bitovam in delom kode JavaScript. Ne pozabite, da to zahteva knjižnico jQuery, da se moja koda pravilno izvaja.

jQuery Animirana

Pri pisanju teh kod po meri sem ustvaril popolnoma nov dokument z imenom script.js. Lahko jih napišete neposredno v > ali prenesete moj primer iz predstavitvene izvorne kode.

 $ (document) .ready (funkcija () var pagebody = $ ("# pagebody"); var varčevanje = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // priklic spremenljivk kot // viewport.width / viewport.height 
 Za začetek sem nastavil nekatere spremenljivke strani, kjer lahko elemente v dokumentu referenciramo veliko hitreje. Vrednost prikaza se nikoli ne uporablja, vendar je lahko uporabna, če želite prilagoditi stopnje animacije. Na primer, lahko preverite trenutno širino brskalnika in ustrezno odprete meni manj ali širše.
 function openme () $ (function () topbar.animate (left: "290px", trajanje: 300, čakalna vrsta: false); pagebody.animate (left: "290px", trajanje: 300 , čakalna vrsta: false););  function closeme () var closeme = $ (funkcija () topbar.animate (left: "0px", trajanje: 180, čakalna vrsta: false); pagebody.animate (left: "0px", trajanje: 180, čakalna vrsta: false);); 
 Naprej sem definiral dve pomembni funkciji za odpiranje in zapiranje menija. Te bi lahko naredili v eni funkciji in preklopu povratnega klica - razen da moramo dejansko animirati dva različna elementa hkrati. Žal to ni privzeto vedenje za jQuery, zato se moramo zateči k alternativni sintaksi.
 Imenujemo dva elementa, na katera ciljamo topbar in stran. Notranje območje vsebine z belim ozadjem je celotno stran; vendar imamo naslovno vrstico, ki je pritrjena na vrh strani. To pomeni, da se ne bo naravno animirala s stranjo, zato moramo uporabiti ločen klic. Odprtje je nastavljeno tako, da pritisne levo levo 290px (skoraj polna širina 300px navzgor) in funkcija zapiranja se umakne.
 Nalaganje dinamične vsebine
 Zgornja koda je dovolj preprosta za skrb za animacijo. In teoretično je to vse, kar potrebujete za tako preprosto mobilno spletno stran - vendar želim dodati še malo.
 Vsakič, ko uporabnik klikne povezavo v meniju, želimo zapreti trenutno navigacijo in prikazati gif obremenitve, medtem ko iščemo vsebino strani. Potem ko končamo odstranimo gif sliko in jo naložimo v notranjost. To je fantastično, ker lahko za vsebino uporabimo tudi statične .html strani. Ne PHP ali Ruby ali Perl ali kateri koli backend jeziki, da bi stvari grdo.
 Upravljanje klikov
 Najprej želimo preizkusiti, kdaj naši uporabniki kliknejo gumbe za navigacijo. To bo zaustavilo normalno vrednost href od nalaganja in nam lahko za prikaz zunanje vsebine uporabimo lastne funkcije.
 // nalaganje vsebine strani za navigacijo $ ("a.navlink"). v živo ("klik", funkcija (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 
 Sedaj odpiramo izbirnik za vsako sidro v razredu navlink. Vsakič, ko uporabnik klikne eno od teh povezav, ga ustavimo pri nalaganju in nastavitvi spremenljivke za celoten URL. Prav tako sem nastavil spremenljivko za vsebino HTML, ki vključuje standardni nalagalnik slik. Če želite prilagoditi svoje, vam priporočam Ajaxload.
 Ajax .load ()
 V tem smislu sta dva različna dela, ki sem jih dobro razdelil. Spodnja koda je naš prvi bit, ki zapre navigacijski meni in premakne celotno okno dokumenta vse do vrha. Vsebino notranjega telesa želimo zamenjati z majhno animacijo nakladalca in uporabniki tega ne vidijo, če gledajo na dnu strani.
 closeme (); $ (funkcija () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Končno želimo zamenjati vsebino notranjega telesa z našo sliko in prenesti zunanjo stran za nalaganje. Običajno bo to trajalo le nekaj sto milisekund ali celo hitreje, zato sem nastavil časovno omejitev.
 content.html (imgloader); setTimeout (funkcija () content.load (linkhtmlurl, funkcija () / * brez povratnega klica * /), 1200);
 To bo zaustavilo 1200 milisekund pred nalaganjem nove vsebine. Za mojo demo to izgleda veliko bolje in vam daje predstavo o tem, kako bi se aplikacija obnašala na počasnejših internetnih povezavah.
 
 Zaključek
 Vse spletne razvijalce spodbujam, da prenesejo izvorno kodo vadnice in se sami igrajo. To je tako osnovni primer, kaj se lahko doseže s HTML / CSS3 in dotikom JavaScriptovih učinkov. Zgradba za mobilne zaslone je lažja kot kdaj koli prej z medijskimi poizvedbami in bolj razširljivimi spletnimi brskalniki.
 Preverite, ali lahko uporabite katero od teh kod v vaših prihodnjih spletnih projektih. Gradnja mobilnih aplikacij je umetnost, podobno kot spletno oblikovanje, in zahteva veliko predanosti in prakse. Upam, da bo ta vadnica dobra izhodiščna točka za le nekaj navdušenih razvijalcev. Če imate vprašanja ali misli o kodi, vas prosimo, da delite z nami na območju za razpravo.