Share
Den offisielle utgivelsen av jQuery Mobile 1.0 ble nylig annonsert, og denne opplæringen vil gi deg en oversikt over hvordan denne populære rammen kan hjelpe deg i din tversplattform og web-basert apputvikling!
jQuery Mobile er en utvidelse av det populære jQuery JavaScript-rammeverket. Som navnet antyder, er det en implementering som er spesielt rettet mot mobile enheter, og i løpet av det siste året har det kommet langt. Det er nå et av de mer populære rammene for å utvikle webbaserte applikasjoner på mobile enheter. I tillegg til å gi en god løsning for frittstående web-baserte apper, blir det også ofte pakket inn i en SDK som PhoneGap for å tjene som en viktig komponent til mange innfødte applikasjoner.
Teamet bak jQuery Mobile har jobbet hardt for å få rammen der det er i dag, og de siste tre månedene har spesielt tatt det fra en beta til en offisiell utgivelse.
La oss ta en titt på noen av funksjonene som jQuery Mobile tilbyr, så du kan se akkurat raskt, du kan sette opp en grunnleggende app med denne flotte løsningen!
Før vi begynner, må vi sørge for at vi har et par ting på rett sted. Først må vi sørge for at vi setter visningsporten for enheten vår ved hjelp av meta stikkord.
Da, bare slik at vi kan bruke dette som en startside på iOS, kan vi sette metatagget for app-stand.
Ovennevnte metakoder er ikke strengt nødvendige, men jeg tror de ofte er en god ide.
Deretter må vi inkludere CSS og Javascript for jQuery Mobile. For øyeblikket vil vi bruke standard CSS, men senere vil vi diskutere å skille strukturen fra stilen. For JavaScript må vi sørge for at vi inkluderer versjon 1.6.4 av jQuery og jQuery mobile 1.0. jQuery er en avhengighet av jQuery Mobile, så du må inkludere kjernebiblioteket først. På tidspunktet for denne skrivingen er det siste verket av jQuery Core 1,7, men jQuery Mobile tilbyr for øyeblikket kun støtte for 1.6.4. Men ifølge teamet bak prosjektet, kommer støtte til 1,7 snart!
Nå kan vi flytte inn i dokumentets kropp og lage den typiske strukturen til en side. jQuery Mobile bruker HTML5 data- tillrribute å tilordne bestemte oppføringer til elementer, data-rolle å være den mest populære som den definerer elementene rolle innenfor søknaden. Legg til attributtet data-role = "side" til ditt første element på siden.
Det trenger ikke å være en div, det kan være en seksjon hvis det er foretrukket, men sluttresultatet er det samme - du vil ha opprettet din første side med jQuery Mobile.
For nå kan du bygge siden din bare ved hjelp av data-rolle egenskaper. Du kan bruke data-rolle = "header" og data-role = "footer" for henholdsvis topptekst og bunntekst, og data-role = "innhold" for hovedinnholdet.
jQuery Mobile Page Overskriften
Dette er en single page boilerplate mal som du kan kopiere for å bygge deg første jQuery Mobile side. Hver lenke eller skjema herfra vil trekke en ny side inn via Ajax for å støtte de animerte sidetransisjonene.
Bare se kilden og kopier koden for å komme i gang. Alle CSS og JS er koblet til jQuery CDN-versjonene, så dette er super enkelt å sette opp. Husk å ta med en meta viewport-tag i hodet for å angi zoomnivået.
Denne mal er standard HTML-dokument med en enkelt "side" -beholder inni, i motsetning til en flersidsmaler som har flere sider i den. Vi anbefaler på det sterkeste å bygge nettstedet ditt eller din app som en serie av separate sider som dette fordi den er renere, mer lett og fungerer bedre uten JavaScript.
Appen din bør nå ligne følgende.
Og hele koden for dette er under:
Enkeltsidemal Overskriften
Kjæresten er dum og sitter, og er en avgjørende forfatter. Du er ikke sikker på om du ikke er en person Sed som følge av gravida eros, vite convallis viser rutrum i. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum i. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum i. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam viser rutrum i. Curabitur ipsum leo, pulvinar
The Footer
Nå er dette ganske enkelt så langt som webappene går, men det er en start. Alt med jQuery Mobile kan gjøres ganske raskt, og det er flott for både rask utvikling av en prototype og utvikling av fullverdige apps.
Selvfølgelig, å bruke et helt bibliotek for en enkelt side-app er litt overkill, så la oss begynne å komme ned til de søte tingene og legge til noen få sider i vår app.
Du kan legge til to ekstra div-beholdere etter den avsluttende taggen til div med data-role = "innhold" og data-role = "side", men sidedatastrengen skal ha id-attributtet satt til henholdsvis "to" og "tre". Jeg er sikker på at du ser hvor vi skal med dette, så fortsett og legg til et id med "en" til vår første side også. Legg til overskrifter, innhold og footers til de ekstra sidene som ønsket.
Den ekstra koden skal se ut som følgende:
Overskriften
Dette er den andre siden
The Footer
Overskriften
Dette er innholdet på tredje side
The Footer
Hvis du sjekker appen din nå, ser du ingen forskjell. Det er fordi vi må gå videre og lenke til de sidene fra første side før de blir vist. Legg til noen vilkårlig koblinger på den første siden, slik som dette:
Side To Side Tre
Hvis du åpner den første linken til side to, vil du se din første personsøkingsanimasjon, men for øyeblikket er det ingen måte å komme tilbake til den første siden. Gå videre og legg til en link til sidene to og tre går tilbake til side ett.
Alt skal være paging pent frem og tilbake nå. Søt!
Nå, for øyeblikket er våre lenker litt kjedelige, men uten for mye innsats kan vi gå videre og bytte til noen flotte knapper.
Hvis du legger til attributtet data-role = "button" til koblingene i hver av sidene og oppdatere appen din, bør du nå ha noen flotte utseende knapper.
For øyeblikket gjør siden vår fin, og vi kan navigere gjennom et par sider, men det ser alt ut litt kjedelig ut. Heldigvis kommer jQuery Mobile sammen med temaer. Disse temaene gjør det mulig for utvikleren å endre farger og generelt utseendet til appen veldig raskt. Dette gjøres av data-tema Egenskap. Gå videre og legg til data-tema = "a", data-type = "b" og data-tema = "a" til hver av sidedivene vi opprettet ovenfor. Oppdater appen din, og du vil se hva som skjedde. Hver av sidene dine skal se litt annerledes ut!
Inntil nylig var den eneste måten å rulle ditt eget tilpassede tema, å inkludere et ekstra stilark og overstyre CSS importert med jQuery CSS. Heldigvis, da den andre utgivelseskandidaten for jQuery Mobile kom ut i oktober, ble stilarket skilt i to separate entites, noe som gjorde plass til den nylig utgitte ThemeRoller. Det første stilarket omhandler strukturen i applikasjonen, og den andre vil håndtere alle temaene for appen.
Gå over til Theme Roller-siden, og du vil bli møtt av skjermen nedenfor:
På venstre side har du temainnstillingene dine. Du kan velge å filtrere gjennom hver av delene en om gangen og justere hva du vil, eller, som jeg liker å gjøre, gå videre og dra og slipp fargene ovenfra for å stil hva du vil, og forfine deretter ditt valg med sidemenyen. Du kan bygge opp temaene dine, med maksimalt 26, og deretter laste ned temafilen som skal brukes i søknaden din.
Når du laster ned ZIP-filen og trekker ut innholdet, vil du ha en index.html fil som inneholder noen grunnleggende stiler og en bekreftelse på at stilarket er lastet ned riktig. Du vil da ha en tema-mappe og inne finner du en bildemappe og to stilarkiver med navnet du ga temaet på eksport. Det er en minifisert versjon for produksjon eller en fullversjon for eventuelle endringer du kanskje vil gjøre.
Nå, når du begynner mobilprosjektet ditt, må du bare inkludere dette temaruller stilarket i stedet for standardtemaet CSS.
jQuery Mobile
Nå, når du åpner stikkordene du opprettet på vanlig måte med jQuery Mobile ovenfor, ved å sette inn data-tema attributt, vil du referere til Theme Roller CSS du opprettet i stedet for standardinnstillingene.
jQuery Mobile Overskriften
Sidens innhold går her.
The Footer
Du kan legge til data-tema Tilordne ethvert element på siden. Hvis du legger til den i div med data-role = "side" elementet, så blir det temaet søppel på alle elementene i den siden. Du vil nok ikke gå helt opp til 26 forskjellige fargeprøver, men du vil mest sannsynlig bruke 3 eller 4 forskjellige fargeprøver for å få en fin blanding av forskjellige farger i søknaden din. Ha en lek med ThemeRoller, det er mange flere alternativer enn å bare dra og slippe standardfarger! Du kan justere gradienter, slippe skygger, og til og med endre lyset og metningen av fargene.
I løpet av de siste tre RC-utgivelsene har det vært noen signifikante tillegg til rammen, så hvis du fortsatt bruker en av beta-utgivelsene, eller bare ikke visste at RC1, RC2 eller RC3 hadde blitt utgitt, er følgende litt innhente endringene.
RC1 introduserte noen design tweaks til collapsibles, fjerner ekstra knappestilen rundt +/- ikonet og legger til evnen til den sammenleggbare innholdsbeholderen. Legge til attributten data-innhold-tema Til den sammenleggbare beholderen er også kvadratet av topptekstens hjørner nederst, noe som gir beholderens utseende en mer flytende estetisk.
Hvis du vil komme i gang med collapsables, her er grunnkoden. Følgende vil gi deg en enkelt sammenleggbar beholder:
Overskrift i tittellinjen
Innhold i den sammenleggbare beholderen.
Hvis du vil gruppere en haug med sammenleggbare beholdere sammen og oppnå den populære akkord-effekten, er alt du trenger å gjøre, å pakke en gruppe sammenleggbare beholdere inn i en wrapper div med data-rollen til sammenlegg-set.
IOS 5-posisjonen fikserte alternativer ble forbedret fra beta-utgivelsen med denne RC-en, men de ble fortsatt slått av som standard. For å kunne bruke denne funksjonen må du bruke overstyringen når mobileinit hendelsen utløses. Som standard bruker jQuery Mobile noen forbedringer når det er lastet, og det er lastet før document.ready branner. Heldigvis er en av de store tingene med jQuery Mobile at innstillingene er enkelt konfigurerbare ved hjelp av jQuery's $ .extend metode og bindende til mobileinit begivenhet. Kontroller at skriptfilen som inneholder alternativene er inkludert etter jQuery, men før jQuery Mobile. For å gjøre dette, vil koden din se ut som nedenfor:
Accentsconagua
$ (dokument) .bind ("mobileinit", funksjon () $ .extend ($. mobil, touchOverflowEnabled: true);); Det er en hel masse konfigurerbare alternativer som du kan lese om her. Noen av de som jeg har brukt regelmessig er:
loadingMessage som er en streng og som standard er den satt til "lasting". pageLoadErrorMessage igjen er en streng og som standard er den satt til "Feil lasteside". defaultPageTransition er en streng og som standard er den satt til "lysbilde". RC2 ble relased midten av oktober og kjøpte langs noen gode nøkkelendringer. Det var tillegg til HTML5-støtten for input typer, inkludert tid, Dato og farge. Dette var bare å sikre at elementene ble stylet når de ble vist på siden. Muligheten til å ha tilpassede valg som en del av en gruppe - slik at de så mer integrert - ble introdusert. Hvis du pakker inn din fieldset i en div med data-role = "kontrollgruppens" attributt, feltene dine vil bli gruppert sammen i en enkelt modul. legge data-type = "horisontal" vil gruppere dem horisontalt.
En av de største endringene i den siste utgivelsen var å skille mellom stilarkene for tema og struktur. Det pleide å være at du ville inkludere en stilark fra jQuery som inkluderte alle strukturerte CSS og stilene for de forskjellige temaene. Hvis du ønsker å legge til tilpasning til CSS, må du ha ditt eget stedsark som vil overstyre alt som allerede er satt. Selvfølgelig, som vi utvikler for mobil og båndbredde er viktig, er strukturen og tema stilarkene nå blitt skilt.
Det var andre tillegg og feilrettinger inkludert å lage skjemaer 100% bredde som standard, dialoger med maksimal bredde og en ny hjelperklasse for å skjule elementer på en måte slik at de fortsatt kan nås av hjelpende teknologier som skjermlesere. Sjekk ut utgivelsesnotatene og endringsloggen for alle detaljer.
Utgivelsen av RC3 kom som et sjokk for noen 13. november, da laget hadde sagt at den offisielle 1.0-utgivelsen skulle komme rett etter RC2. RC3 var vel verdt det, da det var en hel mengde forbedringer som ble gjort, ville teamet bare sørge for at koden var helt i gang før de slo ut en endelig versjon. Du kan lese om RC3-utgivelsen her, og det første du vil legge merke til, er ytelsesforbedringene. Det var også noen få nye tillegg:
Du kan nå angi linkBindingEnabled til falsk (sant som standard) hvis du ønsket å håndtere alle klikkhendelser med et annet bibliotek eller ved hjelp av noen egendefinert kode. Du kan også utforme overlegget som vises med dialogboksen ved innstilling data-overlay-tema på enten overleggspakken eller på valgmodulen.
Endelig ble dokumentasjonen en godt trengt overhaling og ble oppdatert med demoer av alle funksjonene, noen tips om å komme i gang, og noen tips om å bygge jQuery-programmer sammen med Phonegap som finnes her.
jQuery Mobile har kommet langt i løpet av de siste månedene, ikke si det siste året, og hvis det er noe som det er foreldrebiblioteket, vil det stige til å bli nummer én valg for mange utviklere å dykke rett inn i å bygge mobile webapper. Læringskurven er langt mindre enn en løsning som SenchaTouch eller Titanium Mobile, og etter min mening vil det føre til at adopsjonen skyrocket. ThemeRoller og de globale konfigureringsalternativene tilbyr også et tilpasningsnivå som er så enkelt å bruke at selv de fleste amatører av kodere burde finne det raskt å hente og komme i gang med tilpassede temaer.
Det er noen ting som jeg er sikker på at vi alle vil se lagt til, og over tid - akkurat som med jQuery - har jeg ingen tvil om at flere forbedringer vil bli gjort. Jeg oppfordrer deg til å gå og sjekke ut jQuery Mobile hvis du ikke har det ennå, og hvis du bruker en eldre versjon av det, må du kontrollere at du har sjekket endringsloggen for utgivelsesnotatene for hver versjon du er på før du oppgraderer.
Vi vil sikkert holde deg oppdatert på Mobiletuts + som jQuery Mobile utvikler seg, men hvis du vil se flere jQuery Mobile-tips og opplæringsprogrammer, gi oss beskjed i kommentarene!
