jQuery Mobile Переходы
jQuery Mobile включает эффекты CSS3, позволяющие выбрать способ открытия страниц.
Эффекты перехода страниц jQuery Mobile
jQuery Mobile предоставляет различные эффекты для перехода на следующую страницу.
Примечание:Для достижения эффектов перехода между страницами браузер должен поддерживать 3D-переходы CSS3:
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
Числа в таблице указывают минимальную версию браузера, поддерживающую 3D-поворот.
Эффекты перехода между страницами можно применять к любой ссылке или форме с помощью атрибута data-transition:
Эффекты перехода между страницами можно применять к любой ссылке или отправке формы с помощью атрибута data-transition:
<a href="../index.html" data-transition="slide">切换到第二个页面</a>
В таблице ниже показаны переходы между страницами, доступные при использовании атрибута data-transition:
| Переход | Описание | Page | Диалог |
|---|---|---|---|
| fade | По умолчанию. Плавное появление следующей страницы | Попробуйте | Попробуйте |
| flip | Переворот с обратной стороны на лицевую при переходе на следующую страницу | Попробуйте | Попробуйте |
| flow | Вытолкнуть текущую страницу и перейти на следующую страницу | Попробуйте | Попробуйте |
| pop | Перейти на следующую страницу, как во всплывающем окне. | Попробуйте | Попробуйте |
| slide | Скольжение к следующей странице справа налево. | Попробуйте | Попробуйте |
| slidefade | Скольжение справа налево и плавное появление следующей страницы. | Попробуйте | Попробуйте |
| slideup | Скольжение к следующей странице снизу вверх. | Попробуйте | Попробуйте |
| slidedown | Скольжение к следующей странице сверху вниз. | Попробуйте | Попробуйте |
| turn | Поворот к следующей странице. | Попробуйте | Попробуйте |
| none | Без эффекта перехода. | Попробуйте | Попробуйте |
 |
В jQuery Mobile все ссылки по умолчанию используют переход fade (если браузер его поддерживает). |
|---|
Совет:Все вышеперечисленные эффекты поддерживают поведение при возврате назад. Например, если вы хотите, чтобы страница скользила слева направо, а не справа налево, используйте атрибут data-direction со значением "reverse". Это значение по умолчанию для кнопок «Назад».
Пример
Попробуйте »