Izrada mobilne aplikacije / navigacija u zgradi s programom jQuery

Pametni telefoni sada su opremljeni nekim vrlo učinkovitim web-preglednicima. JavaScript je moćniji nego ikada prije i može se proširiti uz pomoć knjižnica koda, kao što je jQuery. Kada dodate najnovije specifikacije HTML5 / CSS3, moguće je izraditi vrlo lijepe mobilne web-aplikacije s nekim osnovnim kodom.

U ovom tutorialu pokazat ću vam kako možete izgraditi web-mjesto / webapp koji se temelji na mobilnim uređajima. Koristit ćemo CSS3 medijske upite za ciljanje određenih uređaja i razlučivosti zaslona. Plus malo jQuery pomaže u animiranju izbornika i učitavanju sadržaja vanjske stranice pomoću Ajax poziva. Čak i bolje, izgled se može čak i proširiti kako bi se ispravno prikazao u redovitim preglednicima radne površine kao što su Chrome ili Firefox.

Demo uživo
Izvorni kod

Definiranje strukture stranice

Počnimo prvo prelistavajući HTML stranicu i stilizirajući je pomoću nekih CSS pravila. Preskočit ću većinu neuobičajenih meta oznaka u zaglavlju jer ne utječu izravno na web-aplikaciju. Međutim, nekoliko bi ih trebalo spomenuti, i to iz donjeg isječka:

X-UA-kompatibilan koristi se za opisivanje načina prikazivanja dokumenta u određenim preglednicima. To je zanimljiv scenarij kodiranja u HTML5, tako da se ne bih previše brinuo o tome. Međutim, meta Početni prikaz Oznaka je vrlo važna. On postavlja prozor mobilnog preglednika na 100% umjesto standardnog zumiranog efekta.

Također je moguće onemogućiti zumiranje korisnika pomoću vrijednosti sadržaja korisnički skalabilan = nema. No, u ovom slučaju samo želimo postaviti širinu punog zaslona da bude jednaka širini našeg uređaja. Oznake web aplikacija tvrtke Apple omogućit će spremanje web-lokacije kao ikone početnog zaslona na vaš iPhone ili iPod Touch. Nije posve nužno, ali svakako vrijedi imati.

Sadržaj unutarnjeg tijela

Unutar oznake tijela postavila sam omotač div s ID-om #W. Unutra sam razbio raspored u još dva div-a koristeći ID-ove #pagebody i #navmenu. Širina cijele stranice je ograničena na 640px po izboru, tako da raspored se podudara sa strogim brojem.

   HK Mobile
 
  Dobro došli na mobilnu web-lokaciju!
 
 
   Linkovi izbornika
 
  Dom
 O nama
 Oglašavati
 Pišite nam
 kontakti
 Pravila o privatnosti

Navigacijski izbornik dobiva nižu vrijednost z-indeksa tako da #pagebody uvijek je na vrhu. To je presudno jer će JavaScript kôd preći preko tijela stranice određeni broj piksela da bi se otkrila navigacija ispod nje.

