Dizajn mobilnih aplikacija / Vodič za početnike za jQuery Mobile

Tijekom proteklih 2-3 godina vidjeli smo ogroman rast podrške za preglednike i OS za mobilne web-lokacije. Najupečatljivije su Appleove iOS i Googleove Android platforme. Ali drugi poput PalmOS-a i Blackberry-a još uvijek su u mješavini. Sve do nedavno bilo je vrlo teško povezati jednu mobilnu temu na sve te platforme.

JavaScript je bio početak, ali do sada nije postojala uistinu jedinstvena knjižnica. jQuery Mobile preuzima sve najbolje značajke jQuery-a i prenosi ih na mobilni web-izvor. Knjižnica je više poput okvira koji uključuje animacije, efekte prijelaza i automatske CSS stilove za osnovne HTML elemente. Nadam se da ću u ovom priručniku predstaviti platformu na način da se možete ugodno osmisliti vlastite JQuery mobilne aplikacije.

Značajke i podrška za OS

Razlog zašto predlažem učenje jQuery Mobile preko bilo kojeg drugog okvira je jednostavnost. Kôd je izgrađen na jQuery jezgri i ima aktivan tim programera koji pišu skripte i uređuju bugove. Od mnogih značajki uključuju podršku za HTML5, navigacijske veze s Ajaxom i rukovatelje događajima s dodirom / prevlačenjem.

Podrška varira između telefona i raspoređena je u grafikon od 3 kategorije od A-C. A je najviši red koji se može pohvaliti punom podrškom za jQuery Mobile, B ima sve osim Ajaxa dok je C osnovni HTML s malo-to-no JavaScript. Srećom, većina popularnih operativnih sustava je u potpunosti podržana - dodao sam popis od samo nekoliko primjera.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Kupina 6.0, kupina 7
• Palm WebOS 1.4-2.0, 3.0

Ako želite saznati više, pokušajte čitati na njihovoj službenoj stranici s dokumentima. Nije napisan u nerazumljivim riječima i zapravo se osjeća vrlo lako slijediti. Sada ćemo se usredotočiti na osnove pisanja jQuery mobilne stranice i kako možemo izgraditi malu aplikaciju!

Standardni HTML predložak

Da biste dobili svoju prvu mobilnu aplikaciju koja radi, postavite predložak s kojim biste trebali početi. To uključuje osnovni kod jQuery zajedno s mobilnim JS i CSS, sve vanjske hostirane iz jQuery CDN. Pogledajte moj primjer u nastavku.

Jedini strani elementi ovdje bi trebali biti dvije meta oznake. Vrh Početni prikaz oznaka ažurira mobilne preglednike kako bi koristila puni efekt zumiranja. Postavljanje vrijednosti širina = uređaja širine postavit će širinu stranice točno na širinu zaslona telefona. I najbolje od svega, ne onemogućuje značajke zumiranja budući da se jQuery Mobile može prilagoditi promjenama izgleda.

Sljedeća meta oznaka X-UA-kompatibilan samo prisiljava Internet Explorer da prikaže HTML u svojoj najnovijoj iteraciji. Stariji preglednici i posebno mobilni će pokušati zaobići nepoznate greške u prikazivanju.

Konstruiranje sadržaja tijela

Sada je to mjesto gdje jQuery mobile može biti lukav. Svaka HTML stranica nije nužno jedna stranica na mobilnoj web-lokaciji. Okvir koristi HTML5-ove atribute podataka, koje možete dodati u hir podaci- unaprijed. Na sličan način podataka uloga = „stranica” može se postaviti na više divova u jednoj HTML datoteci, što vam daje više od jedne stranice.

Potom biste se kretali između tih stranica s veznim vezama i jedinstvenim ID-om. Ova je postavka dobra ideja za osnovne, jednostavne aplikacije. Ako vam je potrebno samo 3-5 stranica, zašto ih ne pohranite u jednu datoteku? Osim ako imate mnogo pisanog sadržaja, u tom slučaju pokušajte koristiti PHP kako biste uštedjeli vrijeme.

Provjerite primjer kôda u nastavku ako ste izgubljeni.

 
 
 
Gornja naslovna traka
 
 
 
Pokaži drugu stranicu??
 
Savjet: kliknite gumb ispod!
 
O nama
 
  
 
 
 
Ovdje
 
 
 
samo neki dodatni sadržaj.
 
Mislim, možeš vratite se u bilo koje vrijeme.
 
 
   

Za trenutak pogledajte vezu sidra s indeksne stranice. Primijetio sam da sam dodao atribut podataka uloga = „gumb” za postavljanje veze kao gumba. Ali umjesto da koristimo zadane stilove koje uključimo podaci-tema = "c". Ovo se mijenja između 1 od 5 (teme a-e) predložaka koji se po defaultu pakiraju kao CSS stilovi unutar jQ Mobile.

