Mobiilirakenduse disain / Dev Beginner's Guide to jQuery Mobile

Viimase 2-3 aasta jooksul oleme näinud mobiilsete veebisaitide brauserite ja operatsioonisüsteemide tugevat tuge. Eelkõige tuleb meelde Apple'i iOS ja Google'i Android-platvormid. Aga teised nagu PalmOS ja Blackberry on endiselt segatud. Kuni viimase ajani oli väga raske ühele mobiiliteemale sobitada kõikidesse nendesse platvormidesse.

JavaScript oli algus, kuid siiani ei ole ühtegi tõeliselt ühendatud raamatukogu. jQuery Mobile võtab kõik jQuery parimad omadused ja edastab need mobiilipõhisele veebiallikale. Raamatukogu on pigem raamistik, mis sisaldab HTML-elementide animatsioone, üleminekuefekte ja automaatseid CSS-stiile. Selles juhendis loodan tutvustada platvormi viisil, mis võimaldab teil end mugavalt jQuery mobiilirakendusi kujundada.

Funktsioonid ja operatsioonisüsteemi tugi

Põhjus, miks ma jQuery Mobile'i õppida soovin, on lihtsus. Kood ehitati jQuery tuumale ja sellel on aktiivne arendajate meeskond, kes kirjutab skripte ja vigu. Paljude funktsioonide hulka kuuluvad HTML5 tugi, Ajax-toega navigatsioonilinkid ja puudutus- / pühkimisjuhtumite käitlejad.

Tugi on telefonide vahel erinev ja see jaguneb A-C-st kolme kategooriasse. A on ülemine tasand, millel on täielik toetus jQuery Mobile'ile, B-l on kõik peale Ajax, C on HTML-i põhiline HTML-i, mis ei sisalda JavaScripti. Õnneks on enamik populaarseid operatsioonisüsteeme täielikult toetatud - lisasin allpool vaid mõne näite nimekirja.

• 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

Kui soovite rohkem teada saada, proovige lugeda oma ametlike dokumentide lehelt. See ei ole kirjutatud räpas ja tegelikult on väga lihtne jälgida. Nüüd keskendume jQuery mobiililehekülje kirjutamise alustele ja sellele, kuidas me saame väikese rakenduse ehitada!

Standardne HTML-mall

Oma esimese mobiilirakenduse töötamiseks on olemas kindel mall, mida peaksite alustama. See hõlmab jQuery baaskoodi koos mobiilse JS ja CSS-iga, mis kõik on väljaspool jQuery CDN-i. Vaadake allpool minu näite koodi.

Ainus välismaine element peaks siin olema kaks metakooditust. Tipp vaateava sildi värskendamiseks kasutatakse mobiilibrausereid täieliku suumiefekti kasutamiseks. Väärtuse määramine Laius = seadme laius määrab lehe laiuse täpselt telefoniekraani laiusele. Ja mis kõige parem, see ei lülita suumifunktsioone välja, sest jQuery Mobile saab kohanduda nihutavate paigutustega.

Järgmine metakood X-UA-ühilduv lihtsalt sunnib Internet Exploreri HTML-i esitama viimases iteratsioonis. Vanemad brauserid ja eriti mobiilid püüavad saada tundmatute renderdusvigade ümber.

Keha sisu konstrueerimine

Nüüd on see koht, kus jQuery mobile saab keeruliseks. Iga HTML-leht ei pruugi mobiililehel olla 1 leht. Raamistik kasutab HTML5 andme atribuute, mida saate lisades lisada kapriisile andmeid- eelnevalt. Sarnaselt data-role = "page" saab ühe HTML-failina seada mitmeks diviks, andes teile rohkem kui ühe lehe.

Seejärel liiguksite nende lehtede vahel ankurlingid ja unikaalne ID. See häälestus on lihtne lihtsa, lihtsa rakenduse jaoks. Kui teil on vaja ainult 3-5 lehekülge, siis miks mitte salvestada seda ühes failis? Kui teil pole palju kirjalikku sisu, siis proovige kasutada PHP-d, et säästa aega.

Kui olete kaotanud, kontrollige allolevat koodi.

 
 
 
Üles pealkirjariba
 
 
 
Näita teist lehte??
 
vihje: klõpsake alloleval nupul!
 
Meist
 
  
 
 
 
Lehekülg 2 Siin
 
 
 
vaid mõni ekstra sisu.
 
Ma mõtlen mine tagasi igal ajal.
 
 
   

Vaadake mõnda aega indeksilehekülje ankurlinki. Märkus Lisasin atribuudi data-role = "nupp" lingi seadistamiseks nupuna. Kuid selle asemel, et kasutada vaikimisi valitud stiile, lisame data-theme = "c". See lülitub 1/5 (teemad a-e) malle, mis on pakitud vaikimisi CSS-stiilidena jQ Mobile'is.

