✅ Lag applikasjoner med jQuery Mobile

Innholdsfortegnelse

jQuery Mobile er et plugin for den opprinnelige jQuery og krever at sistnevnte er installert tidligere å kunne fungere.
Når den er aktiv, jQuery Mobile gjør to ting:

For det første optimaliserer den native funksjoner for å forbedre ytelsen på mobile enheter.
For det andre endrer den HTML og genererer et oppsett med en serie forhåndsdefinerte grafiske elementer som vesentlig øker produksjonshastigheten.

Installer jQuery Mobile
Selv om det er mulig og en veldig vanlig teknikk på nettsteder å installere jQuery Mobile ved å koble direkte til filer som er lagret i skyen, anbefales det sterkt å ikke bruke denne teknikken for PhoneGap -applikasjoner. Svært ofte vil søknaden din bli brukt uten internettforbindelse eller med en periodisk tilkobling. Hvis jQuery -filene er koblet til skydokumenter, kan programmet muligens bli ubrukelig.
For å installere dette rammeverket, er det første du bør gjøre å laste ned jQuery fra den offisielle siden:

http://docs.jQuery.com/Downloading_jQuery#Current_Release

Når jQuery er lastet ned, må du laste ned jQuery Mobile -pluginet fra det offisielle nettstedet:

http://jquerymobile.com/download/

Vi starter et eksempel som lar oss forstå programmeringen og strukturen til applikasjonen.
Vi lager en html -fil med følgende kode

 Jquery mobilapplikasjon

jQuery Mobile lar oss lage mobilvennlige grensesnitt veldig raskt og med relativt liten innsats.
Måten den fungerer på er ved å omskrive den originale koden til dokumentet og generere en ny, mer kompleks, i henhold til egenskapene og forespurte argumenter.
Et interessant trekk ved jQuery Mobile er at i motsetning til et nettsted, som går fra ett HTML -dokument til et annet for å vise informasjon, håndteres sidene eller skjermbildene i et program fra et enkelt HTML -dokument.
Sidene eller skjermbildene er i en enkelt fil, jQuery Mobile klarer dem for å vise bare den delen av dokumentet som tilsvarer hver skjerm mens resten forblir skjult. På denne måten blir lasting av sider vesentlig akselerert, det gjør det også mulig å administrere hendelser og animasjoner mellom en skjerm og en annen.
jQuery Mobile drar full nytte av nye HTML5-elementer og bruker mye egendefinerte attributter som er definert med "data-" prefikset
For eksempel data-rolle, en av de mest brukte attributtene i jQuery Mobile, lar deg definere rollen på funksjonalitetsnivå og utseende på elementet som inneholder den. Ved å definere rollen til et element, lar dette attributtet deg lage sider, knapper, menyer og mange flere elementer.
Ved å sette inn data-roll-attributtet i en hvilken som helst tag, gjør vi det til et grensesnittelement. Du trenger ikke legge til noen ekstra kode jQuery legg til alle de grafiske elementene, klassene og til og med animasjonene som er nødvendige for driften av det aktuelle elementet.
For eksempel, for å opprette en side, bruker du attributtet data-role = ”side” og dermed:


Skjerm 1
Skjerm 2

Å returnere

Eksempelkoblingen lar deg ikke bare gå til skjerm 2, jQuery Mobile inkluderte automatisk en overgangsanimasjon for å gi den et utseende som ligner på en opprinnelig applikasjon.
La oss ta koblingen vi nettopp opprettet, og legge til jQuery Mobile-attributtet data-role = ”button” slik at denne lenken oppfører seg som en knapp:
For å gå tilbake til hovedsiden, kan du bruke den forrige teknikken for å koble en lenke til ID-en til hovedsiden, eller enda enklere, du kan bruke attributtet data-rel = ”back” som returnerer programmet til det forrige skjermbildet umiddelbart .Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng