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">페이지 2로 이동</a>

아래 표는 data-transition 속성과 함께 사용할 수 있는 사용할 수 있는 전환을 보여줍니다：

전환 설명 테스트
fade 기본. 다음 페이지로 애니메이션 효과로 이동. 테스트
flip 뒤에서 앞으로 뒤집어 다음 페이지로 이동. 테스트
flow 현재 페이지를 투척하고 다음 페이지를 가져옵니다. 테스트
pop 팝업 창과 같이 다음 페이지로 이동. 테스트
slide 오른쪽에서 왼쪽으로 슬라이딩하여 다음 페이지로 이동. 테스트
slidefade 오른쪽에서 왼쪽으로 슬라이딩하여 점진적으로 다음 페이지로 이동. 테스트
slideup 아래에서 위로 슬라이딩하여 다음 페이지로 이동. 테스트
slidedown 위에서 아래로 슬라이딩하여 다음 페이지로 이동. 테스트
turn 다음 페이지로 이동. 테스트
none 이동 효과 없음. 테스트

안내:jQuery Mobile에서는 모든 링크에 대해 애니메이션 효과가 기본적으로 설정되어 있습니다. (브라우저가 지원하는 경우).

안내:위의 모든 효과는 반대 작용을 지원합니다. 예를 들어, 페이지가 왼쪽에서 오른쪽으로 슬라이드되기를 원하면, "reverse" 값을 가진 data-direction 속성을 사용하십시오. 뒤로 가기 버튼에서 기본적으로 사용됩니다.

예제

<a href="#pagetwo" data-transition="slide" data-direction="reverse">스와이프</a>

본인이 직접 시도해보세요