Minu nupp katab ka kogu lehekülje laiuse. Käitumise eemaldamiseks peame elementi blokeeri-inline kuvamiseks seadistama. Selle tegemiseks on atribuut data-inline = "true" mis tahes ankurnupule.

Päise ja jaluse ribad

Oma rakenduste üla- ja alaosas peaksite lisama päise ja jaluse sisu. See disainilahenduse stiil on sageli seotud iOS-i rakendustega, mis said esmakordselt populaarseks Apple'i mobiilse App Store'i abil. JQ Mobile kasutab päise, jaluse ja lehekülje sisu määratlemiseks andme-rolli atribuute. Vaatame neid valdkondi lühidalt.

Ülesriba nupud

Vaikimisi toetab ülemine riba kahte (2) linki sarnaselt teiste mobiilirakendustega. iOS vaikimisi kasutab a “tagasi” nupp vasakule ja sageli a “võimalusi” või “config” paremal.

 
 Seaded 
Lehekülg 2 Siin
 
 

Ülaltoodud kood keskendub lihtsalt meie About lehekülje div-konteinerisse koos päise sisuga. Täiendav HTML-atribuut data-add-back-btn = "true" toimib ainult siis, kui see on lisatud lehe andmete rollile. Eesmärgiks on automaatselt lisada tagasi-nupp, mis töötab sarnaselt teie brauseri tagasi-nupule.

Võiksime lisada tagasi-nupu käsitsi sarnase koodiga, mida kasutasime sisupiirkonnas. Aga ma arvan, et see võtab palju rohkem aega, eriti mitme lehekülje puhul. Kõik päisesektsioonis olevad ankurlingid valitakse vaikimisi vasakule / paremale. Kasutades class = "ui-btn-right" see asetas minu seaded nupp uuesti, nii et tagasi-nupule on vaba ruumi. Samuti kasutan sekundaarse teema stiile, et anda talle lisatäpsust!

Jaluse navigeerimine

Jaluste ala paljud ei tunne alguses väga kasulikku. See on koht, kus saab salvestada autoriõiguse asju ja tähtsamaid linke, kuid see võib olla sama lihtne lisada teie sisupiirkonna allosas. Nii et milline on jaluse kasutamine?

Noh parim näide, mida ma olen näinud, kasutab jalusruumi navigatsioonisüsteemina, kus vahekaardilingid näevad lehekülje navigeerimist. Seal on palju võimalusi, kus saab valida täisekraani efekte, lisada ikoone, kohandada paigutust ja mõningaid muid atribuute. Kuid ehitame lihtsalt lihtsa jalusnupu 3 nupuga, et saada ettekujutus sellest, kuidas see toimib.

• Eelvaade Live Demo

Nii et siin on mõned lehekülje jaotise jaluskoodid. data-role = "navbar" tuleb lisada konteineri elemendile, mis sisaldab korrastamata nimekirja ja mitte UL elementi ise. Iga loendi linki käsitletakse vahekaardina, mis seejärel jaguneb võrdselt lingide koguarvu alusel. Täiendav klass ui-body-b lihtsalt lisab esteetilisi mõjusid, kui vahetame mõne olemasoleva stiili vahel.

Kui märkate esimesel nupul, on mul omadus data-direction = "reverse". Kuigi ma sain kasutada tagasi-nupu seadistust, nagu varem, et tagasi pöörduda avalehele, olen kasutanud selle lehe ID-d #index. Vaikimisi liigub rakenduse aken paremale, mis näib üsna kleepuv, kuna eeldate, et animatsioon liigub tagasi. Kui teil on aega, saate nende animeeritud efektidega veelgi rohkem mängida. Vaadake jQuery dokumentatsiooni üleminekuinfo lehte.

Ajax & Dynamic Pages

Esimene segment on avanud olulised punktid mobiilirakenduse loomiseks jQueryga. Aga ma tahan alustada uut rakendust, mis laadib andmeid väliselt lehelt. Ma kasutan väga lihtsat PHP skripti $ _REQUEST [] muutuv ja kuvab vastavalt väikese Dribbble'i. Alltoodud ekraaniekraan peaks andma teile idee, mida me ehitame.

Kõigepealt valmistan vaikemallile lehe index.html. Selle avakuva puhul kasutan loendivaate seadistamist, et kuvada iga link järjekorras. Seda tehakse sisupiirkonnas a-ga data-role = "listview" atribuut loendi konteineris. Sama päise kraami väljavõtmine nagu varem, lisasin selle uue indeksi lehelt kogu oma koodi.

 
 
 
Oktoober 2011 Shots
 
 
 
 
Esimene pilt
 
Teine pilt
 
Kolmas pilt
 
