Przejścia jQuery Mobile

jQuery Mobile zawiera efekty CSS, które pozwalają wybrać sposób otwierania strony.

Efekty przejścia jQuery Mobile

jQuery Mobile ma serię efektów dotyczących przejścia z jednej strony do następnej.

Uwaga:Aby osiągnąć efekty przejścia, przeglądarka musi obsługiwać transformacje 3D CSS3:

Obsługa przeglądarki

  • Internet Explorer 10 obsługuje transformacje 3D (starsze wersje nie obsługują)
  • Opera wciąż nie obsługuje transformacji 3D

Efekty przejścia mogą być zastosowane do dowolnego linku lub formularza z użyciem atrybutu data-transition:

<a href="#anylink" data-transition="slide">Przejdź do strony drugiej</a>

Poniższa tabela pokazuje dostępne przejścia, które można użyć razem z atrybutem data-transition:

Przejście Opis Test
Fade Domyślne. Wchód i wyjście do następnej strony. Test
Flip Przejdź do następnej strony od tyłu do przodu. Test
Flow Wypruć bieżącą stronę i wprowadź następną stronę. Test
Pop Przejdź do następnej strony jak okno wyskakujące. Test
Slide Przesuń w lewo do następnej strony. Test
Slidefade Przesuń w lewo od prawej i wchód do następnej strony. Test
Slideup Przesuń w górę od dołu do następnej strony. Test
Slidedown Przesuń w dół od góry do następnej strony. Test
Przejdź Przejdź do następnej strony. Test
Brak Brak efektu przejścia. Test

Wskazówka:W jQuery Mobile, efekt wchodzenia i wyjścia jest domyślny dla wszystkich linków (jeśli przeglądarka go obsługuje).

Wskazówka:Wszystkie powyższe efekty wspiera również ruch w przeciwnym kierunku, na przykład, jeśli chcesz, aby strona przesuwała się od lewej do prawej, zamiast od prawej do lewej, użyj wartości "reverse" dla atrybutu data-direction. Jest to wartość domyślna dla przycisku cofania.

Przykład

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Przesuń</a>

Spróbuj sam