✅ Skapa applikationer med jQuery Mobile

Innehållsförteckning

jQuery Mobile är en plugin för den ursprungliga jQuery och kräver att den senare har installerats tidigare för att kunna fungera.
När den är aktiv, jQuery Mobile gör två saker:

För det första optimerar det inbyggda funktioner för att förbättra deras prestanda på mobila enheter.
För det andra, det modifierar HTML och genererar en layout med en serie fördefinierade grafiska element som väsentligt påskyndar produktionshastigheten.

Installera jQuery Mobile
Även om det är möjligt och en mycket vanlig teknik på webbplatser att installera jQuery Mobile genom att länka direkt till filer som lagras i molnet, rekommenderas det inte att använda den tekniken för PhoneGap -applikationer. Mycket ofta kommer din applikation att användas utan någon internetanslutning eller med en intermittent anslutning. Om jQuery -filerna är länkade till molndokument kan applikationen eventuellt bli oanvändbar.
För att installera detta ramverk är det första du bör göra att ladda ner jQuery från dess officiella sida:

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

När jQuery har laddats ner måste du ladda ner jQuery Mobile -tillägget från dess officiella webbplats:

http://jquerymobile.com/download/

Vi kommer att börja ett exempel som gör att vi kan förstå programmeringen och applikationens struktur.
Vi kommer att skapa en html -fil med följande kod

 Jquery mobilapplikation

jQuery Mobile tillåter oss att skapa mobilvänliga gränssnitt mycket snabbt och med relativt liten ansträngning.
Sättet fungerar genom att skriva om dokumentets ursprungliga kod och generera en ny, mer komplex kod, enligt egenskaperna och begärda argumenten.
En intressant egenskap hos jQuery Mobile är att, till skillnad från en webbplats, som går från ett HTML -dokument till ett annat för att visa information, hanteras sidorna eller skärmarna i ett program från ett enda HTML -dokument.
Sidorna eller skärmarna finns i en enda fil, jQuery Mobile hanterar dem för att bara visa den del av dokumentet som motsvarar varje skärm medan resten förblir dold. På detta sätt accelereras laddningen av sidor väsentligt, det gör det också möjligt att hantera händelser och animationer mellan en skärm och en annan.
jQuery Mobile drar full nytta av nya HTML5-element och använder sig av anpassade attribut som definieras med prefixet "data"
Till exempel dataroll, ett av de mest använda attributen i jQuery Mobile, låter dig definiera rollen på funktionsnivå och utseende för elementet som innehåller den. Genom att definiera ett elements roll kan du med detta attribut skapa sidor, knappar, menyer och många fler element.
Genom att infoga datarollsattributet i valfri tagg gör vi det till ett gränssnittselement. Du behöver inte lägga till någon ytterligare kod jQuery lägg till alla grafiska element, klasser och till och med animationer som är nödvändiga för driften av just det elementet.
Till exempel, för att skapa en sida använder du attributet data-role = ”sida” Således:


Skärm 1
Skärm 2

Att återvända

Exempellänken låter dig inte bara gå till skärm 2, jQuery Mobile inkluderade automatiskt en övergångsanimation för att ge den ett utseende som liknar den för en inbyggd applikation.
Låt oss ta länken som vi just skapat lite längre och lägg till jQuery Mobile-attributet data-role = ”button” så att den här länken beter sig som en knapp:
För att återgå till huvudsidan kan du använda den tidigare tekniken för att länka en länk till huvudsidans id, eller ännu enklare, du kan använda attributet data-rel = ”back” som återställer applikationen till den omedelbart föregående skärmen .Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng