Транзитивы jQuery Mobile

jQuery Mobile включает CSS-эффекты, которые позволяют выбирать способ открытия страницы.

Эффекты перехода jQuery Mobile

jQuery Mobile имеет множество эффектов, которые позволяют过渡 от одной страницы к следующей.

Примечание:Для реализации эффектов перехода браузер должен поддерживать CSS3 3D-трансформации:

Поддержка браузеров

  • Internet Explorer 10 поддерживает 3D-трансформации (ранние версии не поддерживаются)
  • Opera по-прежнему не поддерживает 3D-трансформации

Эффекты перехода могут применяться к любым ссылкам или формам, поданным с использованием атрибута data-transition:

<a href="#anylink" data-transition="slide">Перейти на страницу два</a>

Ниже приведена таблица, показывающая доступные переходы, которые можно использовать вместе с атрибутом data-transition:

Переход Описание Тест
fade По умолчанию. Фading in и out на следующую страницу. Тест
flip Переворачивать向后 на следующую страницу. Тест
flow Перевести текущую страницу и перейти на следующую. Тест
pop Перейти на следующую страницу, как弹出窗口. Тест
slide Пролистать влево на следующую страницу. Тест
slidefade Пролистать влево и淡ить на следующую страницу. Тест
slideup Пролистать вверх на следующую страницу. Тест
slidedown Пролистать вниз на следующую страницу. Тест
turn Перейти на следующую страницу. Тест
none Без переходных эффектов. Тест

Совет:В jQuery Mobile эффекты淡入淡出 по умолчанию применяются ко всем ссылкам (если браузер поддерживает их).

Совет:Все перечисленные эффекты поддерживают обратное действие, например, если вы хотите, чтобы страница скользила слева направо, а не справа налево, используйте атрибут data-direction с значением "reverse". По умолчанию это значение используется на кнопке назад.

Пример

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Скользить</a>

Попробуйте сами