Navigering med Links i jQuery Mobile

jQuery Mobile er designet til at revolutionere den måde, vi oplever mobilwebsteder på. Kernen i dets funktionalitet er en intelligent tilgang til sideovergange og navigation, som bygger oven på standard HTML-linkkonventioner og tilføjer et lag af Ajax-funktionalitet. Dette skaber en utroligt flydende og app-lignende oplevelse, der ellers ville være svær at opnå med traditionelle HTTP-anmodninger. Målet er at give udviklere mulighed for at skabe hjemmesider efter bedste praksis, hvor almindelige links 'bare fungerer' uden særlig konfiguration, samtidig med at de leverer en rig, indbygget-lignende oplevelse, der ikke kan opnås med standard HTTP-anmodninger.

Denne artikel dykker ned i, hvordan jQuery Mobile håndterer linkadfærd, både når den bruger Ajax som standard, og når den bevidst undgår det. Vi vil udforske de forskellige scenarier, du kan støde på, fra simple sidekoblinger til komplekse multi-side dokumenter og 'tilbage'-knap funktionalitet. Ved at forstå disse mekanismer kan du optimere din jQuery Mobile applikation for den bedst mulige brugeroplevelse og ydeevne.

Standard Linkadfærd: Ajax som Standard

For at muliggøre animerede sideovergange vil alle links, der peger på en ekstern side (f.eks. produkter.html), som standard blive indlæst via Ajax. jQuery Mobile opnår dette på en diskret måde ved at parse linkets href-attribut for at formulere en Ajax-anmodning, en teknik kendt som Hijax. Dette gøres automatisk af frameworket, og en indlæsningsindikator (spinner) vises for at informere brugeren om, at indholdet indlæses.

Når Ajax-anmodningen er vellykket, tilføjes det nye sideindhold til DOM-injektion, alle mobile widgets initialiseres automatisk, og derefter animeres den nye side ind i visningen med en sideovergang. Denne proces er sømløs og giver en følelse af, at brugeren navigerer inden for én applikation snarere end mellem separate websider.

Skulle Ajax-anmodningen fejle, vil frameworket vise en lille fejlmeddelelse (typisk stylet med 'a'-swatch), der forsvinder efter kort tid for ikke at bryde navigationsflowet. Dette er en robust mekanisme, der sikrer, at selvom noget går galt, forbliver brugeroplevelsen så uforstyrret som muligt.

Det er dog vigtigt at bemærke en begrænsning: Du kan ikke linke til et multi-side dokument med aktiv Ajax-navigation. Frameworket vil kun indlæse den første side, det finder i dokumentet, ikke hele sættet af interne sider. I disse tilfælde skal du linke uden Ajax (hvilket vi dækker i næste afsnit) for at tvinge en fuld side-genindlæsning, hvilket forhindrer potentielle hash-kollisioner. Der findes dog plugins, såsom et subpage-plugin, der kan gøre det muligt at indlæse multi-side dokumenter.

Links Uden Ajax: Fuld Side-Genindlæsning

Selvom Ajax-navigation er standardadfærd i jQuery Mobile, er der scenarier, hvor en fuld side-genindlæsning er nødvendig eller ønskelig. Links, der peger på andre domæner, eller som har attributterne rel="external", data-ajax="false" eller target, vil ikke blive indlæst med Ajax. I stedet vil disse links forårsage en fuld side-genindlæsning uden animeret overgang.

Både rel="external" og data-ajax="false" har samme effekt, men en forskellig semantisk betydning: rel="external" bør bruges, når du linker til et andet site eller domæne, mens data-ajax="false" er nyttig til simpelthen at fravælge en side inden for dit eget domæne fra at blive indlæst via Ajax. På grund af sikkerhedsbegrænsninger fravælger frameworket altid links til eksterne domæner fra Ajax-adfærd. Dette er afgørende for at forhindre potentielle cross-site scripting (XSS) sårbarheder og andre sikkerhedsproblemer.

I version 1.1 introducerede jQuery Mobile understøttelse af at bruge data-ajax="false" på en overordnet container. Dette giver dig mulighed for at udelukke et stort antal links fra Ajax-navigationssystemet, hvilket eliminerer behovet for at tilføje denne attribut til hvert enkelt link i en container. For at aktivere denne funktionalitet skal $.mobile.ignoreContentEnabled dog sættes til true, da denne funktion tilføjer en vis overhead, som ikke er aktiveret som standard.

