Mobilās lietotnes dizains / Dev Beginner's Guide to jQuery Mobile

Pēdējo 2-3 gadu laikā mēs esam redzējuši milzīgu izaugsmi pārlūkprogrammu un operētājsistēmu atbalstam mobilajām tīmekļa vietnēm. Proti, atceras Apple iOS un Google Android platformas. Bet citi, piemēram, PalmOS un Blackberry, joprojām atrodas kombinācijā. Līdz nesenam laikam bija ļoti grūti saskaņot vienu mobilo tēmu ar visām šīm platformām.

JavaScript bija sākums, bet līdz šim nav bijusi patiesi vienota bibliotēka. jQuery Mobile ņem visas labākās jQuery funkcijas un tās pārnes uz mobilo tīmekļa avotu. Bibliotēka ir vairāk kā ietvars, kas ietver animācijas, pārejas efektus un automātiskos CSS stilus pamata HTML elementiem. Šajā rokasgrāmatā es ceru iepazīstināt platformu tā, lai jūs varētu justies ērti, veidojot savas jQuery mobilās lietotnes.

Funkcijas un OS atbalsts

Iemesls, kāpēc es iesaku mācīties jQuery Mobile pār jebkuru citu sistēmu, ir vienkāršība. Kods tika veidots, pamatojoties uz jQuery kodolu, un tam ir aktīva izstrādātāju komanda, kas raksta skriptus un rediģē kļūdas. No daudzajām funkcijām ir HTML5 atbalsts, Ajax darbināmas navigācijas saites un pieskārienu / zvēliens notikumu apstrādātāji.

Atbalsts ir atšķirīgs dažādos tālruņos un ir sadalīts 3 kategoriju diagrammā no A-C. A ir augstākais līmenis, kas lepojas ar pilnīgu atbalstu jQuery Mobile, B ir viss, izņemot Ajax, bet C ir pamata HTML ar maz-to-no JavaScript. Par laimi lielākā daļa populāro operētājsistēmu ir pilnībā atbalstītas - es pievienoju tikai dažus piemērus.

• 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

Ja vēlaties uzzināt vairāk, mēģiniet izlasīt viņu oficiālo dokumentu lapu. Tas nav rakstīts gibberish un patiesībā jūtas ļoti viegli sekot līdzi. Tagad pievērsīsimies jQuery mobilās lapas rakstīšanas pamatiem un tam, kā mēs varam izveidot nelielu lietojumprogrammu!

Standarta HTML veidne

Lai iegūtu pirmo mobilās lietotnes darbību, ir iestatīta veidne, kurai jāsāk. Tas ietver jQuery bāzes kodu kopā ar mobilo JS un CSS, visi ārējie, kas izvietoti no jQuery CDN. Pārbaudiet manu piemēru zemāk.

Vienīgajiem ārvalstu elementiem vajadzētu būt diviem meta tagiem. Augšā skats tag atjaunina mobilās pārlūkprogrammas, lai izmantotu pilnu tālummaiņas efektu. Vērtības iestatīšana platums = ierīces platums iestatīs lapas platumu tieši tālruņa ekrāna platumā. Un labākais no tā nav atslēgt tālummaiņas funkcijas, jo jQuery Mobile var pielāgoties mainīgajiem izkārtojumiem.

Nākamais metatags X-UA-saderīgs tikai liek Internet Explorer padarīt HTML jaunāko iterāciju. Vecākas pārlūkprogrammas un jo īpaši mobilās ierīces mēģinās apiet nepazīstamas atveidošanas kļūdas.

Ķermeņa satura veidošana

Tagad tas ir, ja jQuery mobile var iegūt grūts. Katra HTML lapa ne vienmēr ir 1 lapa mobilajā vietnē. Sistēmā tiek izmantoti HTML5 datu atribūti, kurus jūs varat veidot ar kaprīzēm, pievienojot datus- iepriekš. Līdzīgā veidā data-role = "page" vienā HTML failā var iestatīt vairākus divus, dodot jums vairāk nekā vienu lapu.

