Mobile App Design / Dev Beginner's Guide til jQuery Mobile

I løpet av de siste 2-3 årene har vi sett en enorm vekst i nettleser og OS-støtte for mobile nettsteder. Mest sett er Apples IOS og Googles Android-plattformer kommet til tankene. Men andre som PalmOS og Blackberry er fortsatt i blandingen. Inntil nylig var det svært vanskelig å matche et enkelt mobiltema inn i alle disse plattformene.

JavaScript var en start, men det har ikke vært et virkelig samlet bibliotek til nå. jQuery Mobile tar alle de beste funksjonene til jQuery og overfører dem til en mobilbasert webkilde. Biblioteket er mer som et rammeverk som inkluderer animasjoner, overgangseffekter og automatiske CSS-stiler for grunnleggende HTML-elementer. I denne veiledningen håper jeg å introdusere plattformen på en måte som du kan føle deg komfortabel med å designe dine egne jQuery-mobilapper.

Funksjoner og OS-støtte

Grunnen til at jeg foreslår at du lærer jQuery Mobile over noen andre rammer er enkelhet. Koden ble bygget på jQuery-kjerne og har et aktivt team utviklere som skriver skript og redigerer feil. Av de mange funksjonene er HTML5-støtte, Ajax-drevne navigasjonsforbindelser og touch / swipe-hendelseshåndterere.

Støtten varierer mellom telefoner og er delt inn i et diagram med 3 kategorier fra A-C. A er toppnivået som har full støtte fra jQuery Mobile, B har alt unntatt Ajax mens C er grunnleggende HTML med lite JavaScript. Heldigvis er de fleste av de populære operativsystemene støttet fullt ut - jeg har lagt til en liste under bare noen få 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 mer, prøv å lese opp på deres offisielle dokumentside. Det er ikke skrevet i gibberish og føles faktisk veldig enkelt å følge med. La oss nå fokusere på grunnleggende om å skrive en jQuery-mobilside og hvordan vi kan bygge en liten applikasjon!

Standard HTML-mal

For å få den første mobilappen din, er det en settmal du bør begynne med. Dette inkluderer jQuery-basekoden sammen med mobilen JS og CSS, alt ekstern vert fra jQuery CDN. Sjekk ut min eksemplarkode nedenfor.

De eneste utenlandske elementene her skal være de to metatagger. Toppen view tag oppdateringer mobilnettlesere for å bruke en full zoom-effekt. Innstilling av verdien width = enhetsbredde vil sette sidebredden til nøyaktig bredden på telefonskjermen. Og best av alt deaktiverer ikke zoomfunksjonene siden jQuery Mobile kan tilpasse seg skiftende layouter.

Den neste metataggen X-UA-Compatible bare tvinger Internet Explorer til å gjengi HTML-filen i den nyeste iterasjonen. Eldre nettlesere og spesielt mobile vil prøve å komme seg rundt ukjente gjengivelsesfeil.

Konstruksjon av kroppsinnholdet

Nå er det her hvor jQuery mobil kan bli vanskelig. Hver HTML-side er ikke nødvendigvis 1 side på mobilnettstedet. Rammene gjør bruk av HTML5s dataattributter, som du kan opprette på et innfall ved å legge til data- på forhånd. På lignende måte data-role = "side" kan settes til flere divs i en enkelt HTML-fil, og gir deg mer enn en side.

Du vil da flytte mellom disse sidene med ankerforbindelser og en unik ID. Dette oppsettet er en god ide for enkle, enkle apper. Hvis du bare trenger 3-5 sider, hvorfor ikke lagre alt i en enkelt fil? Med mindre du har mye skriftlig innhold, kan du i så fall prøve å bruke PHP for å spare tid.

Sjekk koden eksempelet nedenfor hvis du er tapt.

 
 
 
Topp tittellinje
 
 
 
Vis en annen side??
 
hint: klikk på knappen nedenfor!
 
Om oss
 
  
 
 
 
Page 2 Her
 
 
 
bare litt ekstra innhold også.
 
Jeg mener, det kan du gå tilbake når som helst.
 
 
   

Ta en titt på ankerlinken fra indekssiden et øyeblikk. Legg merke til at jeg la til attributtet data-role = "button" å sette opp linken som en knapp. Men i stedet for å bruke standardstilene vi inkluderer data-type = "c". Dette bytter mellom 1 av 5 (temaer a-e) maler som leveres som standard som CSS-stiler i jQ Mobile.

Min knapp spenner også over hele sidebredden. For å fjerne oppførselen må vi sette elementet fra blokk til inlinevisning. Attributtet for å gjøre dette er data-inline = "true" som du kan legge til på en anker knapp.

Header og Footer Bars

Langs toppen og bunnen av applikasjonene dine bør du legge til topptekst og bunntekstinnhold. Denne designstilen tilskrives ofte iOS-apper som først ble populære ved hjelp av Apples mobil App Store. jQ Mobile bruker attributter av datarolle for å definere topptekst, bunntekst og sideinnhold. La oss ta en kort titt på disse områdene.

Toppknappknapper

Som standard støtter topplinjen et sett med to (2) koblinger på samme måte som andre mobilapper. iOS defaults til å bruke a “tilbake” knappen til venstre og ofte en “opsjoner” eller “config” til høyre.

 
 innstillinger 
Page 2 Her
 
 

Koden ovenfor fokuserer bare på div-containeren for vår Om side sammen med topptekstinnhold. Den ekstra HTML-attributten data-add-back-btn = "true" vil bare fungere når det legges til en sidedatatrolle. Hensikten er å automatisk inkludere en tilbakeknapp som fungerer som nettleserens tilbakeknapp.

Vi kunne ha lagt en tilbakeknapp manuelt med lignende kode som vi brukte i innholdsområdet. Men jeg føler at dette tar mye lengre tid å sette opp, spesielt på flere sider. Alle ankerforbindelser i header-delen blir standard i venstre / høyre knappposisjon. Ved bruk av class = "ui-btn-rett" Dette re-posisjonert min Innstillinger-knapp, så det er ledig plass til tilbakeknappen. Også jeg bruker sekundære tema stiler for å gi det litt ekstra spunk!

Footer Navigation

Foten området mange ikke føler meg veldig nyttig først. Det er et sted hvor du kan lagre opphavsrettsspørsmål og mer viktige koblinger, men dette kan like enkelt legges til nederst i innholdsområdet. Så hvor bra bruker fotfoten?

Vel, det beste eksemplet jeg har sett, bruker benkerplass som et navigasjonssystem hvor fanekoblinger ser ut til å kontrollere sidens navigasjon. Det er mange alternativer der du kan velge fullskjermseffekter, legge til ikoner, justere plassering og noen andre attributter også. Men la oss bare bygge en enkel footer nav med 3 knapper for å få en ide om hvordan dette fungerer.

• Forhåndsvis Live Demo

Så her er noen footer-kode for sidenavsnittet. data-role = "navbar" bør legges på beholderelementhuset en uordnet liste og IKKE selve UL-elementet. Hver lenke i listen blir behandlet som en fane, som deretter blir like delt basert på totalt antall lenker. Den ekstra klassen av ui-legeme-b bare legger til estetiske effekter som vi bytter mellom de få tilgjengelige stilene.

Hvis du merker på den første knappen, har jeg attributtet data-retning = "revers". Selv om jeg kunne bruke tilbakeknappsoppsettet som før for å gå tilbake til hjemmesiden, har jeg i stedet brukt siden ID av INDEX. Som standard overgår appvinduet til høyre som ser ganske klebrig ut siden du forventer at animasjonen skal bevege seg bakover. Du kan leke med enda flere av disse animerte effektene hvis du har tid. Ta en titt på overgangsside-siden i jQuery-dokumentasjonen.

Ajax og dynamiske sider

Det første segmentet har virkelig åpnet nøkkelpunktene for å bygge en mobilapp med jQuery. Men jeg vil starte en ny app som laster data fra en ekstern side. Jeg bruker et veldig enkelt PHP-skript for å oppnå $ _REQUEST [] variabel og vis en liten dribbleskudd tilsvarende. Skjermbildet nedenfor skal gi deg en ide om hva vi skal bygge.

Først vil jeg lage et index.html side sett på standard mal. For denne startskjermen bruker jeg et listevisningsoppsett for å vise hver kobling i rekkefølge. Dette gjøres i innholdsområdet med a data-role = "listevisningen" attributt på listebeholderen. Kutting ut de samme topptekstene som før, jeg la hele koden fra denne nye indekssiden under.

 
 
 
Oktober 2011 Skudd
 
 
 
 
Første bilde
 
Andre bilde
 
