Ikke for lenge siden lanserte jQuery-teamet jQuery Mobile 1.2. Denne nye utgivelsen har noen fantastiske endringer! I denne artikkelen skal vi se gjennom noen av de nye modulene som er tilgjengelige for utviklere, se på endringer som er gjort i eksisterende widgets, og se på noen få effektive forbedringer som kan påvirke jQuery Mobile-programmet. La oss komme i gang, skal vi?

For det første må vi laste ned biter og byte. Gå over til jQuery Mobile nedlastingsside og last ned det alternativet som best passer dine behov. Alternativt kan du bare bruke kjeleplaten koden nedenfor.

I tillegg kan det nå være en god tid å raskt diskutere nedlastingsbyggeren som jQuery Mobile-teamet bygger. Det er fortsatt i Alpha, men det lar deg tilpasse nedlastingen din for å inkludere bare de delene av jQuery Mobile du trenger, og ingenting mer. Du kan ekskludere spesifikke hendelser, overganger, skjemaelementer eller widgets som du ikke bryr deg om. Det er ment for utviklerne som er svært opptatt av å få tak i det høyeste nivået av ytelse ut av hans eller hennes søknad.

---

widgets

Det slående hjertet av enhver jQuery Mobile-applikasjon er dens widgets. Formentlig er de den mest synlige delen av siden, og den delen som gjør at brukerne kan kommunisere med siden på en så enkel måte. JQuery Mobile-teamet har brukt utallige timer til testing, bygging og raffinering av widgets for å sikre at de er de beste de kan være. I versjon 1.2 har laget virkelig slått det ut av parken med en widget som utviklere har bedt om siden rammen ble først utgitt: popup-modeller.

popups

En popupmodal er en liten del av siden som overlegger andre deler av siden. De brukes mest som verktøytips, eller for å vise bilder, kart og tilleggsinnhold. Denne informasjonen er vanligvis ikke viktig nok til å garantere en annen side, men er fortsatt viktig for å vise seg selv. Måten jQuery Mobile 1.2 har implementert popups på, er perfekt. La oss lære hvor enkelt det er å legge til popups i et prosjekt.

Et kort notat, for korthetens skyld: Alle kodesamplene nedenfor vil bruke følgende boilerplate HTML. JQuery Mobile CSS og JS-filene (inkludert jQuery) er hotlinked ved hjelp av jQuery CDN for enkelhets skyld.

Å legge til en popup på en side i søknaden din er en to-trinns prosess. Først trenger du noen måter å utløse popup-vinduet. Dette er vanligvis en lenke, eller en knapp, eller noe brukeren samhandler med. For å utløse element, legger vi til følgende attributt:

data-rel = "popup"

For det andre trenger du innholdet som skal vises. Dette kan variere fra en enkelt div til en Meny, en skjema, eller til og med bilder. Innholdselementet får sitt eget attributt:

data-role = "popup"

Til slutt, for enkle koblingsknapper, href Attributtet må stemme overens med id av innholdet som skal vises. La oss se gjennom hele implementeringen.

Åpne popup 
 
Dette er en helt grunnleggende popup, ingen valgsett.
 

Det du ser på siden, bør se noe som ligner på dette:

Verktøytips

Nå som du vet hvordan du lager en popup, la oss se på andre muligheter. En vanlig bruk er et verktøytips; hjelpetekst eller utvidet tekst som vises når en bruker klikker på en knapp. Sett opp koden på samme måte som før:

Finne ut mer 
 
Du fant ut mer!.
 

Denne gangen styler vi det resulterende innholdet ved hjelp av e swatch fra jQuery Mobile for å gi det et mer behagelig utseende. Dette hjelper oss med å huske at popup er førsteklasses jQuery Mobile-borgere, og kan behandles akkurat som noe annet på siden.

menyer

La oss gå videre til noe litt mer komplisert: en meny. Det er en populær tilnærming til navigering på siden. Gi brukeren en meny rett ved fingertuppene. Så hvordan ser det ut med popup-vinduer?

Meny 
 
 
Min Meny
 
opphevet
 
koblet
 
Med teller42
 
 

Og den resulterende produksjonen bør likne dette:

Du kan også bruke 1.2 sammenleggbare lister i popup-vinduer. Her er et raskt eksempel:

Nested Menu 
 
 
 
Farger
 
 
rød
 
Blå
 
 
 
 
figurer
 
 
Sirkel
 
Torget
 
 
 
 

Og resultatene:

Det er verdt å merke seg data-innfelt = "true" er nødvendig på listevisning eller hjørnene på listen din dukker opp. Prøv og du vil se.

skjemaer

En annen populær UX-tilnærming er å vise et påloggingsskjema som svinger over toppen av en side. Det er nå mulig med jQuery Mobile popup-vinduer. Her er et enkelt brukernavn / passord skjema.

Logg Inn 
 
 
Vennligst logg inn
 Brukernavn:  Passord:  Logg inn 
 

Som gir deg:

Som standard setter popups seg over objektet som utløste dem. Det er et valgfritt attributt som du vil se i de neste tre eksemplene. Det er data-stilling-i = "vindu" og du bruker den til elementet som utløser popup-vinduet. Prøv å legge det til Logg Inn knappen ovenfor for å se hva som skjer.

dialoger