Tad jūs pārvietotos starp šīm lapām ar enkura saitēm un unikālu ID. Šī iestatīšana ir laba ideja vienkāršām lietotnēm. Ja jums ir nepieciešamas tikai 3-5 lappuses, tad kāpēc to visu saglabāt vienā failā? Ja vien jums nav daudz rakstiska satura, tādā gadījumā mēģiniet izmantot PHP, lai ietaupītu laiku.

Ja esat pazaudējis, pārbaudiet tālāk redzamo koda piemēru.

 
 
 
Augšējā virsrakstjosla
 
 
 
Rādīt citu lapu??
 
mājiens: noklikšķiniet uz tālāk redzamās pogas!
 
Par mums
 
  
 
 
 
Page 2 Šeit
 
 
 
tikai nedaudz papildu satura.
 
Es domāju, jūs varat Atgriezties jebkurā laikā.
 
 
   

Aplūkojiet enkura saiti no indeksa lapas uz brīdi. Piezīme Es pievienoju atribūtu data-role = "poga" lai iestatītu saiti kā pogu. Bet tā vietā, lai izmantotu noklusējuma stilus, mēs pievienojam data-theme = "c". Tas pārslēdzas starp 1 no 5 (tēmas a-e) veidnes, kas pēc noklusējuma tiek iepakotas kā CSS stili jQ Mobile.

Mana poga arī aptver visu lapas platumu. Lai noņemtu uzvedību, nepieciešams iestatīt elementu no bloka uz inline displeju. Lai to izdarītu, atribūts ir data-inline = "true" kuru jūs varētu pievienot jebkurai enkura pogai.

Galvene un kājenes stieņi

Visu programmu augšpusē un apakšpusē jāpievieno galvenes un kājenes saturs. Šis dizaina stils bieži ir saistīts ar iOS lietotnēm, kas vispirms kļuva populāras, izmantojot Apple mobilo App Store. jQ Mobile izmanto datu lomas atribūtus, lai definētu galveni, kājeni un lapas saturu. Apskatīsim īsi šīs jomas.

Augšējās joslas pogas

Pēc noklusējuma augšējā josla atbalsta divu (2) saišu kopumu līdzīgā veidā ar citām mobilajām lietotnēm. iOS pēc noklusējuma izmanto a “atpakaļ” poga pa kreisi un bieži vien “iespējas” vai “konfigur” pa labi.

 
 Iestatījumi 
Page 2 Šeit
 
 

Iepriekš redzamais kods ir tikai fokusēts uz divkontūru mūsu lapas lapai kopā ar galvenes saturu. Papildu HTML atribūts data-add-back-btn = "true" darbosies tikai tad, ja pievienots lapas datu lomai. Mērķis ir automātiski iekļaut atpakaļ pogu, kas darbojas līdzīgi jūsu pārlūkprogrammas atpakaļ pogai.

Mēs varētu būt pievienojuši atpakaļ pogu manuāli ar līdzīgu kodu kā mēs izmantojām satura jomā. Bet es uzskatu, ka tas nepieciešams daudz ilgāk, lai uzstādītu, jo īpaši vairākās lapās. Visas galvenes sadaļā esošās enkura saites noklusēs kreisās / labās pogas pozīcijās. Izmantojot class = "ui-btn-right" šī poga atkal novietoja manu iestatījumu pogu, lai aizmugures pogai būtu brīva vieta. Arī es izmantoju sekundāro tēmu stilus, lai dotu tai papildu spunktu!

Kājenes navigācija

Kājenes zona daudzos nejūtas ļoti noderīgi. Tā ir vieta, kur var glabāt autortiesības un svarīgākas saites, taču to var vienkārši pievienot satura apgabala apakšdaļā. Tātad, ko labu izmanto kājenes?

Labākais piemērs, ko es esmu redzējis, izmanto kājenes vietu kā navigācijas sistēmu, kur cilnes saites tiek kontrolētas lapas navigācijā. Ir daudz iespēju, kur jūs varat izvēlēties pilnekrāna efektus, pievienot ikonas, pielāgot izvietojumu un arī dažus citus atribūtus. Bet tikai veidosim vienkāršu kājenes navigāciju ar 3 pogām, lai iegūtu priekšstatu par to, kā tas darbojas.

• Priekšskatiet Live Demo

Tātad, šeit ir daži kājenes kods aptuveni lapas sadaļai. data-role = "navbar" jāievieto uz konteinera elementa, kuram ir neierobežots saraksts, un nevis UL elementu. Katra saraksta saite tiek uzskatīta par cilnes joslu, kas pēc tam kļūst vienādi sadalīta, pamatojoties uz kopējo saišu skaitu. Papildu klase ui-body-b vienkārši pievieno estētiskus efektus, kad pāriet starp dažiem pieejamajiem stiliem.

Ja pamanīsiet pirmo pogu, man ir šis atribūts data-direction = "reverse". Lai gan es varētu izmantot aizmugurējās pogas iestatīšanu kā iepriekš, lai atgrieztos mājas lapā, es izmantoju lapas ID #index. Pēc noklusējuma lietotņu logs pāriet uz labo pusi, kas izskatās diezgan lipīgs, jo jūs sagaidāt, ka animācija virzīsies atpakaļ. Ja jums ir laiks, varat spēlēt apkārt ar vēl vairāk šo animēto efektu. Pārbaudiet pārejas informācijas lapu jQuery dokumentācijā.

Ajax & Dynamic Pages

Pirmais segments ir atvēris galvenos punktus, lai izveidotu mobilo lietotni ar jQuery. Bet es vēlos sākt jaunu lietotni, kas ielādē datus no ārējās lapas. Es izmantošu ļoti vienkāršu PHP skriptu, lai sasniegtu $ _REQUEST [] mainās un uzrāda nelielu Dribbble attēlu. Zemāk redzamajam ekrānsaudzējumam vajadzētu dot jums priekšstatu, ko mēs veidosim.

Vispirms iestatīšu index.html lapu, kas iestatīta uz noklusējuma veidni. Šajā sākuma ekrānā es izmantoju saraksta skata iestatījumu, lai parādītu katru saiti kārtībā. Tas tiek darīts satura apgabalā ar a data-role = "listview" atribūtu saraksta konteinerā. Izgriežot to pašu galvenes saturu, kā iepriekš, es pievienoju visu savu kodu no šīs jaunās indeksa lapas tālāk.

 
 
 
2011. gada oktobris
 
 
 
 
Pirmais attēls
 
Otrais attēls
 
Trešais attēls
 
Ceturtais attēls
 
 
  
   

Katra no manas saraksta skatā esošajām saitēm norāda uz to pašu failu - index.php. Bet mēs iet garām parametrā imgid kā pieprasījuma mainīgo. Failā image.php mēs ņemam ID un pārbaudām to ar 4 iepriekš iestatītajām vērtībām. Ja kāda atbilstība tiek izmantota, mēs izmantojam atbilstošo attēla URL un nosaukumu, pretējā gadījumā mēs vienkārši parādīsim noklusējuma Dribbble shot.

Image Loader Script

Skriptam image.php joprojām ir noklusējuma jQuery mobilā veidne, kas pievienota kodam. Faktiski tam ir kopīga ļoti līdzīga galvene un kājene, izņemot mūsu atpakaļsaišu atribūta pievienošanu data-add-back-btn = "true". Ņemiet vērā, ka šī poga parādīsies tikai tad, ja mēs nāksim no index.html pirmās! Mēģiniet tieši ielādēt image.php, un nekas netiks rādīts, jo nav “atpakaļ” lai pārietu uz.

Es domāju, ka mēs varam padarīt koda mazliet jūtīgāku, vispirms izskatot manu PHP loģiku. Mēs izmantojam a slēdzis / gadījumā metode, lai pārbaudītu četrus dažādus ID un norādītu virsraksta nosaukumu, attēla URL un sākotnējo mākslinieka avota saiti.