Tredje bildet
 
Fjerde bilde
 
 
  
   

Hvert av ankerlinkene i listen min viser til samme fil - index.php. Men vi går forbi parameteren imgid som en forespørselsvariabel. På image.php-filen tar vi ID-en og tester den mot 4 forhåndsinnstilte verdier. Hvis noen matcher opp bruker vi den matchende bildeadressen og tittelen, ellers viser vi bare et standard Dribbble-bilde.

Image Loader Script

Image.php-skriptet har fortsatt standard jQuery-mobilmal som er lagt til i koden. Den deler faktisk en veldig lignende topptekst og bunntekst, bortsett fra tillegg av vår tilbakekoblingsattributt data-add-back-btn = "true". Legg merke til at denne knappen bare vil vises hvis vi kommer fra index.html først! Prøv å laste inn image.php direkte, og ingenting vil vises siden det er nei “tilbake” å flytte til.

Jeg tror vi kan gjøre litt mer følelse av koden ved å undersøke PHP-logikken min først. Vi bruker en bytte om / sak metode for å kontrollere mot de fire forskjellige ID-ene og gi en tittel tittel, bilde URL og original artist kilde lenke.

Alt virker ganske greit - selv en nybegynner PHP dev burde kunne følge med! Og hvis du ikke forstår det, er det ikke viktig å jQuery-koden uansett, så vær så bekymret. Vi bør bytte nå og ta en titt på malen jeg har bygget på denne nye siden. All HTML-koden er lagt til etter at hele PHP-blokk over. Jeg brukte ID av “Bilder” for beholderen og til og med sette opp toppteksten for å endre med hvert nytt bilde.

 
 
 
 
 
 Se originalet
 
 
  
 

Du kan sikkert se hvor forenklet denne demoen er. Men hele hensikten er å demonstrere skalerbarheten til jQuery mobile. PHP kan enkelt legges inn i blandingen, og du kan churn ut noen veldig fine apps med bare noen få timer med utvikling.

Fancy Design med Miniatyrer

En siste lagt til effekt vi kan implementere er bruk av miniatyrbilder for å øke oppføringssiden. Jeg skal også dele tekst i en overskrift og beskrivelse boks for å vise både artikkelen tittelen og artistens navn.

For å begynne å åpne Photoshop og opprette et 80 × 80 px dokument. Jeg skal raskt omforme hvert bilde og lagre miniatyrer for å matche hver enkelt. Deretter oppdaterer vi listevisningselementene vi bør inkludere noen flere elementer.

Sjekk koden under og min demo eksempel for å se hva jeg mener.

[Forhåndsvisning Live Demo]

 
 
  
Wunderkit-oppgaver
 
av Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
av Scott Hill
 
  
Forum app for Facebook
 
av Ionut Zamfir
 
  
Twitter
 
av sam jones
 
 
 

Klassene for ui-li-overskriften og ui-li-desc legges som standard inn i jQuery Mobile stilark. Dette ligner på bildeklassen ui-li-thumb som automatisk omformerer hver listevisningslinje i henhold til bildehøyden. Nå kan du bygge mer på frontenden med animasjoner, bivirkninger, stilark, etc.

Eller alternativt kan du begynne å bygge et backend-system for å laste opp nye bilder og automatisk trimme miniatyrbilder for å få med på listen. Det er så mye fleksibilitet med jQuery Mobile at du nesten ikke kan merke det bare som et JavaScript-bibliotek. Det er mer av et helt HTML5 / CSS / jQuery-rammeverk for å bygge raske og skalerbare mobilapper.

Konklusjon

Når du skriver denne artikkelen, har jQuery Mobile-teamet offisielt satt ut RC1.0 av kodebiblioteket. Dette betyr mest om ikke alle de store feilrettingene har blitt squashed og nå testere gir opp for en fullstendig utgivelse. På grunn av dette finner du ikke mye informasjon på nettet.

Men som månedene fremover er webutviklere sikker på å plukke opp trenden. Mobile applikasjoner og til og med mobile weboppsett vokser i popularitet med den enorme økningen i smarttelefoner. Webutviklere har ikke tid til å lære et fullt programmeringsspråk for å bygge Android / IOS-apper. Derfor er jQuery Mobile et slank alternativ som inkluderer støtte for et flertall av mobilindustrien, og fortsetter å vokse hver dag med et aktivt utviklerfellesskap.