Et vanlig behov for webapplikasjoner er muligheten til å samhandle med brukeren. Vi har nettopp vurdert en tilnærming: et påloggingsskjema. Men noen ganger må du spørre brukeren med spørsmål. En dialog er en perfekt løsning for dette; og hva vet du, popup har du dekket! Så hvordan ser koden ut? Her er et enkelt eksempel:

Dialog 
 
 
Slett side?
 
 
 
Er du sikker på at du vil slette denne siden?
 
Denne handlingen kan ikke fortrykkes.
 Nei Ja, Slett det 
 

I popup-innholdsbeholderen må du merke et annet nytt attributt for bruk: data-overlay-tema = "a". Denne egenskapen er hva som gjelder den skraverte bakgrunnen til dialogboksen. Det påvirkes av temaet ditt, så vær forsiktig når du arbeider med temaer opprettet med ThemeRoller.

Bilder

Jeg kan ikke telle antall ganger jeg har sett. JQuery Mobile-utviklere ber om en bedre måte å håndtere bildegallerier på. Mens popups ikke er den perfekte løsningen for et stort antall bilder, er de flotte for en håndfull bilder som må vises større. Enda bedre, det er utrolig enkelt; Sjekk det ut:

Bilde 
 Lukk 

Ovennevnte kode gir deg et elegant bilde sentrert til vinduet, inkludert en nær vindusknapp.

Hvordan gjorde de det? Innenfor en popup-sammenheng, anker tag har attributter som oppfører seg litt annerledes enn når de brukes i andre steder på siden. Spesielt, den ui-btn høyre klasseplasseringer bildet i hjørnet av bildet i stedet for siden, mens data-icon og data-iconpos attributter tillater deg å style knappen på samme måte som du ville ha en vanlig knapp.

Du kan bli ganske fancy med popup-inkludert, men ikke begrenset til, å vise inline-video og til og med interaktive kart. Sjekk jQuery Mobile-dokumentasjonen for popup-vinduer og iframes.

Sammenleggbare listevisninger

En annen flott ny funksjon er muligheten til å kombinere sammenleggbare sett med listevisninger. Ring dem "Sammenleggbare listevisninger", og du har en helt ny widget i jQuery Mobile 1.2. Hvordan fungerer de? Jeg er glad du spurte. Opprett bare en liste du liker, og pakk den inn i et sammenleggbart sett. Sammenleggbare listevisninger støtter også flere lister - så bli gal!

 
Favoritt Spice Girl?
 
 
Snobbete
 
Skummelt
 
Sportslig
 
Baby
 
ingefær
 
 

Koden ovenfor vil resultere i denne sammenleggbare listevisningen:

---

forbedringer

I tillegg til nye widgettyper gir jQuery Mobile 1.2 en rekke nyttige forbedringer til eksisterende funksjonalitet. La oss ta en titt på noen av de mer verdifulle.

jQuery-støtteendringer

En av de største forbedringene i versjon 1.2 er den ekstra støtten til jQuery 1.8. Dette gir noen signifikante ytelsesøkninger i form av en fullstendig omskrevet Sizzle.js (selektormotoren for jQuery), sammen med mange andre forbedringer.

Avviket er at jQuery Mobile-teamet bestemte seg for at det var tid til solnedgangsstøtte for jQuery 1.6. Dette kan være uheldig for noen folk der ute som fortsatt bruker eldre versjoner av jQuery, men det er en rettferdig handel.

Listevisning Autodividers

Hvis du noen gang har hatt å administrere en liste over stadig skiftende mennesker, steder eller ting i jQuery Mobile, må du sannsynligvis måtte skrive litt vanskelig kode for å vise dynamiske listevisningsoverskrifter. Bummer som du brukte hele den tiden, fordi jQuery Mobile-teamet gjorde det like enkelt som å slippe i en enkelt attributt.

data-autodividers = "true"

Det gjør denne listen:

Inn i:

Vær oppmerksom på at dette ikke klarer sortering, gruppering eller filtrering. For den typen funksjonalitet, bør du vurdere å prøve min jQuery Mobile Tinysort-plugin.

Skrivebeskyttet lister

jQuery Mobile tilbyr "read-only" listevisninger, men det var vanskelig å fortelle at de ikke var klikkbare. Versjon 1.2 fjerner listens gradient, og gjør raden til en flat farge. Dette bør gi en bedre visuell signal til brukerne.

Bedre breddejusteringer på formelementer

Versjon 1.2 løser et semi-irriterende problem med formelementer, hvorved de ikke ville ta opp hele bredden av deres foreldreelement i noen tilfeller.

Ekstra enheter lagt til

Du har kanskje lagt merke til at nye enheter blir lagt til nesten daglig. JQuery Mobile-teamet gjør sitt beste for å teste mot så mange av disse enhetene som mulig. Nylig lagt til listen A-plattform er følgende enheter / operativsystemer / nettlesere: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox for Android og Kindle Fire HD.

---

Full liste over endringer

Du finner en komplett liste over endringene som er gjort for versjon 1.2 på jQuery Mobile-bloggen.

Jeg håper at noen av disse forbedringene vil bidra til å forbedre applikasjonene dine. Husk at jQuery Mobile-teamet er på din side! Hvis du ser noe du mener er verdifullt, spør etter det: Opprett et problem i Github-depotet, og foreslå det. Bedre enn, gaffel deres repo og legg til noen kode selv!