Visi šķiet diezgan vienkārši - pat iesācējs PHP dev jāspēj sekot līdzi! Un, ja jūs nesaprotat, tas nav svarīgi jQuery kodam, tāpēc neuztraucieties. Mums tagad vajadzētu pārslēgties un apskatīt veidni, ko esmu izveidojis šajā jaunajā lapā. Visi HTML kodi tiek pievienoti pēc visa iepriekš minētā PHP bloka. Es izmantoju ID “attēlus” konteineram un pat iestatiet galveni, lai mainītos ar katru jaunu fotoattēlu.

 
 
 
 
 
 Skatīt oriģinālu
 
 
  
 

Iespējams, jūs redzēsiet, cik vienkāršs šis demo ir. Bet viss mērķis ir demonstrēt jQuery mobile mērogojamību. PHP var viegli pievienot maisījumam, un jūs varat izlaist dažas patiešām kārtīgas lietotnes tikai ar dažām stundām.

Fancy dizains ar saraksta sīktēliem

Viens no pēdējiem pievienotajiem efektiem, ko mēs varam īstenot, ir sīktēlu izmantošana, lai atdzīvinātu saraksta lapu. Es arī sadalīšu tekstu virsraksta un apraksta lodziņā, lai parādītu gan mākslas darbu nosaukumu, gan izpildītāja vārdu.

Lai sāktu atvērt Photoshop un izveidotu 80 × 80 px dokumentu. Es ātri pārvēršu katru attēlu un saglabātu sīktēlus, lai tie atbilstu katram. Pēc tam atjauniniet saraksta skata vienumus, mums jāiekļauj vēl daži elementi.

Pārbaudiet tālāk redzamo kodu un manu demo piemēru, lai redzētu, ko es domāju.

[Preview Live Demo]

 
 
  
Wunderkit uzdevumi
 
Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
Scott Hill
 
  
Forums lietotnei Facebook
 
Ionut Zamfir
 
  
Čivināt
 
Sam Jones
 
 
 

Klases ui-li-pozīcija un ui-li-desc pēc noklusējuma tiek pievienoti jQuery Mobile stilu lapā. Tas ir līdzīgs attēla klasei ui-li-thumb kas automātiski atjauno katra saraksta skata joslu atbilstoši attēla augstumam. Tagad no šejienes jūs varat veidot vairāk uz priekšu ar animācijām, lapu efektiem, stilu lapām utt.

Vai arī jūs varat sākt veidot backend sistēmu, lai augšupielādētu jaunus attēlus un automātiski sagrieztu sīktēlus, kas iekļauti sarakstā. JQuery Mobile ir tik daudz elastīga, ka to gandrīz nevarat iezīmēt tikai kā JavaScript bibliotēku. Tas ir vairāk par visu HTML5 / CSS / jQuery sistēmu ātru un pielāgojamu mobilo lietotņu izveidei.

Secinājums

Rakstot šo rakstu, jQuery Mobile komanda ir oficiāli izlaidusi koda bibliotēkas RC1.0. Tas nozīmē, ka lielākā daļa, ja ne visi galvenie kļūdu labojumi ir saspiesti, un tagad testētāji gatavojas pilnīgai atbrīvošanai. Šī iemesla dēļ tīmeklī netiks atrasts daudz informācijas.

Bet, tā kā iepriekšējos mēnešos tīmekļa izstrādātāji ir pārliecināti par šo tendenci. Mobilās lietojumprogrammas un pat mobilie tīmekļa izkārtojumi kļūst arvien populārāki, pateicoties milzīgajam viedtālruņu pieaugumam. Tīmekļa izstrādātājiem nav laika, lai uzzinātu pilnīgu programmēšanas valodu Android / iOS lietotņu veidošanai. Tādējādi jQuery Mobile ir slim alternatīva, kas ietver atbalstu lielākai daļai mobilās nozares programmatūras un turpina augt katru dienu ar aktīvu izstrādātāju kopienu.