07. jQuery Mobile 에서 페이지 트랜지션

Index

5. jQuery Mobile 의 단일 HTML 모델에 대한 이해

6. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용

7. jQuery Mobile 에서 페이지 트랜지션

8. jQuery Mobile 페이지(data-role="page")

9. jQuery Mobile 컨텐트

 

 

페이지 트랜지션은 페이지에서 페이지로 이동할 때 애니메이션 효과를 말한다. jQuery Mobile 은 총 6개의 CSS기반 트랜지션 효과를 제공한다.

 

 

slide

페이지가 오른쪽에서 왼쪽으로 미끄러지듯이 이동한다. (기본값)

 

<a href="home.html" data-transition="slide" data-role="button">slide</a>

$.mobile.changePage("home.html", { transition : "slide" });

 

 

 

slideup

페이지가 아래에서 위쪽으로 미끄러지듯이 이동한다.

 

<a href="home.html" data-transition="slideup" data-role="button">slideup</a>

$.mobile.changePage("home.html", { transition : "slideup" });

 

 

 

slidedown

페이지가 위에서 아래쪽으로 미끄러지듯이 이동한다.

 

<a href="home.html" data-transition="slidedown" data-role="button">slidedown</a>

$.mobile.changePage("home.html", { transition : "slidedown" });

 

 

 

pop

기존페이지가 사리지고 새 페이지가 팝업 형태로 올라온다. (다이얼로그의 기본값)

 

<a href="home.html" data-transition="pop" data-role="button">pop</a>

$.mobile.changePage("home.html", { transition : "pop" });

 

 

 

fade

기존 페이지가 희미해지면서 사라지고 새 페이지 서서히 나타난다.

 

<a href="home.html" data-transition="fade" data-role="button">fade</a>

$.mobile.changePage("home.html", { transition : "fade" });

 

 

 

flip

기존 페이지 뒷면에 새 페이지가 있는 것처럼 회전하면서 새 페이지가 나타난다.

 

<a href="home.html" data-transition="flip" data-role="button">flip</a>

$.mobile.changePage("home.html", { transition : "flip" });

 

* 페이지 트랜지션은 모바일 디바이스에 따라서 약간은 다르게 동작할 수 있다.