Mobile App Design / Dev Beginners Guide til jQuery Mobile

I løbet af de sidste 2-3 år har vi oplevet en enorm vækst i browser og OS support til mobile hjemmesider. Især Apples iOS og Googles Android-platforme kommer til at tænke på. Men andre som PalmOS og Blackberry er stadig i blandingen. Indtil for nylig var det meget svært at matche et enkelt mobiltema i alle disse platforme.

JavaScript var en start, men der har ikke været noget virkelig samlet bibliotek indtil nu. jQuery Mobile tager alle de bedste funktioner i jQuery og overfører dem til en mobilbaseret webkilde. Biblioteket er mere som en ramme, der omfatter animationer, overgangseffekter og automatiske CSS-stilarter til grundlæggende HTML-elementer. I denne vejledning håber jeg at introducere platformen på en måde, så du kan føle dig komfortabel med at designe dine egne jQuery-mobilapps.

Funktioner og OS Support

Grunden til at jeg foreslår at lære jQuery Mobile over andre rammer er enkelhed. Koden blev bygget på jQuery-kernen og har et aktivt team af udviklere, der skriver scripts og redigerer bugs. Af de mange funktioner er HTML5-support, Ajax-drevne navigationsforbindelser og touch / swipe event handlers.

Support varierer mellem telefoner og er brudt op i et diagram med 3 kategorier fra A-C. A er den øverste del, der kan prale med fuld support af jQuery Mobile, B har alt undtagen Ajax, mens C er grundlæggende HTML med lille til ingen JavaScript. Heldigvis understøttes de fleste af de populære operativsystemer fuldt ud - jeg tilføjede en liste nedenfor af blot et par eksempler.

• 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

Hvis du vil lære mere, så prøv at læse på deres officielle dokumentside. Det er ikke skrevet i gibberish og føles faktisk meget nemt at følge med. Lad os nu fokusere på det grundlæggende at skrive en jQuery-mobilside, og hvordan vi kan bygge en lille applikation!

Standard HTML-skabelon

For at få din første mobile app til at fungere er der en sæt skabelon, du skal starte med. Dette omfatter jQuery-basekoden sammen med mobil JS og CSS, alle eksterne hostede fra jQuery CDN. Tjek min eksempelkode nedenfor.

De eneste udenlandske elementer her skal være de to metatags. Toppen viewport tag opdateringer mobilbrowsere til at bruge en fuld zoom effekt. Indstilling af værdien width = device-width vil indstille sidebredden til nøjagtigt bredden af ​​telefonens skærm. Og det bedste af det gør det ikke muligt at deaktivere zoomfunktionerne, da jQuery Mobile kan tilpasse sig skiftende layouter.

Det næste metatag X-UA-Compatible bare tvinger Internet Explorer til at gøre HTML i den seneste iteration. Ældre browsere og især mobile vil forsøge at komme omkring ukendte gengivelsesfejl.

Konstruktion af kropsindholdet

Nu er det her, hvor jQuery mobile kan blive vanskelig. Hver HTML-side er ikke nødvendigvis 1 side på mobilwebstedet. Rammen gør brug af HTML5s dataattributter, som du kan oprette ved et indfald ved at tilføje data- på forhånd. På lignende måde data-role = "side" kan indstilles til flere divs i en enkelt HTML-fil, hvilket giver dig mere end en side.

Du vil så flytte mellem disse sider med anker links og et unikt ID. Denne opsætning er en god idé til grundlæggende, enkle apps. Hvis du kun har brug for 3-5 sider, hvorfor ikke gemme det hele i en enkelt fil? Medmindre du har meget skriftligt indhold, skal du i så fald prøve at bruge PHP for at spare tid.

Tjek koden nedenfor, hvis du går tabt.

 
 
 
Top titellinje
 
 
 
Vis en anden side??
 
Tip: Klik på knappen nedenfor!
 
Om os
 
  
 
 
 
Page 2 Her
 
 
 
bare lidt ekstra indhold.
 
Jeg mener, det kan du gå tilbage når som helst.
 
 
   

Tag et kig på ankerlinket fra indekssiden et øjeblik. Bemærk, jeg har tilføjet attributten data-role = "knappen" at opsætte linket som en knap. Men i stedet for at bruge standard stilarter, vi indbefatter data-tema = "c". Dette skifter mellem 1 af 5 (temaer a-e) skabeloner, der leveres som standard som CSS-stilarter inden for jQ Mobile.

Min knap spænder også over hele sidens bredde. For at fjerne adfærden skal vi indstille elementet fra blok til inlinevisning. Attributten til at gøre dette er data-inline = "true" som du kunne føje til enhver ankerknap.

Header og Footer Bars

Langs de aller øverste og nederste af dine applikationer skal du føje header og footer indhold. Denne design stil tilskrives ofte iOS-apps, som først blev populære ved hjælp af Apples mobil App Store. jQ Mobile bruger attributter af data-rolle til at definere overskrift, sidefod, og sideindhold. Lad os tage et kort kig på disse områder.

Top Bar Buttons

Som standard understøtter øverste bjælke et sæt to (2) links på samme måde som andre mobile apps. iOS standard til at bruge a “tilbage” knappen til venstre og ofte en “muligheder” eller “config” til højre.

 
 Indstillinger 
Page 2 Her
 
 

Koden ovenfor fokuserer kun på div-containeren for vores Om side sammen med header indhold. Den ekstra HTML-attribut data-add-back-BTN = "true" vil kun fungere, når den tilføjes til en sidedatatrolle. Formålet er at automatisk inkludere en tilbage-knap, som fungerer som din browser's tilbage-knap.

Vi kunne have tilføjet en tilbage-knap manuelt med lignende kode, som vi brugte i indholdsområdet. Men jeg føler, at det tager meget længere tid at installere specielt på flere sider. Alle ankerforbindelser inden for overskriftsafsnittet går som standard til venstre / højre knappositioner. Ved hjælp af class = "ui-Btn-højre" Dette genplacerede min Indstillinger-knap, så der er ledig plads til tilbageknappen. Også jeg bruger de sekundære tema stilarter til at give det lidt ekstra spunk!

Footer Navigation

Fodboldområdet mange ikke føler sig meget nyttige i starten. Det er et sted, hvor du kan gemme ophavsretlige ting og mere vigtige links, men det kan lige så nemt tilføjes i bunden af ​​dit indholdsområde. Så hvad god bruger fodfoden?

Nå det bedste eksempel jeg har set udnytter footer-plads som et navigationssystem, hvor fanebladene synes at styre sidens navigation. Der er mange muligheder, hvor du kan vælge fuldskærmseffekter, tilføje ikoner, justere placering og et par andre attributter også. Men lad os bare bygge en simpel footer nav med 3 knapper for at få en ide om, hvordan dette virker.

• Preview Live Demo

Så her er nogle footer-kode til siden om side. data-role = "navbar" skal tilføjes på beholderelementhuset en uordnet liste og IKKE selve UL-elementet. Hvert link i listen behandles som en faneblad, som derefter bliver ligeligt fordelt baseret på det samlede antal links. Den ekstra klasse af ui-organ-b tilføjer blot æstetiske effekter, da vi skifter mellem de få tilgængelige stilarter.

Hvis du bemærker på den første knap, har jeg attributten data-retningen = "omvendte". Selvom jeg kunne bruge opsætningen af ​​tilbage-knappen som før for at vende tilbage til hjemmesiden, har jeg i stedet brugt sidens id på #indeks. Som standard overgår appvinduet til højre, hvilket ser temmelig klæbrig ud, da du forventer, at animationen skal bevæge sig baglæns. Du kan lege med endnu flere af disse animerede effekter, hvis du har tid. Tjek oversigtsinfo-siden i jQuery-dokumentationen.

Ajax & Dynamic Pages

Det første segment har virkelig åbnet de vigtigste punkter til at opbygge en mobil app med jQuery. Men jeg vil starte en ny app, der indlæser data fra en ekstern side. Jeg bruger et meget simpelt PHP script til at nå $ _REQUEST [] variabel og vis et lille dribbles skud i overensstemmelse hermed. Skærmbilledet nedenfor skal give dig en ide om, hvad vi skal bygge.

Først vil jeg lave et index.html side sæt på standard skabelonen. Til denne startskærm bruger jeg en listevisningsopsætning til at vise hvert link i rækkefølge. Dette gøres i indholdsområdet med a data-role = "listevisning" attribut på listen container. Skære ud af de samme header ting som før, jeg tilføjede al min kode fra denne nye indeksside nedenfor.

 
 
 
Oktober 2011 skud
 
 
 
 
Første billede
 
Andet billede
 
Tredje billede
 
Fjerde billede
 
 
  
   

Hvert af ankerlinkene i min listevisning peger på den samme fil - index.php. Men vi passerer i parameteren imgid som en anmodningsvariabel. På filen image.php tager vi ID'et og tester det mod 4 forudindstillede værdier. Hvis nogen matcher vi bruger den matchende billedwebadresse og titel, ellers viser vi bare et standard Dribbble shot.

Image Loader Script

Image.php-scriptet har stadig den standard jQuery-mobilskabelon, der er tilføjet til koden. Det deler faktisk en meget lignende overskrift og sidefod, med undtagelse af tilføjelsen af ​​vores tilbage link attribut data-add-back-BTN = "true". Bemærk, at denne knap kun vises, hvis vi kommer fra index.html først! Prøv at indlæse image.php direkte, og der vises ikke noget, da der ikke er noget “tilbage” at flytte til.

Jeg tror, ​​at vi kan gøre en smule mere fornemmelse af koden ved først at undersøge min PHP logik. Vi bruger en kontakt / sag metode til at tjekke mod de 4 forskellige id'er og give en overskriftstitel, billedwebadresse og originalkilderkildelink.

Alt virker ret ligetil - selv en nybegynder PHP dev skal kunne følge med! Og hvis du ikke forstår det, er det alligevel ikke vigtigt at jQuery-koden, så rolig. Vi skal skifte nu og kigge på den skabelon, jeg har bygget inden for denne nye side. Hele HTML-koden er tilføjet efter den hele PHP-blok over. Jeg brugte ID'en til “billeder” for beholderen og endda opsætning af overskriften for at ændre med hvert nyt billede.

 
 
 
 
 
 Se originalen
 
 
  
 

Du kan nok se, hvor forenklet denne demo er. Men hele formålet er at demonstrere scalability af jQuery mobile. PHP kan nemt tilføjes i mixen, og du kan churn out nogle rigtig pæne apps med blot et par timers udvikling.

Fancy Design med miniaturebilleder

En sidste tilføjet effekt, som vi kan implementere, er brugen af ​​miniaturebilleder for at øge fortegnelsen. Jeg skal også opdele teksten i en overskrift og en beskrivelseskasse for at vise både kunsttitel og kunstnerens navn.

For at begynde at åbne Photoshop og oprette et 80 × 80 px dokument. Jeg vil hurtigt omforme hvert billede og gemme miniaturebilleder for at matche hver enkelt. Derefter skal vi opdatere listevisningselementerne med nogle få elementer.

Tjek koden nedenfor og mit demo eksempel for at se, hvad jeg mener.

[Preview Live Demo]

 
 
  
Wunderkit opgaver
 
af Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
af Scott Hill
 
  
Forum app til Facebook
 
af Ionut Zamfir
 
  
Twitter
 
af sam jones
 
 
 

Klasserne for ui-li-overskrift og ui-li-desc tilføjes som standard i jQuery Mobile stylesheet. Dette ligner billedklassen ui-li-thumb som automatisk ændrer størrelsen på hver listevisningslinje i henhold til billedhøjden. Nu herfra kan du bygge mere på fronten med animationer, bivirkninger, stylesheets osv.

Eller alternativt kan du begynde at opbygge et backend-system til at uploade nye billeder og automatisk trimme miniaturer for at medtage i listen. Der er så meget fleksibilitet med jQuery Mobile, at du næsten ikke kan mærke det som et JavaScript-bibliotek. Det er mere af en hel HTML5 / CSS / jQuery ramme for at opbygge hurtige og skalerbare mobilapps.

Konklusion

Som ved at skrive denne artikel har jQuery Mobile-holdet officielt sendt RC1.0 af kodebiblioteket. Dette betyder mest, hvis ikke alle de større fejlrettelser er blevet presset, og nu testere geares til en fuld udgivelse. På grund af dette vil du ikke finde en masse oplysninger på nettet.

Men som månederne fremskridt webudviklere er sikker på at afhente trenden. Mobile applikationer og endda mobile weblayouter vokser i popularitet med den enorme stigning i smartphones. Webudviklere har ikke tid til at lære et komplet programmeringssprog til at opbygge Android / IOS-apps. Således er jQuery Mobile et slank alternativ, der omfatter støtte til et flertal af mobilindustrien software og fortsætter med at vokse hver dag med et aktivt udvikler samfund.