jQuery 모바일 전환

jQuery Mobile에는 페이지가 열리는 방식을 선택할 수 있는 CSS3 효과가 포함되어 있습니다.

jQuery Mobile 페이지 전환 효과

jQuery Mobile은 다음 페이지로 다양한 페이지 전환 효과를 제공합니다.

참고: 페이지 전환 효과를 얻으려면 브라우저가 CSS3 3D 전환을 지원해야 합니다.


12.0	10.0	16.0	4.0	15.0

표의 숫자는 3D 회전을 지원하는 최소 브라우저 버전 번호입니다.

페이지 전환 효과는 데이터 전환 속성을 사용하는 모든 링크 또는 양식에 적용할 수 있습니다.

페이지 전환 효과는 데이터 전환 속성을 사용하는 모든 링크 또는 양식 제출에 적용할 수 있습니다.

<a href="#anylink" data-transition="slide">切换到第二个页面</a>

아래 표는 다음과 같습니다. 데이터 전환 속성을 사용한 후 사용 가능한 페이지 전환 방법:

전환	설명	페이지	대화 상자
fade	default. 다음 페이지로 페이드	해 보세요	해 보세요
flip	뒤에서 앞으로 다음 페이지로 넘깁니다	해 보세요	해 보세요
flow	현재 페이지를 버리고 다음으로 들어가세요 page	사용해 보세요	사용해 보세요
pop	팝업처럼 다음 페이지로 이동합니다.	사용해 보세요	사용해 보세요
slide	오른쪽에서 왼쪽으로 스와이프하여 다음 페이지로 이동하세요.	사용해 보세요	사용해 보세요
slidefade	오른쪽에서 왼쪽으로 스와이프하고 다음 페이지로 페이드하세요.	사용해 보세요	사용해 보세요
slideup	아래에서 위로 다음 페이지로 슬라이드하세요.	사용해 보세요	사용해 보세요
slidedown	위에서 아래로 다음 페이지로 슬라이드하세요.	해 보세요	해 보세요
turn	다음 페이지로 넘어가세요.	사용해 보세요	사용해 보세요
없음	전환 효과가 없습니다.	사용해 보세요	사용해 보세요

	jQuery Mobile의 모든 링크에는 기본적으로 페이드 효과가 사용됩니다(브라우저에서 지원하는 경우).

팁: 위의 모든 효과는 등 동작을 지원합니다. 예를 들어 페이지를 오른쪽에서 왼쪽이 아닌 왼쪽에서 오른쪽으로 슬라이드하려면 "reverse" 값과 함께 data-direction 속성을 사용하세요. 이는 뒤로 버튼의 기본값입니다.

<a href="#pagetwo" data-transition="slide" data-direction="reverse">切换</a>

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요