jQuery Mobile overgang

jQuery Mobile indeholder CSS-effekter, der lader dig vælge, hvordan en side åbnes.

jQuery Mobile-overgange

jQuery Mobile har en række effekter for, hvordan man overgår fra en side til en anden.

Bemærk:For at implementere overgangseffekter skal browseren understøtte CSS3 3D-convertering:

Browserunderstøttelse

  • Internet Explorer 10 understøtter 3D-convertering (tidligere versioner understøtter ikke)
  • Opera understøtter stadig ikke 3D-convertering

Overgangseffekter kan anvendes på ethvert link eller ved at bruge data-transition-attributten til formularindsendelse:

<a href="#anylink" data-transition="slide"> glide til side to</a>

Følgende tabel viser de tilgængelige overgange, der kan bruges sammen med data-transition-attributten:

Overgang Beskrivelse Test
fade Standard. Fade-in / fade-out til næste side. Test
flip Blænd fra bagsiden til forside til næste side. Test
flow Vælg den aktuelle side fra og introducer næste side. Test
pop Gå til næste side som en pop-up-vindue. Test
slide Glid fra højre til venstre til næste side. Test
slidefade Glid fra højre til venstre og fade-in til næste side. Test
slideup Glid op fra bunden til næste side. Test
slidedown Glid ned fra øverste til næste side. Test
turn Gå til næste side. Test
none Ingen overgangseffekt. Test

Tip:I jQuery Mobile er fade-in / fade-out-effekten standard på alle links (hvis browseren understøtter det).

Tip:Alle effekter understøtter samtidig omvendt handling, f.eks. hvis du vil have, at siden glider fra venstre til højre i stedet for fra højre til venstre, skal du bruge værdien "reverse" for data-direction-attributten. Dette er standard på tilbage-knappen.

Eksempel

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Glid

Prøv det selv