Upotrijebio sam simbol raspršivanja (#) ispred svake .html stranice kako bih zaustavio neko loše ponašanje u Mobile Safariju. Kad god kliknete na vezu, pojavit će se traka URL-a i gura sadržaj prema dolje. No, kada referencirate ID, ništa se ne učitava, osim kroz JavaScript pozive.

CSS pozicioniranje

U našem CSS kodu nema puno zbunjujućeg sadržaja. Većina pozicioniranja se obavlja ručno, a zatim se njome manipulira kroz jQuery. Ali u našem dokumentu postoji nekoliko zanimljivih primjeraka.

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

Ovaj najviši segment definira stilove za oba dijela stranice. Naš navigacijski izbornik ima širinu od samo 300 piksela, što ostavlja malo prostora za sadržaj stranice da se i dalje može vidjeti. Gumb izbornika za otvaranje / zatvaranje također se nalazi izravno s lijeve strane i uvijek dostupan. Važan dio ovdje je vrijednost svojstva z-indeksa i korištenje položaj: fiksno; na našem navmenu.

Glavna zaglavlja alatne trake također je zanimljiv dio. Ovo je postavljeno na fiksnu poziciju tako da se pomiče sa sadržajem stranice. To replicira sličan učinak kao što biste ga pronašli u bilo kojoj naslovnoj traci aplikacije iOS.

/ ** @group zaglavlje ** / #w #pagebody header # toolbarnav display: block; položaj: fiksno; lijevo: 0px; vrh: 0px; z-indeks: 9999; pozadina: # 0b1851 url ('img / tabbar-solid-bg.png') gore lijevo bez ponavljanja; granični polumjer: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-granični radijus: 5px; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; radius: border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; visina: 44px; širina: 100%; max-width: 640px;  #w #pagebody header # toolbarnav h1 text-align: centar; padding-top: 10px; padding-right: 40px; boja: # e6e8f2; font-weight: bold; veličina fonta: 2.1em; tekst-sjena: 1px 1px 0px # 313131;

Pravila za mobilne uređaje

Lako je primijetiti da također koristim pozadinsku sliku za plavu teksturu zaglavlja. To je veličine 640 × 44 piksela da bi se održala konzistentna struktura rasporeda. Ali sam također razvio sliku @ 2x za iPhone / iPad mrežnice. Možete vidjeti obje slike u nastavku ili ih zgrabite iz demo koda.

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

Postavio sam mobilni CSS za tu funkcionalnost u drugoj datoteci pod nazivom responsive.css. Sadrži dva medijska upita koja zamjenjuju naslovnu traku bg i ikonu gumba izbornika za mrežne uređaje.

/ ** retina display ** / @media samo zaslon i (-webkit-min-uređaj-piksel-omjer: 2), samo zaslon i (min-moz-uređaj-pixel-omjer: 1.5), samo zaslon i ( omjer min-uređaja-piksela: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') gore lijevo bez ponavljanja; veličina pozadine: 640px 44px;  #w #pagebody header # menu-btn pozadina: url ('img/[email protected] ') nema ponavljanja; veličina pozadine: 53px 30px;

Dizajniranje strelica izbornika

U navigacijskom području također sam dodao malu ikonu strelice na desnu stranu svake veze izbornika. To se lako može zamijeniti slikom iz bilo kojeg umjetničkog djela. No uglavnom će svi ljubitelji CSS3 voljeti testirati ovu metodu.

#w #navmenu ul li a :: after content: "; display: block; width: 6px; height: 6px; border-right: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; pozicija: apsolutna, desna : 30px, vrh: 45%; -webkit-transform: rotirati (45deg); -moz-transform: rotirati (45deg); -o-transformirati: rotirati (45deg); transformirati: rotirati (45deg); #w #navmenu ul li a: hover :: after border-color: # cad0e6;

Koristimo transformirati svojstvo za stvaranje male granice nakon sadržaja. Također sam namjestio položaj: apsolutni; tako da možemo slobodno pomicati te granice oko unutarnje veze. Vrlo je lako promijeniti boju obruba na stanju lebdjenja, koje pruža dinamičniji osjećaj. Prilično je nevjerojatno što možete postići samo pomoću osnovnih pravila HTML5 i CSS3.

Ali sada ćemo se preseliti u bitove i dijelove JavaScript koda. Zapamtite ovo zahtijevaju uključivanje u jQuery knjižnicu kako bi moj kôd pravilno funkcionirao.

jQuery Animirani

U pisanju ovih prilagođenih kodova stvorio sam potpuno novi dokument pod nazivom script.js. Slobodno ih upišite izravno u > ili preuzmite moj primjer iz demo izvornog koda.

 $ (document) .ready (function () var pagebody = $ ("# pagebody"); var varijable = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // dohvaćanje varijabli kao // viewport.width / viewport.height 
 Za početak postavljam neke varijable stranica gdje možemo referencirati elemente u dokumentu mnogo brže. Vrijednost prikaza se nikad ne koristi, ali može biti korisna ako želite prilagoditi stupnjeve animacije. Na primjer, možete provjeriti trenutnu širinu preglednika i otvoriti svoj izbornik manjim ili širem.
 function openme () $ (function () topbar.animate (lijevo: "290px", trajanje: 300, red: false); pagebody.animate (lijevo: "290px", trajanje: 300 , red: false););  function closeme () var closeme = $ (funkcija () topbar.animate (lijevo: "0px", trajanje: 180, red: false); pagebody.animate (lijevo: "0px", trajanje: 180, red: false);); 
 Dalje sam definirao dvije važne funkcije za otvaranje i zatvaranje izbornika. To je moglo biti učinjeno u jednoj funkciji i prekidaču za povratni poziv - osim što zapravo trebamo animirati dva različita elementa u isto vrijeme. Nažalost, ovo nije zadano ponašanje za jQuery pa moramo pribjeći alternativnoj sintaksi.
 Nazvani su dva elementa na koje ciljamo gornjoj traci i pagebody. Unutarnje sadržajno područje s bijelom pozadinom je cijelo tijelo stranice; međutim, na vrhu stranice je fiksna pozicija naslovne trake. To znači da se prirodno neće animirati na stranici, a mi moramo koristiti poseban poziv. Otvaranje je postavljeno tako da pritisne lijevo od 290px (gotovo cijela 300px nav širina), a funkcija zatvaranja je povlači.
 Učitavanje dinamičkog sadržaja
 Gornji kod je jednostavan za brigu o animaciji. I teoretski to je sve što vam je potrebno za tako jednostavnu mobilnu web stranicu - ali želim dodati malo više.
 Svaki put kada korisnik klikne na vezu izbornika, želimo zatvoriti trenutnu navigaciju i prikazati gif za učitavanje dok tražimo sadržaj stranice. Nakon toga, kada dovršimo uklanjanje gif slike i učitavanje sve unutar. Ovo je fantastično jer čak možemo koristiti statične .html stranice za sadržaj. Nema PHP ili Ruby ili Perl ili bilo kojeg pozadinskog jezika kako bi stvari bile neuredne.
 Upravljanje klikovima
 Prije svega želimo testirati kada naši korisnici kliknu na gumbe za navigaciju. To će zaustaviti normalno href vrijednost od učitavanja i umjesto toga možemo koristiti vlastite funkcije za prikaz vanjskog sadržaja.
 // učitavanje sadržaja stranice za navigaciju $ ("a.navlink"). live ("klik", funkcija (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = '„; 
 Sada otvaramo izbornik za bilo koje sidro s razredom navlink. Kad god korisnik klikne na jednu od tih veza, zaustavit ćemo je od učitavanja i postavljanja varijable za cijeli URL. Postavio sam i varijablu za sadržaj HTML kako bi uključio standardni učitavač slika. Ako želite prilagoditi vlastiti, preporučujem Ajaxload.
 Ajax .load ()
 U tom smislu postoje dva različita dijela koje sam uredno razbio. Kôd ispod je naš prvi bit koji zatvara navigacijski izbornik i pomiče ukupni prozor dokumenta sve do vrha. Želimo zamijeniti sadržaj unutarnjeg tijela malom animacijom za učitavanje, a korisnici to ne mogu vidjeti ako gledaju na dnu stranice.
 closeme (); $ (funkcija () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Sada napokon želimo zamijeniti sadržaj unutarnjeg tijela našom slikom i dohvatiti vanjsku stranicu za učitavanje. Obično će to potrajati samo nekoliko stotina milisekundi ili čak i brže, tako da sam postavila funkciju timeout.
 content.html (imgloader); setTimeout (funkcija () content.load (linkhtmlurl, funkcija () / * bez povratnog poziva * /), 1200);
 To će pauzirati 1200 milisekundi prije učitavanja novog sadržaja. Za moj demo ovo izgleda puno bolje i daje vam predodžbu o tome kako će se aplikacija ponašati na sporijim internetskim vezama.
 
 Zaključak
 Potičem sve web-programere da preuzmu izvorni kod tutoriala i sami se igraju. To je takav osnovni primjer onoga što se može postići s HTML / CSS3 i dodirom JavaScript učinaka. Izrada mobilnih zaslona jednostavnija je nego ikada s medijskim upitima i proširivim web-preglednicima.
 Pogledajte možete li primijeniti bilo koji od ovih kodova u budućim web-projektima. Izgradnja mobilnih aplikacija umjetnost je poput web dizajna i zahtijeva puno predanosti i prakse. Nadam se da ovaj tutorial može biti dobra polazna točka za samo nekoliko entuzijastičnih programera. Ako imate pitanja ili misli o kodu, slobodno ih podijelite s nama u području za raspravu.