Neljas pilt
 
 
  
   

Iga loendivaates olevad ankurlingid osutavad samale failile - index.php. Kuid me liigume parameetrisse imgid taotluse muutujana. Failis image.php võtame ID ja testime seda 4 eelseadistatud väärtusega. Kui mõni vaste sobib, kasutame sobivat kujutise URL-i ja pealkirja, vastasel juhul kuvame lihtsalt vaikimisi Dribbble'i võtte.

Image Loader Script

Image.php skriptil on ikka veel koodisse lisatud vaikimisi jQuery mobiilimall. Tegelikult jagab see väga sarnast päist ja jalust, välja arvatud meie tagasilinkide atribuudi lisamine data-add-back-btn = "true". Pange tähele, et see nupp kuvatakse ainult siis, kui oleme pärit index.html-st! Proovige otse image.php laadimist ja midagi ei kuvata, kuna pole “tagasi” liikuda.

Ma arvan, et me saame koodi mõnevõrra rohkem mõista, uurides kõigepealt oma PHP loogikat. Me kasutame a lüliti / juhtum meetod 4 erineva ID kontrollimiseks ja päise pealkirja, pildi URL-i ja kunstniku algallika lingi esitamiseks.

Kõik tundub üsna lihtne - isegi algaja PHP dev peaks olema võimeline järgima! Ja kui sa ei saa aru, ei ole jQuery koodi jaoks niikuinii oluline, nii et ärge muretsege. Me peaksime nüüd vahetama ja vaatama selle uue lehe koostatud malli. Kogu HTML-kood lisatakse pärast seda kogu PHP plokki. Ma kasutasin “pilte” konteineri jaoks ja seadistage päise muutmiseks iga uue foto puhul.

 
 
 
 
 
 Vaata originaali
 
 
  
 

Võite ilmselt näha, kui lihtne see demo on. Kuid kogu eesmärk on näidata jQuery mobiiltelefoni mastaapsust. PHP-d saab hõlpsasti segusse lisada ja mõningaid arendustunde saab tõeliselt puhtad rakendused välja tuua.

Fancy Design koos pisipiltidega

Viimane lisatud efekt, mida me rakendame, on pisipiltide kasutamine, et elavdada loendit. Ma jagan ka teksti pealkirja ja kirjelduskasti, et kuvada nii kunstiteose pealkiri kui ka esitaja nimi.

Alustada Photoshopi avamist ja luua 80 × 80 px dokumendi. Ma kavatsen iga pildi suuruse kiiresti ümber ja salvestada pisipildid, et need vastaksid. Seejärel värskendage loendivaate elemente, mis peaksid sisaldama veel mõnda elementi.

Vaadake allolevat koodi ja minu demo näidet, et näha, mida ma mõtlen.

[Eelvaade Live Demo]

 
 
  
Wunderkit'i ülesanded
 
Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
Scott Hill
 
  
Foorumi rakendus Facebookile
 
poolt Ionut Zamfir
 
  
Twitter
 
Sam Jones
 
 
 

Klassid ui-li-rubriik ja ui-li-desc lisatakse vaikimisi jQuery Mobile'i stiili lehele. See on sarnane pildiklassile ui-li-thumb mis suurendab automaatselt iga loendivaate riba vastavalt pildi kõrgusele. Nüüd saab siit rohkem ehitada animatsioonidele, leheküljeefektidele, stiililehtedele jne.

Või võite alustada varundussüsteemi loomist uute piltide üleslaadimiseks ja loendisse lisatavate pisipiltide automaatseks trimmimiseks. JQuery Mobile'i kasutamisel on nii palju paindlikkust, et peaaegu ei saa seda märgistada ainult JavaScripti raamatukoguna. See on rohkem kui terve HTML5 / CSS / jQuery raamistik kiirete ja skaleeritavate mobiilirakenduste loomiseks.

Järeldus

Selle artikli kirjutamise järel on jQuery Mobile meeskond ametlikult välja andnud koodiraamatukogu RC1.0. See tähendab, et enamik, kui mitte kõik suuremad veaparandused on lõhutud ja testijad hakkavad nüüd täielikku vabastamist. Sellepärast ei leia te veebis kogu informatsiooni.

Kuid kuude eel on veebiarendajad kindlasti suundumust tõusnud. Nutitelefonide tohutu kasvu tõttu kasvavad mobiilirakendused ja isegi mobiilsed veebipõhised paigutused populaarsemaks. Veebiarendajatel ei ole aega õppida täielikku programmeerimiskeelt Android / iOS-rakenduste loomiseks. Seega on jQuery Mobile õhuke alternatiiv, mis sisaldab toetust enamiku mobiilsidetööstuse tarkvarale ja jätkab iga päev aktiivse arendaja kogukonnaga kasvamist.