Mobile App Design / Dev Začetnik priročnik za jQuery Mobile

V zadnjih 2-3 letih smo opazili izjemno rast brskalnikov in OS podpore za mobilne spletne strani. Najpomembnejše so Appleove iOS in Googlove platforme Android. Toda drugi, kot so PalmOS in Blackberry, so še vedno v mešanici. Do nedavnega je bilo zelo težko povezati eno mobilno temo v vse te platforme.

JavaScript je bil začetek, vendar doslej ni bilo nobene resnično enotne knjižnice. jQuery Mobile jemlje vse najboljše lastnosti jQuery in jih prenaša na mobilni spletni vir. Knjižnica je bolj podobna ogrodju, ki vključuje animacije, učinke prehoda in samodejne stile CSS za osnovne elemente HTML. V tem priročniku upam, da vam predstavim platformo tako, da se boste lahko počutili udobno pri načrtovanju lastnih aplikacij za mobilne naprave jQuery.

Funkcije in podpora OS

Razlog, zakaj predlagam učenje jQuery Mobile nad katerim koli drugim okvirom, je preprostost. Koda je bila zgrajena na jedru jQuery in ima aktivno skupino razvijalcev, ki pišejo skripte in urejajo hrošče. Med številnimi funkcijami so podpora za HTML5, navigacijske povezave, ki jih poganja Ajax, in orodja za upravljanje dogodkov na dotik / swipe.

Podpora se razlikuje med telefoni in je razdeljena na tabelo treh kategorij od A-C. A je najvišja stopnja, ki se ponaša s polno podporo jQuery Mobile, B ima vse razen Ajaxa, medtem ko je C osnovni HTML z malo-do-no JavaScript. Na srečo je večina priljubljenih operacijskih sistemov v celoti podprta - spodaj sem dodal le nekaj primerov.

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

Če želite izvedeti več, poskusite prebrati na njihovi uradni strani z dokumenti. To ni napisano v žuborenje in dejansko se počuti zelo enostavno slediti skupaj. Sedaj se osredotočimo na osnove pisanja jQuery mobilne strani in kako lahko zgradimo majhno aplikacijo!

Standardna predloga HTML

Če želite, da bo vaša prva mobilna aplikacija delovala, je nastavljena predloga, s katero morate začeti. To vključuje osnovno kodo jQuery skupaj z mobilnimi JS in CSS, vse zunanje gostiteljice iz jQuery CDN. Oglejte si moj primer spodnje kode.

Edini tuji elementi bi morali biti dve meta oznaki. Vrh pogled označi posodobitve mobilnih brskalnikov za uporabo polnega učinka povečave. Nastavitev vrednosti width = širina naprave nastavite širino strani na točno širino zaslona telefona. In najboljše od vsega, ne onemogoča funkcij zoom, saj se jQuery Mobile lahko prilagodi prestavljanju.

Naslednja metaoznaka X-UA-Združljiv samo prisili Internet Explorer, da prikaže HTML v svoji najnovejši iteraciji. Starejši brskalniki in zlasti mobilni bodo poskušali zaobiti nepoznane napake pri prikazovanju.

Izdelava vsebine telesa

Zdaj je to tisto, kjer lahko jQuery mobile postane težavno. Vsaka stran HTML ni nujno ena stran na mobilni strani. Okvir uporablja atribute podatkov HTML5, ki jih lahko ustvarjate s kaprico z dodajanjem podatkov- vnaprej. Podobno data-role = "page" lahko nastavite na več divov v eni datoteki HTML, kar vam daje več kot eno stran.

Nato se premikate med temi stranmi s sidrnimi povezavami in enoličnim ID-jem. Ta nastavitev je dobra ideja za osnovne, preproste aplikacije. Če potrebujete le 3-5 strani, zakaj jih ne shranite v eno samo datoteko? Razen če imate veliko pisnih vsebin, v tem primeru poskusite uporabiti PHP, da prihranite čas.

Če ste izgubljeni, preverite spodnji primer kode.

 
 
 
Zgornja naslovna vrstica
 
 
 
Pokaži drugo stran??
 
namig: kliknite spodnji gumb!
 
O nas
 
  
 
 
 
Page 2 Tukaj
 
 
 
samo nekaj dodatne vsebine.
 
Mislim, lahko Pojdi nazaj kadarkoli.
 
 
   

Za trenutek si oglejte sidrno povezavo na indeksni strani. Obvestilo sem dodal atribut data-role = "gumb" za nastavitev povezave kot gumba. Namesto privzetih stilov, ki jih vključimo data-theme = "c". To preklopi med 1 od 5 (tem a-e) predlogami, ki so privzeto pakirane kot CSS stili znotraj jQ Mobile.

