✅ Applicaties maken met jQuery Mobile

Inhoudsopgave

jQuery Mobile is een plug-in van de originele jQuery en vereist dat de laatste eerder is geïnstalleerd te kunnen functioneren.
Eenmaal actief, jQuery Mobiel doet twee dingen:

Ten eerste optimaliseert het native functies om hun prestaties op mobiele apparaten te verbeteren.
Ten tweede wijzigt het de HTML en genereert het een lay-out met een reeks vooraf gedefinieerde grafische elementen die de productiesnelheid aanzienlijk verhogen.

jQuery Mobile installeren
Hoewel het mogelijk en een veel voorkomende techniek op websites is om jQuery Mobile te installeren door rechtstreeks te linken naar bestanden die in de cloud zijn opgeslagen, wordt het ten zeerste aanbevolen om die techniek niet toe te passen voor PhoneGap-applicaties. Heel vaak wordt uw applicatie gebruikt zonder internetverbinding of met een intermitterende verbinding. Als de jQuery-bestanden worden gekoppeld aan clouddocumenten, zou de applicatie mogelijk onbruikbaar worden.
Om dit framework te installeren, moet u eerst jQuery downloaden van de officiële pagina:

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

Nadat jQuery is gedownload, moet u de jQuery Mobile-plug-in downloaden van de officiële website:

http://jquerymobile.com/download/

We zullen een voorbeeld starten waarmee we de programmering en de structuur van de applicatie kunnen begrijpen.
We zullen een html-bestand maken met de volgende code:

 JQuery mobiele applicatie

jQuery Mobile stelt ons in staat om zeer snel en met relatief weinig inspanning mobielvriendelijke interfaces te maken.
De manier waarop het werkt is door de originele code van het document te herschrijven en een nieuwe, complexere code te genereren, in overeenstemming met de kenmerken en gevraagde argumenten.
Een interessant kenmerk van jQuery Mobile is dat, in tegenstelling tot een website, die van het ene HTML-document naar het andere gaat om informatie weer te geven, de pagina's of schermen van een applicatie worden afgehandeld vanuit een enkel HTML-document.
De pagina's of schermen bevinden zich in een enkel bestand, jQuery Mobile beheert ze om alleen het deel van het document weer te geven dat overeenkomt met elk scherm, terwijl de rest verborgen blijft. Op deze manier wordt het laden van pagina's aanzienlijk versneld, het maakt het ook mogelijk om evenementen en animaties tussen het ene scherm en het andere te beheren.
jQuery Mobiel maakt optimaal gebruik van nieuwe HTML5-elementen en maakt intensief gebruik van aangepaste kenmerken die zijn gedefinieerd met het voorvoegsel "data-"
Bijvoorbeeld data-rol, een van de meest gebruikte attributen in jQuery Mobile, stelt u in staat om de rol te definiëren op het niveau van functionaliteit en uiterlijk van het element dat het bevat. Door de rol van een element te definiëren, kunt u met dit attribuut pagina's, knoppen, menu's en nog veel meer elementen maken.
Door het data-rolattribuut in een tag in te voegen, maken we er een interface-element van. Geen extra code nodig jQuery voeg alle grafische elementen, klassen en zelfs animaties toe die nodig zijn voor de werking van dat specifieke element.
Om bijvoorbeeld een pagina te maken, gebruikt u het attribuut data-rol = ”pagina” dus:


Scherm 1
Scherm 2

Terugbrengen

Met de voorbeeldlink kun je niet alleen naar scherm 2 gaan, jQuery Mobile heeft automatisch een overgangsanimatie toegevoegd om het een uiterlijk te geven dat lijkt op dat van een native applicatie.
Laten we de link die we zojuist hebben gemaakt een beetje verder nemen en het jQuery Mobile-attribuut data-role = ”button” toevoegen, zodat deze link zich als een knop gedraagt:
Om terug te keren naar de hoofdpagina, kunt u de vorige techniek toepassen om een link aan de id van de hoofdpagina te koppelen, of nog eenvoudiger, u kunt het attribuut data-rel = "terug" gebruiken dat de toepassing terugbrengt naar het onmiddellijk vorige scherm .Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven