Share
Den officiella versionen av jQuery Mobile 1.0 har nyligen meddelats och den här handledningen ger dig en översikt över hur denna populära ram kan hjälpa dig i din plattforms-och webbaserad apputveckling!
jQuery Mobile är en förlängning till den populära jQuery JavaScript-ramen. Som namnet antyder är det ett genomförande som är särskilt inriktat på mobila enheter, och under det senaste året har det kommit långt. Det är nu en av de mer populära ramarna för att utveckla webbaserade applikationer på mobila enheter. Förutom att tillhandahålla en bra lösning för fristående webbaserade appar, är det också ofta inslaget i en SDK som PhoneGap för att fungera som en viktig komponent för många inhemska applikationer.
Teamet bakom jQuery Mobile har arbetat hårt för att få ramverket där det är idag, och de senaste tre månaderna har det tagits från en beta till en officiell release.
Låt oss ta en titt på några av de funktioner som jQuery Mobile erbjuder så att du kan se bara snabbt du kan ställa in en grundläggande app med den här fantastiska lösningen!
Innan vi börjar måste vi se till att vi har ett par saker på rätt plats. Först måste vi se till att vi ställer in visningsporten för vår enhet med hjälp av meta märka.
Då, så att vi kan använda detta som en hemsida på iOS, kan vi ställa in metataggen för app-kapabel.
Ovanstående metakoder är inte absolut nödvändiga, men jag tror att de ofta är en bra idé.
Nästa måste vi inkludera CSS och Javascript för jQuery Mobile. För närvarande använder vi standard CSS, men senare diskuteras strukturen från stilen. För JavaScript måste vi se till att vi inkluderar version 1.6.4 av jQuery och jQuery mobile 1.0. jQuery är ett beroende av jQuery Mobile, så du måste inkludera kärnbiblioteket först. Vid det här skrivandet är det senaste verket för jQuery Core 1,7, men jQuery Mobile erbjuder för närvarande bara stöd för 1.6.4. Men enligt teamet bakom projektet kommer stöd för 1.7 snart!
Nu kan vi flytta in i dokumentets kropp och skapa den typiska strukturen på en sida. jQuery Mobile använder HTML5 data- tilldela specifika beteenden till element, data roll vara den mest populära som den definierar elementets roll inom ansökan. Lägg till attributet data role = "sida" till ditt första element på sidan.
Det behöver inte vara en div, det kan vara ett avsnitt om det är föredraget, men slutresultatet är detsamma. Du har skapat din första sida med jQuery Mobile.
För nu kan du bygga din sida med bara data roll attribut. Du kan använda data role = "header" och data role = "sidfot" för sidhuvud respektive sidfot, och data role = "content" för huvudkroppsinnehållet.
jQuery Mobile Page Rubriken
Det här är en enkelsidig källkodsmall som du kan kopiera för att bygga upp din första jQuery Mobile-sida. Varje länk eller formulär härifrån kommer att dra en ny sida via Ajax för att stödja de animerade sidövergångarna.
Visa bara källan och kopiera koden för att komma igång. Alla CSS och JS är kopplade till jQuery CDN-versionerna, så det här är super lätt att ställa in. Kom ihåg att inkludera en meta viewport-tagg i huvudet för att ställa in zoomnivån.
Den här mallen är standard HTML-dokument med en enda "sida" -behållare inuti, till skillnad från en flersidig mall som har flera sidor i den. Vi rekommenderar starkt att du bygger din webbplats eller app som en serie av separata sidor som den här eftersom den är renare, lättare och fungerar bättre utan JavaScript.
Din app ska nu likna följande.
Och hela koden för detta är nedan:
Enkelsidsmall Rubriken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Säkert är det viktigt att du inte kommer att göra det. Därefter följer gravida eros, vitae convallis visar rutrum i. Curabitur ipsum leo, pulvinar tincidunt sodales väl, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam visar rutrum i. Curabitur ipsum leo, pulvinar tincidunt sodales väl, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam visar rutrum i. Curabitur ipsum leo, pulvinar tincidunt sodales väl, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam visar rutrum i. Curabitur ipsum leo, pulvinar
Footer
Nu är det ganska enkelt så långt som webbapps går, men det är en start. Allt med jQuery Mobile kan göras ganska snabbt, och det är utmärkt för både snabb utveckling av en prototyp och utveckling av fullfjädrade appar.
Självklart är det att använda ett helt bibliotek för en enda sidappsprogram lite överkill, så låt oss börja gå ner till de söta grejerna och lägga till några sidor i vår app.
Du kan lägga till ytterligare två div-behållare efter den slutgiltiga taggen av div med data role = "content" och data role = "sida", men siddatadelrollen ska ha id-attributet inställt på "två" respektive "tre". Jag är säker på att du ser var vi går med det här, så fortsätt och lägg till ett id med "en" till vår första sida också. Lägg till rubriker, innehåll och sidfot på de ytterligare sidorna som önskas.
Tilläggskoden ska se ut som följande:
Rubriken
Detta är den andra sidan
Footer
Rubriken
Detta är innehållet på tredje sidan
Footer
Om du kontrollerar din app nu ser du ingen skillnad. Det beror på att vi måste gå vidare och länka till de sidorna från första sidan innan de kommer att visas. Lägg till några godtyckliga länkar på första sidan, så här:
Sida två sidor tre
Om du öppnar den första länken till sidan två kommer du att se din första personsökningsanimering, men för närvarande finns det inget sätt att komma tillbaka till den första sidan. Fortsätt och lägg till en länk till sidorna två och tre tillbaka till sidan ett.
Allt ska vara pagerande snyggt fram och tillbaka nu. Ljuv!
Nu är just nu våra länkar lite tråkiga, men utan för mycket ansträngning kan vi gå vidare och ändra dessa till några snygga knappar.
Om du lägger till attributet data role = "button" till länkarna i var och en av sidorna och uppdatera din app, borde du nu ha några snygga knappar.
För tillfället gör vår sida bra och vi kan navigera genom ett par sidor, men allt ser lite tråkigt ut. Tack och lov kommer jQuery Mobile med teman. Dessa teman gör det möjligt för utvecklaren att ändra färger och allmänhetens utseende och känsla mycket snabbt. Detta görs av uppgifter-theme attribut. Fortsätt och lägg till datatema = "a", uppgifter-theme = "b" och datatema = "a" till var och en av siddivisionerna som vi skapade ovan. Uppdatera din app och du kommer se vad som hände. Var och en av dina sidor ska se lite annorlunda ut!
Fram till nyligen var det enda sättet att rulla ditt eget anpassade tema att inkludera ett ytterligare stilark och åsidosätta CSS som importeras med jQuery CSS. Tack och lov, när den andra Release Candidate för jQuery Mobile kom ut i oktober, var stylesheet separerat i två separata entites, vilket gjorde plats för den nyligen släppta ThemeRoller. Det första formatet handlar om applikationens struktur och den andra kommer att hantera alla teman för appen.
Gå vidare till Theme Roller-sidan och du kommer att hälsas på skärmen nedan:
På vänster sida har du dina temainställningar. Du kan välja att filtrera genom var och en av sektionerna en åt gången och justera vad du vill, eller, som jag gillar att göra, fortsätt och dra och släpp färgerna ovanför för att stile vad du vill och ändra sedan ditt val med sidemenyn. Du kan bygga upp dina teman, med högst 26, och sedan ladda ner din temafil som ska användas inom din ansökan.
När du hämtar ZIP-filen och extraherar innehållet kommer du att ha en index.html fil som innehåller några grundläggande stilar och en bekräftelse på att ditt stilark har laddats ner korrekt. Du kommer då att ha en temanmapp och inuti hittar du en bildmapp och två stylesheets med namnet du gav temat på export. Det finns en minifierad version för produktion eller en fullständig version för alla ändringar du kanske vill göra.
Nu, när du börjar med ditt mobilprojekt, inkludera bara det här tematråds stilarket istället för standardtemaet CSS.
jQuery Mobile
Nu när du öppnar de färgprov som du skapade via vanligt sätt med jQuery Mobile ovan genom att ställa in uppgifter-theme attribut, kommer du att referera till den temanuller CSS du skapade istället för standardinställningarna.
jQuery Mobile Rubriken
Sidinnehållet går här.
Footer
Du kan lägga till uppgifter-theme attribut till något element på sidan. Om du lägger till den i div med data role = "sida" elementet, så är det temat swatch applicerat på alla element inom den sidan. Du kommer antagligen inte gå upp till 26 olika färgprov, men du brukar använda 3 eller 4 olika färgprov för att få en fin blandning av olika färger i din applikation. Ha en lek med ThemeRoller, det finns många fler alternativ än att dra och släppa standardfärgerna! Du kan justera gradienter, släppa skuggor och ändå ändra färgens ljushet och mättnad.
Under de senaste tre RC-utgåvorna har det funnits några betydande tillägg till ramen, så om du fortfarande använder en av beta-utgåvorna eller helt enkelt inte visste att RC1, RC2 eller RC3 hade släppts, är följande lite fånga på förändringarna.
RC1 introducerade några design tweaks till collapsibles, tar bort extra knappen stil runt +/- ikonen och lägger till möjligheten till den hopfällbara innehållsbehållaren. Lägga till attributet datainnehålls tema till den hopfällbara behållaren kvadreras också bort från hörnen av huvudet i botten, vilket ger behållarens utseende en mer flytande estetisk.
Om du vill komma igång med collapsables, här är den grundläggande koden. Följande kommer att ge dig en enda hopfällbar behållare:
Rubrik i titellistan
Innehåll i den hopfällbara behållaren.
Om du vill gruppera en massa hopfällbara behållare tillsammans och uppnå den populära accorrdion-effekten är allt du behöver göra att vikla en grupp av hopfällbara behållare i en omslag div med datrollen av hopfällbar-uppsättning.
De iOS 5-positionerade alternativen förbättrades från beta-utgåvan med denna RC, men de var fortfarande avstängda som standard. För att kunna använda den här funktionen måste du tillämpa överskridandet när mobileinit händelsen utlöses. Som standard använder jQuery Mobile några förbättringar när det laddas och det är laddat innan document.ready bränder. Lyckligtvis är en av de stora sakerna om jQuery Mobile att inställningarna är lätta att konfigurera med jQuery $ .extend metod och bindande till mobileinit händelse. Kontrollera att skriptfilen som innehåller dina alternativ ingår efter jQuery, men före jQuery Mobile. För att göra detta skulle din kod se ut som nedan:
Accentsconagua
$ (dokument) .bind ("mobilinit", funktion () $ .extend ($. mobil, touchOverflowEnabled: true);); Det finns en hel massa konfigurerbara alternativ som du kan läsa om här. Några av dem som jag har använt regelbundet är:
loadingMessage vilken är en sträng och som standard är den inställd på att "ladda". pageLoadErrorMessage igen är en sträng och som standard är den inställd på "Error Loading Page". defaultPageTransition är en sträng och som standard är den inställd på att "glida". RC2 förflyttades i mitten av oktober och köpte några bra viktiga förändringar. Det fanns tillägg till HTML5-stödet för ingående typer inklusive tid, datum och Färg. Detta var bara att se till att dessa element var stylade när de kom fram på sidan. Möjligheten att ha egna val som en del av en grupp - så att de såg mer integrerad - introducerades. Om du paketerar din fieldset i en div med data role = "kontrollgrupp" attribut, kommer dina fält att visas grupperade i en enda modul. tillsats data type = "horisontell" kommer att gruppera dem horisontellt.
En av de största förändringarna i den senaste utgåvan var att skilja stilarken för tematisering och struktur. Det brukade vara att du skulle inkludera ett stilark från jQuery som inkluderade alla strukturerade CSS och stilar för olika teman. Om du vill lägga till anpassning till CSS måste du ha ditt eget stagblad som skulle åsidosätta allt som redan är inställt. Eftersom vi utvecklar för mobil och bandbredd är det naturligtvis viktigt att strukturen och tematypen har separerats.
Det fanns andra tillägg och buggfixar, inklusive att göra formulär 100% bredd som standard, dialoger med maximal bredd och en ny hjälparklass för att dölja elementen på ett sätt så att de fortfarande kan nås av hjälptekniker som skärmsläsare. Kassa utgivningsanvisningarna och ändringsloggen för alla detaljer.
Utgivandet av RC3 kom som en chock till någon den 13 november, som laget hade sagt att den officiella 1.0-versionen skulle komma strax efter RC2. RC3 var väl värt det, eftersom det var en hel del prestationsförbättringar som gjordes, ville laget bara se till att koden var helt igång innan de släppte ut en slutgiltig version. Du kan läsa om RC3-utgåvan här, och det första du kommer att märka är prestandaförbättringen. Det fanns också några nya tillägg:
Du kan nu ställa in linkBindingEnabled till falskt (sant som standard) om du ville hantera alla klickhändelser med ett annat bibliotek eller använda någon anpassad kod. Du kan också ställa in det överlag som visas med dialogrutan genom att ställa in dataöverlagring-theme på antingen omslagssidan eller på väljmodulen.
Slutligen fick dokumentationen en välbehövlig översyn och uppdaterades med demo av alla funktioner, några tips om att komma igång och några tips om att bygga jQuery-appar tillsammans med Phonegap som finns här.
jQuery Mobile har kommit långt under de senaste månaderna, än mindre det senaste året, och om det är något som det är förälderbiblioteket, kommer det att stiga till att bli det ledande valet för många utvecklare att dyka direkt in i att bygga mobila webapps. Inlärningskurvan är betydligt mindre än en lösning som SenchaTouch eller Titanium Mobile, och enligt min mening kommer det faktum att antagandet ska skjutas upp. ThemeRoller och de globala konfigurationsalternativen erbjuder också en anpassningsnivå som är så lätt att använda att även de mest känsliga kodarna bör hitta det snabbt att hämta och komma igång med anpassade teman.
Det finns vissa saker som jag är säker på att vi alla skulle vilja se, och över tiden - precis som med jQuery - har jag ingen tvekan om att ytterligare förbättringar kommer att göras. Jag uppmanar dig att gå och kolla in jQuery Mobile om du inte har än, och om du använder en äldre version av det, se till att du kontrollerar changelog för release-noterna för varje version du är på efter innan du uppgraderar.
Vi kommer säkert att hålla dig uppdaterad på Mobiletuts + som jQuery Mobile fortskrider, men om du vill se fler jQuery Mobile tips och handledning, låt oss veta i kommentarerna!