Moj gumb obsega tudi celotno širino strani. Za odstranitev obnašanja moramo nastaviti element od bloka do prikaza v vrstici. Atribut za to je data-inline = "true" ki jo lahko dodate na kateri koli sidrni gumb.

Vrstice glave in noge

V zgornjem in spodnjem delu aplikacij dodajte vsebino glave in noge. Ta slog oblikovanja se pogosto pripisuje aplikacijam iOS, ki so prvič postale priljubljene z uporabo Apple App Store. jQ Mobile za definiranje vsebine glave, noge in strani uporablja atribute podatkovne vloge. Oglejmo si kratek pregled teh področij.

Gumbi na vrhu vrstice

Zgornja vrstica privzeto podpira niz dveh (2) povezav na podoben način kot druge mobilne aplikacije. IOS privzeto uporablja a “nazaj” gumb levo in pogosto “opcije” ali “config” na desni.

 
 Nastavitve 
Page 2 Tukaj
 
 

Zgornja koda se osredotoča le na vsebnik div za našo stran O strani in vsebino glave. Dodatni atribut HTML data-add-back-btn = "true" bo deloval samo, ko bo dodan v vlogo podatkov za stran. Namen je samodejno vključitev gumba za nazaj, ki deluje podobno kot gumb za nazaj v vašem brskalniku.

Gumb za nazaj bi lahko dodali ročno s podobno kodo, kot smo jo uporabili na področju vsebine. Ampak menim, da je to potrebno veliko dlje, da nastavite posebej na več straneh. Vse povezave sidra v razdelku glave bodo privzete v levo / desno pozicijo gumba. Z uporabo class = "ui-btn-right" to je ponovno namestilo gumb Nastavitve, tako da je na voljo prostor za gumb Nazaj. Prav tako uporabljam sekundarne sloge teme, da mu dajem nekaj dodatnega spunk!

Navigacija noge

Področje, ki ga številni ne čutijo zelo koristne na prvi. To je kraj, kjer lahko shranite vsebine o avtorskih pravicah in pomembnejše povezave, vendar lahko to enostavno dodate tudi na dnu vsebine. Torej, kaj je dobro z uporabo noge?

Najboljši primer, ki sem ga videl, je prostor za noge kot navigacijski sistem, kjer se prikažejo povezave zavihkov, ki nadzorujejo navigacijo po straneh. Obstaja veliko možnosti, kjer lahko izberete celozaslonske učinke, dodate ikone, prilagodite umestitev in nekaj drugih lastnosti. Toda zgradimo preprosto navzgor s tremi gumbi, da dobimo idejo, kako to deluje.

• Predogled predstavitve v živo

Torej je tu nekaj kode za nogo za razdelek o strani. data-role = "navbar" na element vsebnika, ki vsebuje neurejen seznam, in NE UL elementa. Vsaka povezava na seznamu se obravnava kot vrstica z zavihki, ki se nato enakomerno porazdeli glede na skupno število povezav. Dodatni razred ui-body-b samo dodaja estetske učinke, ko preklapljamo med nekaj razpoložljivimi slogi.

Če opazite na prvem gumbu, imam atribut data-direction = "reverse". Čeprav lahko uporabim gumb za nazaj, kot sem se prej vrnil na domačo stran, sem namesto tega uporabil ID strani #index. Privzeto bo okno aplikacije prešlo v desno, kar je precej lepljivo, saj pričakujete, da se bo animacija premaknila nazaj. Lahko se igrate s še več animiranimi učinki, če imate čas. Oglejte si stran z informacijami o prehodih v dokumentaciji jQuery.

Ajax in dinamične strani

Prvi segment je resnično odprl ključne točke za izgradnjo mobilne aplikacije z jQuery. Ampak želim začeti novo aplikacijo, ki nalaga podatke iz zunanje strani. Jaz bom uporabljal zelo preprost PHP skript za doseganje $ _REQUEST [] spremenljivka in prikaže majhen strel Dribbble ustrezno. Spodnja slika, ki vam bo prikazana spodaj, vam bo dala idejo, kaj bomo gradili.

Najprej bom naredil index.html stran, ki bo nastavljena na privzeto predlogo. Za ta domači zaslon uporabljam nastavitve pogleda na seznam, da prikažem vsako povezavo v redu. To se naredi na področju vsebine z a data-role = "listview" atribut na vsebniku seznama. Z izrezovanjem enake glave kot prej sem dodal vso svojo kodo iz te nove indeksne strani spodaj.

 
 
 
Oktober 2011 Posnetki
 
 
 
 
Prva slika
 
Druga slika
 
Tretja slika
 
Četrta slika
 
 
  
   

Vsaka od sidrnih povezav v mojem pogledu s seznama kaže na isto datoteko - index.php. Ampak mi greva skozi parameter imgid kot spremenljivka zahteve. V datoteki image.php vzamemo ID in ga preizkusimo na 4 prednastavljene vrednosti. Če se ujemajo, uporabimo ujemajoči se URL slike in naslov, sicer pa prikažemo privzeti posnetek Dribbble.

Skript za nalaganje slik

Skript image.php še vedno vsebuje privzeto predlogo jQuery, ki je dodana v kodo. Dejansko ima zelo podobno glavo in nogo, razen dodatka atributa »back link« data-add-back-btn = "true". Obvestilo Ta gumb bo prikazan samo, če najprej pridemo iz index.html! Poskusite neposredno naložiti image.php in nič se ne bo prikazalo, ker ni “nazaj” , da se premaknete na.

Mislim, da lahko naredimo malo več smisla kode, tako da najprej preučim svojo PHP logiko. Uporabljamo a stikalo / primeru za preverjanje 4 različnih ID-jev in navedbo naslova glave, URL-ja slike in povezave izvornega izvajalca.

Vse se zdi precej enostavno - celo novinec PHP bi moral slediti skupaj! In če ne razumete, to ni pomembno za jQuery kodo, zato ne skrbite. Sedaj bi morali zamenjati in si ogledati predlogo, ki sem jo ustvaril na tej novi strani. Vsa HTML koda je dodana po tem celotnem bloku PHP zgoraj. Uporabil sem ID “slik” za posodo in celo nastavite glavo, da se spremeni z vsako novo fotografijo.

 
 
 
 
 
 Ogled izvirnika
 
 
  
 

Verjetno lahko vidite, kako preprosta je ta demo. Toda celoten namen je prikazati razširljivost jQuery mobilnega telefona. PHP se lahko enostavno doda v mešanico in lahko ustvarite nekaj resnično čiste aplikacije s samo nekaj urnim razvojem.

Fancy Design s seznamom Thumbnails

Zadnji dodatni učinek, ki ga lahko izvajamo, je uporaba sličic za oživitev strani s seznamom. Tudi besedilo bom razdelil v polje z naslovom in opisom, da prikažem naslov umetnine in ime izvajalca.

Za začetek odprete Photoshop in ustvarite dokument 80 × 80 px. Hitro bom preoblikoval vsako sliko in shranil sličice, da se bodo ujemale. Nato posodobite elemente pogleda seznama in vključite še nekaj elementov.

Oglejte si spodnjo kodo in moj demo primer, da vidite, kaj mislim.

[Predogled predstavitve v živo]

 
 
  
Wunderkit naloge
 
Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
Scott Hill
 
  
Aplikacija Forum za Facebook
 
Ionut Zamfir
 
  
Twitter
 
Sam Jones
 
 
 

Razredi za ui-li-naslov in ui-li-desc se privzeto dodajo v slogovni jQuery. To je podobno razredu slike ui-li-thumb ki samodejno spremeni velikost vsake vrstice pogleda na seznam glede na višino slike. Zdaj lahko od tukaj ustvarite več na fronti z animacijami, učinki strani, slogovi itd.

Ali pa bi lahko začeli z izdelavo podpornega sistema za nalaganje novih slik in samodejno obrezovanje sličic, ki jih želite vključiti na seznam. Z jQuery Mobile je toliko prilagodljivosti, da je skoraj ne morete označiti le kot knjižnico JavaScript. To je bolj celoten okvir HTML5 / CSS / jQuery za izgradnjo hitrih in prilagodljivih mobilnih aplikacij.

Zaključek

Od pisanja tega članka je ekipa jQuery Mobile uradno izdala RC1.0 kode knjižnice. To pomeni, da je večina, če ne vsi glavni popravki napak, zgubljeni in zdaj testerji pripravljajo na popolno izdajo. Zaradi tega na spletu ne boste našli veliko informacij.

Ampak kot mesecev vnaprej spletni razvijalci so prepričani, da poberem na trendu. Mobilne aplikacije in celo mobilne spletne postavitve postajajo vse bolj priljubljene z velikim povečanjem števila pametnih telefonov. Spletni razvijalci nimajo časa za učenje celotnega programskega jezika za izdelavo aplikacij Android / iOS. Tako je jQuery Mobile vitka alternativa, ki vključuje podporo za večino programske opreme za mobilno industrijo, in še naprej narašča vsak dan z aktivno skupnostjo razvijalcev.