En vigtig anbefaling: Når du bygger en jQuery Mobile-applikation, hvor Ajax-navigationssystemet er globalt deaktiveret eller ofte deaktiveret på individuelle links, anbefales det at deaktivere den globale konfigurationsmulighed $.mobile.pushStateEnabled. Dette hjælper med at undgå inkonsekvent navigationsadfærd i nogle browsere, især dem der understøtter HTML5 History API.

Links inden for et Multi-side Dokument

Et enkelt HTML-dokument kan indeholde en eller flere 'side'-containere simpelthen ved at stable flere div-elementer med en data-role="page"-attribut. Dette giver dig mulighed for at bygge et lille site eller en applikation inden for et enkelt HTML-dokument. jQuery Mobile vil simpelthen vise den første 'side', det finder i kildekoden, når siden indlæses.

Hvis et link i et multi-side dokument peger på et anker (f.eks. #foo), vil frameworket lede efter en side-wrapper med den pågældende ID (id="foo"). Hvis den finder en side i HTML-dokumentet, vil den overføre den nye side til visning med en animeret overgang. Du kan problemfrit navigere mellem lokale, interne 'sider' og eksterne sider i jQuery Mobile. Begge vil se ens ud for slutbrugeren, bortset fra at eksterne sider vil vise Ajax-spinneren under indlæsning.

I begge situationer opdaterer jQuery Mobile sidens URL-hash for at muliggøre understøttelse af 'Tilbage'-knappen, deep-linking og bogmærkning. Dette er en central del af jQuery Mobiles single-page applikationsmodel, da den giver brugerne en forventet browseradfærd, selvom de teknisk set ikke navigerer til en ny URL.

Det er vigtigt at bemærke, at hvis du linker fra en mobilside, der blev indlæst via Ajax, til en side, der indeholder flere interne sider, skal du tilføje en rel="external" eller data-ajax="false" til linket. Dette fortæller frameworket at udføre en fuld side-genindlæsning for at rydde Ajax-hashen i URL'en. Dette er kritisk, fordi Ajax-sider bruger hashen (#) til at spore Ajax-historikken, mens flere interne sider bruger hashen til at angive interne sider, så der vil være hash-konflikter mellem disse to tilstande. Et eksempel på et sådant link ville se ud som:

<a href="multipage.html" rel="external">Multi-side link</a>

'Tilbage'-knap Links

Hvis du bruger attributten data-rel="back" på et anker, vil alle klik på dette anker efterligne browserens 'Tilbage'-knap, gå et historikindlæg tilbage og ignorere ankerets standard href. Dette er særligt nyttigt, når du genererer 'tilbage'-knapper med JavaScript, f.eks. en knap til at lukke en dialogboks. Denne funktion giver en intuitiv måde at navigere tilbage på, som brugere er vant til fra deres browser.

Når du bruger denne funktion i din kildemarkup, skal du sørge for stadig at give en meningsfuld værdi i href-attributten, der faktisk peger på URL'en til den henvisende side. Selvom browsere, der understøtter denne funktion, ikke vil bruge den specificerede href, er det vigtigt for at give en fallback for brugere i C-grade browsere (ældre eller mindre avancerede browsere, der ikke fuldt ud understøtter alle jQuery Mobiles funktioner). Hvis brugere kan nå denne side fra mere end én henvisende side, skal du specificere en fornuftig href, så navigationen forbliver logisk for alle brugere.

Derudover skal du huske, at hvis du bare ønsker en omvendt overgang uden faktisk at gå tilbage i historikken, skal du bruge attributten data-direction="reverse" i stedet. Det er vigtigt at forstå forskellen: data-direction="reverse" er udelukkende beregnet til at køre den baglæns version af den overgang, der vil køre på den sideændring. I modsætning hertil gør data-rel="back" linket funktionelt ækvivalent med browserens 'Tilbage'-knap, og al standard 'Tilbage'-knap logik gælder. At tilføje data-direction="reverse" til et link med data-rel="back" vil ikke vende den omvendte sideovergang og producere den 'normale' version af overgangen; det vil blot sikre, at den 'tilbage'-navigation, der finder sted, bruger den omvendte animation.

Omdirigeringer og Links til Mapper

Når du linker til mappeindekser (f.eks. href="typerafkatte/" i stedet for href="typerafkatte/index.html"), skal du angive et trailing slash (skråstreg i slutningen). Dette skyldes, at jQuery Mobile antager, at sektionen efter det sidste '/' tegn i en URL er et filnavn, og den vil fjerne denne sektion, når den opretter base-URL'er, hvorfra fremtidige sider vil blive refereret. Uden trailing slash vil frameworket potentielt misforstå URL'en og forsøge at indlæse en ikke-eksisterende fil, eller opbygge forkerte relative stier.

Du kan dog omgå dette problem ved at returnere din side-div med en data-url-attribut, der allerede er specificeret. Når du gør dette, vil jQuery Mobile bruge denne attributs værdi til at opdatere URL'en i browserens historik, i stedet for den URL, der blev brugt til at anmode om siden. Dette giver dig også mulighed for at returnere URL'er, der ændres som følge af en omdirigering. For eksempel kan du sende en formular til "/login.html", men returnere en side fra URL'en "/account" efter en vellykket indsendelse. Dette værktøj giver dig kontrol over jQuery Mobile historikstakken i disse situationer, hvilket er afgørende for korrekte bogmærker og 'tilbage'-knap funktionalitet efter omdirigeringer.

Vigtige Link-noter

Det ikke-standardmiljø, der skabes af jQuery Mobiles sidenavigationsmodel, introducerer nogle betingelser, som du bør være opmærksom på, når du bygger sider:

• URL-struktur: Vær opmærksom på, hvordan jQuery Mobile fortolker og manipulerer URL'er, især med hensyn til 'trailing slashes' og håndtering af interne og eksterne links.
• Hash-baseret Historik: Forstå, at jQuery Mobile bruger URL-hashen til at opretholde sin navigationshistorik for Ajax-indlæste sider. Dette er afgørende for 'Tilbage'-knap funktionalitet og deep-linking.
• Konflikter med Multi-side Dokumenter: Husk den potentielle konflikt mellem Ajax-hashhistorik og multi-side dokumenters interne hash-navigation. Brug rel="external" eller data-ajax="false" for at undgå problemer.
• Ydeevneovervejelser: Selvom Ajax-navigation er designet til at være hurtig, kan komplekse sider eller langsomme servere stadig påvirke indlæsningstiderne. Optimer altid din serverrespons og dit klient-side JavaScript.
• Progressiv Forbedring: jQuery Mobile er bygget med progressiv forbedring i tankerne. Selvom JavaScript fejler eller ikke er tilgængeligt, vil dine standardlinks stadig fungere (dog uden de avancerede overgange og Ajax-fordele).

Sammenligning af Linkadfærd

Ofte Stillede Spørgsmål (FAQ)

Hvorfor fungerer mine links ikke med Ajax?

Dine links vil ikke bruge Ajax, hvis de peger på et andet domæne, eller hvis de har attributterne rel="external", data-ajax="false" eller target. Sørg også for, at du ikke linker til et multi-side dokument fra en Ajax-indlæst side uden at bruge rel="external" eller data-ajax="false".

Hvordan linker jeg til et dokument med flere sider?

Hvis du linker til et multi-side dokument fra en side, der allerede er indlæst via Ajax, skal du tilføje rel="external" eller data-ajax="false" til dit link. Dette tvinger en fuld side-genindlæsning, hvilket er nødvendigt for at undgå hash-konflikter.

Hvad er forskellen på data-rel="back" og data-direction="reverse"?

data-rel="back" får linket til at fungere som browserens 'Tilbage'-knap, hvilket navigerer tilbage i historikken. data-direction="reverse" bruges kun til at vende animationen af en overgang, uden at ændre navigationshistorikken. De er separate funktioner og bør ikke forveksles.

Skal jeg altid bruge et "trailing slash" til mapper?

Ja, når du linker til en mappe (f.eks. "/minmappe/"), skal du inkludere et trailing slash. Uden det kan jQuery Mobile fejlagtigt fortolke det som et filnavn, hvilket kan føre til forkerte stier eller indlæsningsfejl.

Hvad gør data-url attributten?

data-url attributten på en data-role="page" div giver dig kontrol over den URL, der gemmes i browserens historik for den pågældende side. Dette er især nyttigt, hvis din server udfører omdirigeringer, og du ønsker, at den endelige URL skal afspejle den aktuelle side i jQuery Mobile's historikstak.

At mestre jQuery Mobiles navigationssystem er afgørende for at bygge effektive og brugervenlige mobilwebsteder. Ved at udnytte den automatiske Ajax-navigation, hvor det er muligt, og bevidst fravælge den, når det er nødvendigt, kan du skabe en oplevelse, der føles hurtig, flydende og indbygget for dine brugere. Forståelse af de nuancer, der er beskrevet i denne artikel, vil give dig værktøjerne til at navigere i kompleksiteten af mobile webapplikationer og levere enestående brugeroplevelser.

Hvis du vil læse andre artikler, der ligner Navigering med Links i jQuery Mobile, kan du besøge kategorien Teknologi.