Mobile App Design / Dev Beginners Guide till jQuery Mobile

Under de senaste 2-3 åren har vi sett en enorm tillväxt i webbläsare och OS-stöd för mobila webbplatser. Mest i synnerhet Apples iOS och Googles Android-plattformar kommer i åtanke. Men andra som PalmOS och Blackberry är fortfarande i mixen. Fram till nyligen var det väldigt svårt att matcha ett enda mobiltema till alla dessa plattformar.

JavaScript var en start, men det har inte funnits något riktigt förenat bibliotek hittills. jQuery Mobile tar alla de bästa funktionerna i jQuery och hamnar dem över till en mobilbaserad webbkälla. Biblioteket är mer som ett ramverk som innehåller animeringar, övergångseffekter och automatiska CSS-stilar för grundläggande HTML-element. I den här guiden hoppas jag att presentera plattformen på ett sätt som du kan känna dig bekväm att utforma dina egna jQuery-mobilappar.

Funktioner och OS-support

Anledningen till att jag föreslår att jag lär dig jQuery Mobile över alla andra ramar är enkelhet. Koden byggdes på jQuery-kärnan och har ett aktivt team av utvecklare som skriver skript och redigerar fel. Bland de många funktionerna finns HTML5-stöd, Ajax-drivna navigeringslänkar och touch / swipe-händelsehanterare.

Stödet varierar mellan telefoner och är uppdelad i ett diagram med 3 kategorier från A-C. A är den högsta nivån som har fullt stöd för jQuery Mobile, B har allt utom Ajax medan C är grundläggande HTML med lite JavaScript. Lyckligtvis stöds de flesta av de populära operativsystemen fullt ut - jag lade till en lista nedan på några exempel.

• 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

Om du vill lära dig mer kan du läsa på sin officiella dokumentsida. Det är inte skrivet i gibberish och känns faktiskt väldigt lätt att följa med. Låt oss nu fokusera på grunderna för att skriva en jQuery-mobilsida och hur vi kan bygga en liten applikation!

Standard HTML-mallen

För att få din första mobilapp fungerar finns det en uppsättning mall du bör börja med. Detta inkluderar jQuery-baskoden tillsammans med mobilen JS och CSS, alla externa värd från jQuery CDN. Kolla in min exempelkod nedan.

De enda främmande elementen här borde vara de två metataggarna. Toppen visningsområde tagg uppdateringar mobila webbläsare för att använda en full zoom-effekt. Ställa in värdet width = enhetsbredd ställer in sidbredd vid exakt bredden på telefonskärmen. Och bäst av allt det inaktiverar inte zoomfunktionerna, eftersom jQuery Mobile kan anpassa sig till skiftande layouter.

Nästa metataggen X-UA-kompatibel tvingar bara Internet Explorer att göra HTML-filen i den senaste iterationen. Äldre webbläsare och särskilt mobila kommer att försöka komma runt obekanta återgivningsfel.

Konstruera kroppens innehåll

Nu är det här där jQuery mobil kan bli svårt. Varje HTML-sida är inte nödvändigtvis 1 sida på mobilplatsen. Ramverket använder sig av HTML5s dataattribut, som du kan skapa på ett infall genom att lägga till data- i förväg. På ett liknande sätt data role = "sida" kan ställas in på flera divs i en enda HTML-fil, vilket ger dig mer än en sida.

Du skulle då flytta mellan dessa sidor med ankarlänkar och ett unikt ID. Den här inställningen är en bra idé för enkla, enkla appar. Om du bara behöver 3-5 sidor, varför lagra inte allt i en enda fil? Om du inte har mycket skriftligt innehåll, i vilket fall försöker du använda PHP ingår att spara tid.

Kolla koden nedan om du är vilse.

 
 
 
Översta titelfältet
 
 
 
Visa en annan sida??
 
Tips: klicka på knappen nedan!
 
Om oss
 
  
 
 
 
Page 2 Här
 
 
 
bara lite extra innehåll.
 
Jag menar du kan gå tillbaka närsomhelst.
 
 
   

Ta en titt på ankarlänken från indexsidan en stund. Observera jag lade till attributet data role = "button" för att ställa in länken som en knapp. Men istället för att använda standardstilarna som vi inkluderar uppgifter-theme = "c". Detta växlar mellan 1 av 5 teman (teman a-e) mallar som standardförpackas som CSS-stilar inom jQ Mobile.

Min knapp spänner också över hela sidbredden. För att ta bort beteendet måste vi ställa in elementet från block till inline-visning. Attributet för att göra detta är data inline = "true" som du kan lägga till på någon ankerknapp.

Header och Footer Bars

Längst upp och ner i dina program borde du lägga till sidhuvud och sidfot. Denna designstil skrivs ofta med iOS-appar som först blev populära med Apples mobilapp Store. jQ Mobile använder attribut av data-roll för att definiera sidhuvud, sidfot och sidinnehåll. Låt oss ta en kort titt på dessa områden.

Toppstångknappar

Som standard stöder den övre fältet en uppsättning två (2) länkar på liknande sätt som andra mobilappar. IOS är standard för att använda a “tillbaka” knappen till vänster och ofta en “alternativ” eller “config” till höger.

 
 inställningar 
Page 2 Här
 
 

Koden ovan fokuserar bara på div-containern för vår Om-sida tillsammans med rubrikinnehåll. Det extra HTML-attributet data add-back-BTN = "true" kommer bara att fungera när den läggs till på en sidodatrolla. Syftet är att automatiskt inkludera en bakåtknapp som fungerar som din webbläsares ryggknapp.

Vi kunde ha lagt till en bakåtknapp manuellt med liknande kod som vi använde i innehållsområdet. Men jag tycker att det tar mycket längre tid att installera på flera sidor. Alla ankarlänkar inom rubrikavsnittet kommer som standard till vänster / höger knappposition. Genom att använda class = "ui-BTN-rätt" Detta återplacerade min inställningsknapp så det finns ledigt utrymme för bakåtknappen. Jag använder också de sekundära tematypen för att ge det lite extra spunk!

Footer Navigation

Footerområdet många inte känner sig mycket användbara först. Det är en plats där du kan lagra upphovsrättsfrågor och viktigare länkar, men det kan lika lätt läggas till längst ner i ditt innehållsområde. Så vad bra använder fotfoten?

Tja det bästa exemplet jag har sett använder fotfält som ett navigationssystem där fliklänkar verkar kontrollera sidnavigering. Det finns många alternativ där du kan välja fullskärmseffekter, lägga till ikoner, justera placering och några andra attribut också. Men låt oss bara bygga en enkel sidfot med 3 knappar för att få en uppfattning om hur det fungerar.

• Förhandsgranska Live Demo

Så här är en del footer-kod för sidan om sidan. data role = "navbar" bör läggas på behållarelementhuset en oorderad lista och INTE själva UL-elementet. Varje länk i listan behandlas som en flikfält, som sedan blir lika uppdelad baserat på totalt antal länkar. Den ytterligare klassen av ui-kropp-b lägger bara till estetiska effekter som vi växlar mellan de få tillgängliga stilar.

Om du märker på den första knappen har jag attributet data riktning = "omvänd". Även om jag kunde använda inställningen bakåtknapp som tidigare för att återvända till hemsidan, har jag istället använt sid ID för #index. Som standard övergår appfönstret till höger vilket ser ganska klibbigt ut eftersom du förväntar dig att animationen ska röra sig bakåt. Du kan leka med ännu fler av dessa animerade effekter om du har tid. Kolla in övergångsinfo-sidan i jQuery-dokumentationen.

Ajax & Dynamiska Sidor

Det första segmentet har verkligen öppnat viktiga punkter för att bygga en mobilapp med jQuery. Men jag vill starta en ny app som laddar data från en extern sida. Jag använder ett mycket enkelt PHP-skript för att uppnå $ _REQUEST [] variabel och visa en liten Dribbble skott i enlighet därmed. Skärmbilden nedan ska ge dig en uppfattning om vad vi ska bygga.

Först ska jag göra en index.html siduppsättning på standardmallen. För den här startskärmen använder jag en listvy-inställning för att visa varje länk i ordning. Detta görs i innehållsområdet med a data role = "listview" attribut på listbehållaren. Klipp ut samma rubrik som tidigare, jag lade till hela min kod från den här nya indexsidan nedan.

 
 
 
Oktober 2011 Skott
 
 
 
 
Första bilden
 
Andra bilden
 
Tredje bilden
 
Fjärde bilden
 
 
  
   

Var och en av ankarlänkarna i min lista visar på samma fil - index.php. Men vi passerar i parametern imgid som en begäran variabel. På filen image.php tar vi ID och testar det mot 4 förinställda värden. Om någon matchar vi använder matchande bildadress och titel, annars visar vi bara ett standarddribbble-skott.

Image Loader Script

Image.php-skriptet har fortfarande standard jQuery-mobilmallen som läggs till i koden. Den delar faktiskt en mycket liknande rubrik och sidfot, med undantag för tillägget av attributet bakåtlänk data add-back-BTN = "true". Observera att den här knappen bara kommer att dyka upp om vi kommer från index.html först! Prova direkt att ladda bild.php och ingenting kommer att visas eftersom det inte finns något “tillbaka” att flytta till.

Jag tror att vi kan göra lite mer känsla av koden genom att först undersöka min PHP-logik. Vi använder en växla / fall Metod för att kontrollera mot de 4 olika ID-erna och ge en rubriktitel, bildadress och originalkällarkälla.

Allt verkar ganska enkelt - även en nybörjare PHP dev borde kunna följa med! Och om du inte förstår det, är det inte viktigt att jQuery-koden ändå är orolig. Vi ska byta nu och ta en titt på mallen jag har byggt på den här nya sidan. All HTML-koden läggs till efter det hela PHP-blocket ovan. Jag använde ID av “bilder” för behållaren och till och med setup huvudet att byta med varje nytt foto.

 
 
 
 
 
 Visa originalet
 
 
  
 

Du kan förmodligen se hur förenkling denna demo är. Men hela syftet är att visa skalbarheten hos jQuery-mobilen. PHP kan enkelt läggas till i mixen och du kan churn ut några riktigt snygga appar med bara några timmars utveckling.

Fancy Design med Miniatyrer

En sista tillagd effekt vi kan genomföra är att använda miniatyrbilder för att öka uppteckningssidan. Jag ska också dela upp text i en rubrik och en beskrivningslåda för att visa både konstverkets titel och artistens namn.

För att börja öppna Photoshop och skapa ett 80 × 80 px dokument. Jag kommer snabbt att omforma varje bild och spara miniatyrbilder för att matcha varje bild. Då uppdaterar listvisningsobjekten vi bör inkludera några fler element.

Kolla in koden nedan och mitt demo exempel för att se vad jag menar.

[Förhandsgranska Live Demo]

 
 
  
Wunderkit-uppgifter
 
av Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
av Scott Hill
 
  
Forum app för Facebook
 
av Ionut Zamfir
 
  
Twitter
 
av Sam Jones
 
 
 

Klasserna för ui-li-rubrik och ui-li-desc läggs som standard till i jQuery Mobile-stilarket. Detta liknar bildklassen ui-li-thumb som automatiskt omformar varje listvisningsfält enligt bildhöjd. Nu kan du bygga mer på fronten med animeringar, sidoeffekter, stylesheets osv.

Eller alternativt kan du börja bygga ett backend-system för att ladda upp nya bilder och automatiskt trimma miniatyrbilder för att inkludera i listan. Det finns så mycket flexibilitet med jQuery Mobile att du nästan inte kan märka den enbart som ett JavaScript-bibliotek. Det är mer av ett helt HTML5 / CSS / jQuery-ramverk för att bygga snabba och skalbara mobilappar.

Slutsats

När du skrev den här artikeln har jQuery Mobile-laget officiellt lagt ut RC1.0 i kodbiblioteket. Detta betyder mest om inte alla större buggfixar har blivit squashed och nu testar man upp till en full release. På grund av detta hittar du inte mycket information på webben.

Men som månaderna framåt webbutvecklare är säker på att plocka upp på trenden. Mobila applikationer och till och med mobila webblayouter växer i popularitet med den enorma ökningen av smartphones. Webbutvecklare har inte tid att lära sig ett fullständigt programmeringsspråk för att bygga Android / IOS-appar. Således är jQuery Mobile ett smal alternativ som innefattar stöd för en majoritet av mobilindustrin, och fortsätter att växa varje dag med en aktiv utvecklare.