Moj gumb također obuhvaća cijelu širinu stranice. Da biste uklonili ponašanje, moramo postaviti element od bloka do umetnutog prikaza. Atribut za to jest podataka inline = "true" koje možete dodati na bilo koji gumb sidra.

Trake zaglavlja i podnožja

Uz sam vrh i dno aplikacija dodajte sadržaj zaglavlja i podnožja. Ovaj stil dizajna često se pripisuje iOS aplikacijama koje su postale popularne pomoću Appleove mobilne App Store. jQ Mobile koristi atribute uloge podataka za definiranje zaglavlja, podnožja i sadržaja stranice. Uzmimo kratak pogled na ova područja.

Gumbi na vrhu trake

Prema zadanim postavkama gornja traka podržava skup od dvije (2) veze na sličan način kao i druge mobilne aplikacije. iOS definira korištenje a “leđa” s lijeve strane i često “opcije” ili “konfig” na desno.

 
 postavke 
Ovdje
 
 

Gornji kôd samo se fokusira na kontejner div za našu stranicu O programu i sadržaj zaglavlja. Dodatni HTML atribut podataka dodatak back-BTN = "true" će raditi samo kada se doda u ulogu podataka stranice. Svrha je da se automatski uključi gumb za povratak koji funkcionira slično tipki za povratak preglednika.

Mogli bismo ručno dodati gumb za povratak sa sličnim kodom koji smo koristili u području sadržaja. Ali osjećam da je potrebno mnogo više vremena za postavljanje posebno na više stranica. Sve sidrene veze unutar zaglavlja bit će zadane u položajima lijevog / desnog gumba. Pomoću class = "UI-BTN-desno" ovo je ponovno postavilo moj gumb za postavke tako da ima slobodnog prostora za gumb za povratak. Isto tako koristim sekundarne stilove tema kako bih mu dao neki dodatni spunk!

Navigacija podnožja

Područje podnožja na početku se ne osjeća vrlo korisno. To je mjesto na kojem možete pohranjivati ​​stvari o autorskim pravima i važnije veze, ali to se može lako dodati i na dnu područja sadržaja. Dakle, što dobro koristi podnožje?

Najbolji primjer koji sam vidio koristi prostor podnožja kao navigacijski sustav gdje se linkovi na karticama pojavljuju za kontrolu navigacije po stranicama. Postoji mnogo opcija u kojima možete odabrati efekte cijelog zaslona, ​​dodati ikone, prilagoditi položaj i nekoliko drugih atributa. Ali napravimo jednostavnu navigaciju s podnožjem s 3 gumba da bismo dobili ideju o tome kako to funkcionira.

• Pregled uživo Demo

Dakle ovdje je neki kod podnožja za odjeljak o stranici. podataka uloga = „NavBar” treba dodati elementu kontejnera koji ima neuređeni popis, a NE UL element. Svaka veza unutar popisa tretira se kao traka s karticama, koja se zatim jednako dijeli na temelju ukupnog broja veza. Dodatna klasa UI tijela-b samo dodaje estetske efekte dok se prebacujemo između nekoliko dostupnih stilova.

Ako primijetite na prvom gumbu imam atribut podataka smjer = „obrnutom”. Iako sam mogao koristiti stražnji gumb za povratak kako bih se vratio na početnu stranicu, umjesto toga sam koristio ID stranice #indeks. Prema zadanim postavkama prozor aplikacije će se prebaciti u desno, što izgleda prilično neugodno jer očekujete da će se animacija pomicati unatrag. Možete se igrati s još više tih animiranih efekata ako imate vremena. Pogledajte stranicu s informacijama o prijelazima u dokumentaciji jQuery.

Ajax i dinamičke stranice

Prvi segment je stvarno otvorio ključne točke za izgradnju mobilne aplikacije s jQuery. Ali želim pokrenuti novu aplikaciju koja učitava podatke s vanjske stranice. Ja ću koristiti vrlo jednostavan PHP skriptu za postizanje $ _REQUEST [] varijable i prikazati mali Dribbble snimak u skladu s tim. Donji prikaz zaslona trebao bi vam dati ideju o tome što ćemo graditi.

Prvo ću postaviti index.html stranicu postavljenu na zadani predložak. Za ovaj početni zaslon koristim postavke prikaza popisa za prikaz svake veze u redu. To se radi na području sadržaja s a podataka uloga = „ListView” atribut na spremniku popisa. Rezanjem istih zaglavlja kao i prije, dodao sam sav svoj kôd s ove nove stranice indeksa u nastavku.

 
 
 
Snimke u listopadu 2011
 
 
 
 
Prva slika
 
Druga slika
 
Treća slika
 
Četvrta slika
 
 
  
   

Svaka od sidrenih veza u prikazu popisa pokazuje na istu datoteku - index.php. Ali prolazimo kroz parametar imgid kao varijabla zahtjeva. Na image.php datoteci uzimamo ID i testiramo ga na 4 unaprijed postavljene vrijednosti. Ako se podudaraju, koristimo odgovarajući URL slike i naslov, inače ćemo prikazati zadani Dribbble snimak.

Skripta za učitavanje slika

Skripta image.php još uvijek ima zadani jQuery mobilni predložak dodan u kôd. On zapravo dijeli vrlo sličan zaglavlje i podnožje, osim dodatka atributa za povratnu vezu podataka dodatak back-BTN = "true". Primijetite da će se ovaj gumb pojaviti samo ako prvo dođemo iz index.html! Pokušajte izravno učitati image.php i ništa se neće pojaviti jer nema “leđa” za kretanje.

Mislim da možemo napraviti malo više smisla koda proučavanjem moje PHP logike. Koristimo a prekidač / slučaj da provjerite s 4 različita ID-a i navedite naslov zaglavlja, URL slike i izvornu vezu izvornog autora.

Sve se čini prilično jednostavnim - čak bi i početnik PHP-a trebao moći pratiti! A ako ne razumijete da to ionako nije važno za jQuery kod, stoga ne brinite. Trebali bismo se sada prebaciti i pogledati predložak koji sam izgradio na ovoj novoj stranici. Sav HTML kôd dodaje se nakon cijelog bloka PHP iznad. Upotrijebio sam ID “slika” za spremnik, pa čak i postavite zaglavlje kako biste ga mijenjali sa svakom novom fotografijom.

 
 
 
 
 
 Prikaz izvornika
 
 
  
 

Vjerojatno možete vidjeti koliko je ovaj demo pojednostavljen. No, cijela svrha je pokazati skalabilnost jQuery mobitela. PHP se lako može dodati u mješavinu i možete napraviti nekoliko zaista urednih aplikacija sa samo nekoliko sati razvoja.

Fancy dizajn s popisom Thumbnails

Još jedan posljednji dodatak koji možemo provesti jest upotreba sličica za oživljavanje stranice s popisom. Također ću podijeliti tekst u zaglavlje i okvir za opis kako bih prikazao naslov i umjetnikovo ime.

Za početak otvorite Photoshop i stvorite dokument od 80 × 80 piksela. Brzo ću re-size svaku sliku i spremiti sličice za svaku. Zatim ažuriranje stavki prikaza popisa trebamo uključiti još nekoliko elemenata.

Provjerite kod ispod i moj demo primjer da vidim na što mislim.

[Pregled uživo]

 
 
  
Zadaci Wunderkita
 
autor Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
Scott Hill
 
  
Aplikacija Forum za Facebook
 
autor: Ionut Zamfir
 
  
Cvrkut
 
autor Sam Jones
 
 
 

Razredi za UI-li-naslov i UI-li-opisa standardno se dodaju u jQuery Mobile stylesheet. To je slično klasi slike UI-li-palac koja automatski mijenja svaku traku prikaza popisa prema visini slike. Sada odavde možete više graditi na sučelju s animacijama, efektima stranica, stilovima, itd.

Ili alternativno možete početi s izgradnjom pozadinskog sustava za učitavanje novih slika i automatsko skraćivanje minijatura da biste ih uključili u popis. JQuery Mobile vam pruža toliko fleksibilnosti da je gotovo ne možete označiti samo kao JavaScript biblioteku. To je više čitav HTML5 / CSS / jQuery okvir za izgradnju brzih i prilagodljivih mobilnih aplikacija.

Zaključak

Od pisanja ovog članka jQuery Mobile tim službeno je izdao RC1.0 biblioteke koda. To znači da je većina, ako ne i sve glavne ispravke grešaka, zgnječene, a sada se testeri pripremaju za potpuno izdanje. Zbog toga nećete naći puno informacija na webu.

Ali kao mjesec unaprijed web programeri su sigurni da pokupite na trend. Mobilne aplikacije, pa čak i mobilne web stranice postaju sve popularnije s velikim porastom broja pametnih telefona. Web programeri nemaju vremena učiti puni programski jezik za izgradnju Android / iOS aplikacija. Tako je jQuery Mobile vitka alternativa koja uključuje podršku za većinu softvera za mobilnu industriju i svakodnevno raste s aktivnom zajednicom razvojnih programera.