✅ Opret applikationer med jQuery Mobile

Indholdsfortegnelse

jQuery Mobile er et plugin til den originale jQuery og kræver, at sidstnævnte er installeret tidligere at kunne fungere.
Når den er aktiv, jQuery Mobile gør to ting:

For det første optimerer det native funktioner for at forbedre deres ydeevne på mobile enheder.
For det andet ændrer det HTML og genererer et layout med en række foruddefinerede grafiske elementer, der væsentligt fremskynder produktionshastigheden.

Installer jQuery Mobile
Selvom det er muligt og en meget almindelig teknik på websteder at installere jQuery Mobile ved at linke direkte til filer, der er gemt i skyen, anbefales det stærkt ikke at anvende denne teknik til PhoneGap -applikationer. Meget ofte vil din applikation blive brugt uden internetforbindelse eller med en intermitterende forbindelse. Hvis jQuery -filerne er knyttet til cloud -dokumenter, vil applikationen muligvis blive ubrugelig.
For at installere denne ramme er det første du skal gøre at downloade jQuery fra den officielle side:

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

Når jQuery er downloadet, skal du downloade jQuery Mobile -pluginet fra dets officielle websted:

http://jquerymobile.com/download/

Vi starter et eksempel, der giver os mulighed for at forstå programmeringen og applikationens struktur.
Vi opretter en html -fil med følgende kode

 Jquery mobilapplikation

jQuery Mobile giver os mulighed for at oprette mobilvenlige grænseflader meget hurtigt og med relativt lille indsats.
Den måde, det fungerer på, er ved at omskrive dokumentets originale kode og generere en ny, mere kompleks, i henhold til egenskaberne og efterspurgte argumenter.
Et interessant træk ved jQuery Mobile er, at i modsætning til et websted, der går fra et HTML -dokument til et andet for at vise oplysninger, håndteres siderne eller skærmbillederne i et program fra et enkelt HTML -dokument.
Siderne eller skærmbillederne er i en enkelt fil, jQuery Mobile administrerer dem til kun at vise den del af dokumentet, der svarer til hver skærm, mens resten forbliver skjult. På denne måde accelereres indlæsning af sider væsentligt, det tillader også håndtering af begivenheder og animationer mellem en skærm og en anden.
jQuery Mobile drager fuld fordel af nye HTML5-elementer og gør stor brug af tilpassede attributter, der er defineret med "data-" præfikset
For eksempel datarolle, en af de mest brugte attributter i jQuery Mobile, giver dig mulighed for at definere rollen på funktionalitetsniveau og udseende af det element, der indeholder den. Ved at definere et elements rolle giver denne attribut dig mulighed for at oprette sider, knapper, menuer og mange flere elementer.
Ved at indsætte data-role-attributten i et hvilket som helst tag gør vi det til et interface-element. Ingen grund til at tilføje yderligere kode jQuery tilføj alle de grafiske elementer, klasser og endda animationer, der er nødvendige for driften af det pågældende element.
For at oprette en side bruger du f.eks. Attributten data-role = ”side” dermed:


Skærm 1
Skærm 2

At vende tilbage

Eksempellinket giver dig ikke kun mulighed for at gå til skærm 2, jQuery Mobile inkluderede automatisk en overgangsanimation for at give det et udseende, der ligner det i en native applikation.
Lad os tage det link, vi lige har oprettet, lidt længere og tilføje jQuery Mobile-attributten data-role = ”knap”, så dette link opfører sig som en knap:
For at vende tilbage til hovedsiden kan du anvende den tidligere teknik til at linke et link til hovedsidens id, eller endnu enklere, du kan bruge attributten data-rel = ”back”, der vender programmet tilbage til den umiddelbart forrige skærm .Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt