Учебники

jQuery Mobile — Переходы

Это позволяет изменять значения свойств, которые происходят в течение указанной продолжительности, и изменяет поведение элемента из одного состояния в другое, применяя различные стили для каждого состояния.

В следующей таблице перечислены некоторые переходы страниц, используемые в платформе jQuery Mobile.

Sr.No. Переход и описание Для страниц Для диалогов
1

увядать

Вы можете сделать элементы постепенно исчезающими и видимыми.

Fade Page Исчезать диалог
2

кувырок

Переверните элементы спереди назад на следующую страницу.

Перевернуть страницу Flip Dialog
3

поп

Вы можете создать всплывающее окно.

Pop Page Pop Dialog
4

течь

Отобразите следующую страницу, не открывая текущую страницу.

Flow Page Flow Dialog
5

горка

Вы можете перемещать страницу справа налево.

Слайд-страница Слайд Диалог
6

slidefade

Перемещает страницу справа налево и исчезает на следующей странице.

Slidefade Page Slidefade Dialog
7

скользить вверх

Перемещает страницу снизу вверх.

Slideup Page Slideup Dialog
8

скользить вниз

Перемещает страницу сверху вниз.

Страница слайдов Диалог слайдов
9

очередь

Вы можете перейти на следующую страницу.

Перевернуть страницу Turn Dialog
10

никто

Вы не можете использовать любой эффект перехода с помощью этого атрибута.

Ни одна страница Диалог

увядать

Вы можете сделать элементы постепенно исчезающими и видимыми.

кувырок

Переверните элементы спереди назад на следующую страницу.

поп

Вы можете создать всплывающее окно.

течь

Отобразите следующую страницу, не открывая текущую страницу.

горка

Вы можете перемещать страницу справа налево.

slidefade

Перемещает страницу справа налево и исчезает на следующей странице.

скользить вверх

Перемещает страницу снизу вверх.

скользить вниз

Перемещает страницу сверху вниз.

очередь

Вы можете перейти на следующую страницу.

никто

Вы не можете использовать любой эффект перехода с помощью этого атрибута.

Настройка перехода и глобальной конфигурации

По умолчанию страницы будут иметь постепенный переход в рамках. Вы можете использовать пользовательские переходы, добавив к ссылке атрибут data-transition . Вы можете использовать различные эффекты перехода по умолчанию для страницы, используя опцию defaultPageTransition глобально. Для диалогов вы можете использовать опцию defaultDialogTransition .

Резервный переход

Все переходы поддерживают 3D-преобразования, кроме перехода с затуханием. Устройства, которые не поддерживают 3D-преобразование, должны будут использовать переход с постепенным исчезновением. Некоторые браузеры не поддерживают трехмерные преобразования для каждого типа перехода, поэтому вы можете использовать затухание в качестве резервного перехода по умолчанию.

Макс прокрутки для переходов

Переходы не устанавливаются ни на одно при прокрутке со страницы или на страницу, и положение прокрутки будет в три раза больше высоты экрана устройства. Иногда вы можете отреагировать медленно или браузер может аварийно завершить работу при нажатии на любой элемент навигации; поэтому, чтобы избежать этого, мы используем позицию прокрутки для перехода с помощью функции getMaxScrollForTransition .

Максимальная ширина для переходов

Вы можете отключить переход, когда ширина окна превышает ширину пикселя. Вы можете настроить максимальную ширину для переходов, используя глобальную опцию $ .mobile.maxTransitionWidth , для которой по умолчанию установлено значение false. Он принимает значения, такие как ширина пикселя или ложное значение, и для перехода будет задано значение none, если оно не является ложным значением, когда окно превышает указанное значение.

Переход той же страницы

Вы можете добавить переходы к текущей странице, используя опцию allowSamePageTransition метода change () виджета контейнера страницы.

Создание пользовательских переходов

Вы можете создавать собственные переходы на странице, используя параметр $ .mobile.transitionHandlers, который расширяет выбор переходов на веб-сайте или в приложении.